/* admin-comms.css  (Oct 2026, v77)  Messages inbox + Email campaigns.
   Built only on admin.html's --a-* tokens, so light and dark both follow. */

/* ---------------------------------------------------------------- shared */
.cm-top{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin:0 0 14px;}
.cm-h{margin:0;font-size:1.25rem;font-weight:800;color:var(--a-text-strong);letter-spacing:-.01em;}
.cm-h3{display:flex;align-items:center;gap:8px;margin:0 0 12px;font-size:.98rem;font-weight:800;color:var(--a-text-strong);}
.cm-sub{margin:4px 0 0;font-size:.82rem;line-height:1.5;color:var(--a-muted);}
.cm-card{background:var(--a-surface);border:1px solid var(--a-border);border-radius:14px;padding:18px 18px 16px;box-shadow:var(--a-shadow-sm);margin:0 0 14px;min-width:0;}
.cm-row{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px;}
.cm-row .grow{flex:1 1 220px;width:auto;}
.cm-act{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:9px;background:var(--a-surface-2);color:var(--a-text);
  border:1.5px solid var(--a-border-2);font:700 .78rem/1.2 inherit;font-family:inherit;cursor:pointer;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;}
.cm-act:hover{border-color:var(--a-accent);}
.cm-act:disabled{opacity:.5;cursor:default;}
.cm-act.danger{color:var(--a-err-fg);}
.cm-act.danger:hover{border-color:var(--a-err-fg);}
.cm-act.danger.solid{background:#B42318;border-color:#B42318;color:#FFFFFF;}
.cm-act.danger.solid:hover{background:#912018;border-color:#912018;}
.cm-act .ap-ic{flex:0 0 auto;}
.cm-pill{display:inline-flex;align-items:center;padding:3px 9px;border-radius:999px;font-size:.68rem;font-weight:800;letter-spacing:.02em;white-space:nowrap;}
.cm-pill.open{background:var(--a-info-bg);color:var(--a-info-fg);}
.cm-pill.done{background:var(--a-ok-bg);color:var(--a-ok-fg);}
.cm-pill.arch{background:var(--a-surface-2);color:var(--a-muted);border:1px solid var(--a-border);}
.cm-pill.bad{background:var(--a-err-bg);color:var(--a-err-fg);}

#cm-toast{position:fixed;left:50%;bottom:22px;z-index:3000;max-width:min(92vw,560px);padding:12px 18px;border-radius:12px;background:#0C0C0C;color:#FFFFFF;
  font-size:.86rem;font-weight:600;line-height:1.4;box-shadow:0 14px 40px rgba(0,0,0,.3);transform:translate(-50%,20px);opacity:0;pointer-events:none;transition:opacity .25s,transform .25s;}
#cm-toast.on{opacity:1;transform:translate(-50%,0);}
#cm-toast.bad{background:#B42318;}
html.vp-dark #cm-toast{background:#F4F4F4;color:#0C0C0C;}
html.vp-dark #cm-toast.bad{background:#F87171;color:#1A0606;}

/* ----------------------------------------------------------------- inbox */
.cm-bar{gap:12px;}
.cm-fs{display:flex;gap:6px;flex-wrap:wrap;}
.cm-f{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:999px;border:1.5px solid var(--a-border);background:var(--a-input-bg);
  color:var(--a-text);font:700 .8rem/1 inherit;font-family:inherit;cursor:pointer;}
.cm-f i{font-style:normal;font-size:.7rem;font-weight:800;min-width:18px;padding:3px 6px;border-radius:999px;background:var(--a-surface-2);color:var(--a-muted);text-align:center;}
.cm-f:hover{border-color:var(--a-accent);}
.cm-f.on{background:var(--a-text-strong);border-color:var(--a-text-strong);color:var(--a-surface);}
.cm-f.on i{background:var(--a-surface);color:var(--a-text-strong);}
.cm-list{display:grid;gap:12px;}
.cm-empty{text-align:center;padding:42px 12px;background:var(--a-surface);border:1px dashed var(--a-border-2);border-radius:14px;}
.cm-msg{position:relative;background:var(--a-surface);border:1px solid var(--a-border);border-radius:14px;padding:16px 18px 14px;box-shadow:var(--a-shadow-sm);}
.cm-msg.is-open::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:4px;border-radius:0 4px 4px 0;background:var(--a-gradient);}
.cm-msg.is-arch{opacity:.78;}
.cm-msg-h{display:flex;align-items:center;gap:12px;}
.cm-av{flex:0 0 auto;width:38px;height:38px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.8rem;font-weight:800;
  background:var(--a-info-bg);color:var(--a-info-fg);}
.cm-who{display:flex;flex-direction:column;min-width:0;flex:1 1 auto;}
.cm-who b{font-size:.93rem;color:var(--a-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-who a{font-size:.8rem;color:var(--a-accent-2,var(--a-accent));text-decoration:none;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-who a:hover{text-decoration:underline;}
.cm-meta{display:flex;align-items:center;gap:8px;flex:0 0 auto;}
.cm-meta time{font-size:.76rem;color:var(--a-muted);white-space:nowrap;}
.cm-body{margin:12px 0 0;font-size:.9rem;line-height:1.6;color:var(--a-text);white-space:pre-wrap;overflow-wrap:anywhere;}
.cm-reply{margin:12px 0 0;padding:10px 12px;border-radius:10px;background:var(--a-surface-2);border:1px solid var(--a-border);}
.cm-k{margin:0 0 4px;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;color:var(--a-muted);}
.cm-reply-t{margin:0;font-size:.86rem;line-height:1.55;color:var(--a-text);white-space:pre-wrap;overflow-wrap:anywhere;}
.cm-compose{display:flex;gap:10px;align-items:flex-end;margin:12px 0 0;}
.cm-ta{flex:1 1 auto;min-height:62px;resize:vertical;line-height:1.5;}
.cm-send{flex:0 0 auto;}
.cm-acts{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin:12px 0 0;padding:10px 0 0;border-top:1px solid var(--a-border);}
.cm-sp{flex:1 1 auto;}
.cm-confirm{font-size:.8rem;font-weight:700;color:var(--a-err-fg);}
.cm-alert{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:700;color:var(--a-muted);}
.cm-alert.ok{color:var(--a-ok-fg);}
.cm-alert.bad{color:var(--a-err-fg);}

/* ----------------------------------------------------------------- email */
.cm-aud{display:grid;gap:4px;}
.cm-aud-n{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;}
.cm-aud-n b{font-size:2.3rem;font-weight:900;letter-spacing:-.03em;line-height:1;color:var(--a-text-strong);font-variant-numeric:tabular-nums;}
.cm-aud-n span{font-size:.92rem;font-weight:700;color:var(--a-text);}
.cm-chips{display:flex;gap:6px;flex-wrap:wrap;margin:8px 0 2px;}
.cm-chips span{padding:4px 10px;border-radius:999px;background:var(--a-surface-2);border:1px solid var(--a-border);font-size:.74rem;font-weight:700;color:var(--a-text);}
.cm-note{display:flex;align-items:flex-start;gap:7px;margin:10px 0 0;padding:9px 12px;border-radius:10px;background:var(--a-warn-bg);color:var(--a-warn-fg);font-size:.8rem;font-weight:700;line-height:1.45;}
.cm-note .ap-ic{flex:0 0 auto;margin-top:1px;}
.cm-note.bad{background:var(--a-err-bg);color:var(--a-err-fg);}
.cm-email-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:14px;align-items:start;}
.cm-email-grid > div{min-width:0;}
.cm-grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 12px;margin:0 0 6px;}
.cm-span2{grid-column:1 / -1;}
.cm-fl{display:flex;flex-direction:column;gap:5px;min-width:0;}
.cm-fl > span{font-size:.72rem;font-weight:800;color:var(--a-muted);letter-spacing:.02em;}
.cm-fl .adm-search,.cm-fl .adm-sort{width:100%;box-sizing:border-box;}
.cm-fl textarea{resize:vertical;line-height:1.5;}
.cm-checks{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:6px;}
.cm-checks li{padding:4px 10px;border-radius:999px;font-size:.73rem;font-weight:800;}
.cm-checks li.ok{background:var(--a-ok-bg);color:var(--a-ok-fg);}
.cm-checks li.no{background:var(--a-err-bg);color:var(--a-err-fg);}
.cm-adv{margin:14px 0 0;}
.cm-sup{padding-top:12px;border-top:1px solid var(--a-border);}
.cm-sup-list{list-style:none;margin:12px 0 0;padding:0;max-height:300px;overflow:auto;border:1px solid var(--a-border);border-radius:10px;}
.cm-sup-list li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;padding:9px 12px;border-bottom:1px solid var(--a-border);}
.cm-sup-list li:last-child{border-bottom:0;}
.cm-sup-who{flex:1 1 200px;min-width:0;display:flex;flex-direction:column;gap:2px;}
.cm-sup-who b{font-size:.84rem;color:var(--a-text-strong);overflow-wrap:anywhere;}
.cm-sup-who small{font-size:.72rem;color:var(--a-muted);}
.cm-adv summary{cursor:pointer;font-size:.82rem;font-weight:800;color:var(--a-text);}
.cm-code{display:block;width:100%;box-sizing:border-box;min-height:260px;margin:10px 0 0;font:12px/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;resize:vertical;white-space:pre;}
.cm-prev{position:sticky;top:14px;}
.cm-prev-h{display:flex;align-items:center;justify-content:space-between;gap:10px;margin:0 0 10px;}
.cm-prev-h .cm-h3{margin:0;}
.cm-seg{display:inline-flex;padding:3px;border-radius:10px;background:var(--a-surface-2);border:1px solid var(--a-border);}
.cm-seg button{padding:6px 12px;border:0;border-radius:8px;background:transparent;color:var(--a-muted);font:800 .74rem/1 inherit;font-family:inherit;cursor:pointer;}
.cm-seg button.on{background:var(--a-surface);color:var(--a-text-strong);box-shadow:var(--a-shadow-sm);}
.cm-inbox-line{display:flex;flex-direction:column;gap:2px;padding:10px 12px;margin:0 0 10px;border-radius:10px;background:var(--a-surface-2);border:1px solid var(--a-border);min-width:0;}
.cm-inbox-line b{font-size:.86rem;color:var(--a-text-strong);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-inbox-line span{font-size:.78rem;color:var(--a-muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cm-frame{margin:0 auto;border-radius:12px;overflow:hidden;border:1px solid var(--a-border);background:#F4F4F4;transition:width .25s ease;}
.cm-frame iframe{display:block;width:100%;height:min(78vh,860px);border:0;background:#F4F4F4;}
.cm-frame.desk{width:100%;}
.cm-frame.phone{width:min(100%,390px);border-radius:26px;border:8px solid #1A1A1A;}
.cm-frame.phone iframe{height:min(74vh,760px);}
.cm-test .adm-search{min-width:0;}
.cm-confirm-box{margin:14px 0 0;padding:14px;border-radius:12px;border:1.5px solid var(--a-err-fg);background:var(--a-err-bg);display:grid;gap:10px;}
.cm-confirm-box p{margin:0;font-size:.86rem;line-height:1.5;color:var(--a-text);}
.cm-confirm-box .cm-row{margin-top:2px;}
.cm-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--a-border);border-radius:10px;}
.cm-table{width:100%;border-collapse:collapse;font-size:.82rem;min-width:720px;}
.cm-table th{text-align:left;padding:9px 12px;font-size:.7rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-muted);background:var(--a-surface-2);border-bottom:1px solid var(--a-border);white-space:nowrap;}
.cm-table td{padding:10px 12px;border-bottom:1px solid var(--a-border);color:var(--a-text);vertical-align:top;font-variant-numeric:tabular-nums;}
.cm-table tr:last-child td{border-bottom:0;}
.cm-table td b{display:block;color:var(--a-text-strong);}
.cm-table small{display:block;margin-top:2px;font-size:.74rem;color:var(--a-muted);}
.cm-table small.bad{color:var(--a-err-fg);}
/* v95: who bought after clicking a campaign */
.cm-buy-btn{display:inline-flex;flex-direction:column;align-items:flex-start;gap:1px;padding:6px 10px;border-radius:9px;background:var(--a-surface-2);color:var(--a-text-strong);
  border:1.5px solid var(--a-border-2);font:800 .82rem/1.2 inherit;font-family:inherit;cursor:pointer;text-align:left;white-space:nowrap;transition:border-color .15s,background .15s,color .15s;}
.cm-buy-btn:hover{border-color:var(--a-accent);}
.cm-buy-btn small{margin:0;font-weight:700;}
.cm-buy-btn.on{background:var(--a-text-strong);border-color:var(--a-text-strong);color:var(--a-surface);}
.cm-table .cm-buy-btn.on small{color:var(--a-surface);}
.cm-buy{margin:14px 0 0;padding:16px;border-radius:12px;border:1px solid var(--a-border);background:var(--a-surface-2);min-width:0;}
.cm-buy-for{margin:0 0 4px;font-size:.78rem;color:var(--a-muted);overflow-wrap:anywhere;}
.cm-buy-for b{color:var(--a-text);}
.cm-buy-h{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin:0 0 12px;}
.cm-buy-t{margin:0;font-size:.95rem;font-weight:800;color:var(--a-text-strong);}
.cm-buy-kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;margin:0 0 12px;}
.cm-buy-k{display:flex;flex-direction:column;gap:2px;padding:12px;border-radius:10px;background:var(--a-surface);border:1px solid var(--a-border);min-width:0;}
.cm-buy-k span{font-size:.68rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;color:var(--a-muted);}
.cm-buy-k b{font-size:1.45rem;font-weight:900;letter-spacing:-.02em;line-height:1.15;color:var(--a-text-strong);font-variant-numeric:tabular-nums;overflow-wrap:anywhere;}
.cm-buy-k small{font-size:.74rem;line-height:1.35;color:var(--a-muted);}
.cm-buy-k.hot{border-color:var(--a-accent);box-shadow:inset 0 3px 0 var(--a-accent);}
.cm-buy .cm-tablewrap{background:var(--a-surface);}
.cm-buy-table{min-width:860px;}
.cm-buy-table tr.void td{color:var(--a-muted);}
.cm-buy-table tr.void td b{color:var(--a-muted);text-decoration:line-through;}
.cm-buy-table td.cm-buy-em,.cm-buy-table td:nth-child(3),.cm-buy-table td:nth-child(4),.cm-buy-table td:nth-child(5){white-space:nowrap;}
.cm-buy-table td:last-child{min-width:190px;}
.cm-table small.cm-buy-how{margin:0;color:var(--a-text);}
.cm-buy-no{margin:12px 0 0;}
.cm-buy-no summary{cursor:pointer;font-size:.82rem;font-weight:800;color:var(--a-text);}
.cm-buy-no ul{list-style:none;margin:8px 0 0;padding:0;max-height:260px;overflow:auto;border:1px solid var(--a-border);border-radius:10px;background:var(--a-surface);}
.cm-buy-no li{display:flex;flex-direction:column;gap:2px;padding:8px 12px;border-bottom:1px solid var(--a-border);}
.cm-buy-no li:last-child{border-bottom:0;}
.cm-buy-no li b{font-size:.82rem;color:var(--a-text-strong);overflow-wrap:anywhere;}
.cm-buy-no li small{font-size:.74rem;color:var(--a-muted);overflow-wrap:anywhere;}
.cm-buy .cm-note .cm-act{margin-left:6px;}
.cm-buy .cm-note{margin:0 0 12px;}
.cm-buy .cm-note:last-child{margin-bottom:0;}
@media (max-width:900px){ .cm-buy-kpis{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:420px){ .cm-buy{padding:12px;} .cm-buy-k b{font-size:1.2rem;} }

@media (max-width:1000px){
  .cm-email-grid{grid-template-columns:1fr;}
  .cm-prev{position:static;}
}
@media (max-width:640px){
  .cm-top{flex-direction:column;align-items:stretch;}
  .cm-grid2{grid-template-columns:1fr;}
  .cm-msg{padding:14px 14px 12px;}
  .cm-msg-h{flex-wrap:wrap;}
  .cm-meta{width:100%;padding-left:50px;}
  .cm-compose{flex-direction:column;align-items:stretch;}
  .cm-aud-n b{font-size:2rem;}
  .cm-frame iframe{height:70vh;}
}
