/* Animação multicanal: telefone + mensagem + ligação pelo WhatsApp no mesmo atendimento */
.wcm{
  --m-bg:#0A1330; --m-card:#111C42; --m-card-2:#16224F; --m-line:#22305E;
  --m-fg:#F4F6FB; --m-fg-2:#A9B4D4; --m-fg-3:#8792B5;
  --m-blue:#8EA6FF; --m-blue-strong:#1F4FD8; --m-blue-2:#3A63F2; --m-ice:#B7C6FF;
  --m-wa:#25D366; --m-wa-soft:rgba(37,211,102,.12); --m-ok:#7FE0B0; --m-red:#FF8A93;
  --m-in:#1A2758; --m-out:#1F4FD8;
  --m-mono:'Geist Mono',ui-monospace,'SF Mono',Menlo,monospace;
  font-family:'Geist',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  position:relative; background:var(--m-bg); color:var(--m-fg); border:1px solid var(--m-line); border-radius:22px;
  box-shadow:0 40px 80px -40px rgba(10,19,48,.55), 0 2px 4px rgba(10,19,48,.12);
  overflow:hidden; isolation:isolate; font-size:13px; line-height:1.35; text-align:left;
  display:grid; grid-template-rows:auto 1fr auto;
}
.wcm *{box-sizing:border-box}
.wcm__head{display:flex; align-items:center; justify-content:space-between; gap:10px; padding:14px 16px; border-bottom:1px solid var(--m-line)}
.wcm__title{font-weight:600; font-size:14px; letter-spacing:-.2px; display:flex; align-items:center; gap:8px}
.wcm__tabs{display:flex; gap:6px}
.wcm__tab{font-family:var(--m-mono); font-size:10px; letter-spacing:1px; text-transform:uppercase; color:var(--m-fg-3); border:1px solid var(--m-line); border-radius:999px; padding:4px 9px; white-space:nowrap}
.wcm__tab.is-on{color:var(--m-ice); background:#0F1A44; border-color:#2A3A78}
.wcm__body{display:grid; grid-template-columns:minmax(0,190px) minmax(0,1fr); min-height:430px}

/* Lista de conversas */
.wcm__inbox{border-right:1px solid var(--m-line); padding:8px; display:flex; flex-direction:column; gap:6px; overflow:hidden}
.wcm-it{display:grid; grid-template-columns:auto 1fr auto; gap:9px; align-items:center; padding:9px; border-radius:12px; border:1px solid transparent; transition:background .3s, border-color .3s}
.wcm-it.is-active{background:var(--m-card-2); border-color:#2F48A8}
.wcm-it__av{width:30px; height:30px; border-radius:50%; display:grid; place-items:center; font-size:11px; font-weight:600; background:var(--m-in); color:var(--m-ice); position:relative; flex:none}
.wcm-it__ch{position:absolute; right:-3px; bottom:-3px; width:15px; height:15px; border-radius:50%; display:grid; place-items:center; border:2px solid var(--m-bg)}
.wcm-it__ch.wa{background:var(--m-wa)} .wcm-it__ch.tel{background:var(--m-blue-strong)}
.wcm-it__ch svg{width:8px; height:8px}
.wcm-it__name{font-weight:600; font-size:12.5px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wcm-it__prev{font-size:11px; color:var(--m-fg-3); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; margin-top:1px}
.wcm-it__badge{min-width:18px; height:18px; border-radius:9px; padding:0 5px; background:var(--m-blue-strong); color:#fff; font-size:10px; font-weight:600; display:grid; place-items:center; font-variant-numeric:tabular-nums}
.wcm-it__badge:empty{display:none}
.wcm-it.is-new{animation:wcm-new .5s ease-out}

/* Conversa */
.wcm__conv{display:grid; grid-template-rows:auto 1fr auto; min-width:0; position:relative}
.wcm__ch{display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--m-line); min-width:0}
.wcm__ch b{font-size:13px; font-weight:600; white-space:nowrap}
.wcm__ch small{display:block; font-size:11px; color:var(--m-fg-3)}
.wcm__chips{margin-left:auto; display:flex; gap:5px; flex-wrap:wrap; justify-content:flex-end}
.wcm-chip{font-family:var(--m-mono); font-size:9.5px; letter-spacing:.8px; text-transform:uppercase; padding:3px 7px; border-radius:999px; border:1px solid var(--m-line); color:var(--m-fg-2); white-space:nowrap}
.wcm-chip.wa{color:var(--m-wa); border-color:rgba(37,211,102,.35); background:var(--m-wa-soft)}
.wcm__msgs{padding:12px 14px; display:flex; flex-direction:column; justify-content:flex-end; gap:7px; overflow:hidden; min-height:0}
.wcm-ev{align-self:center; font-family:var(--m-mono); font-size:10px; letter-spacing:.6px; text-transform:uppercase; color:var(--m-fg-3);
  border:1px dashed var(--m-line); border-radius:999px; padding:4px 10px; display:flex; align-items:center; gap:6px; white-space:nowrap}
.wcm-ev.wa{color:var(--m-wa); border-color:rgba(37,211,102,.35)}
.wcm-ev .ok{color:var(--m-ok)}
.wcm-msg{max-width:82%; padding:7px 10px; border-radius:12px; font-size:12.5px; line-height:1.35}
.wcm-msg.in{align-self:flex-start; background:var(--m-in); border-bottom-left-radius:4px}
.wcm-msg.out{align-self:flex-end; background:var(--m-out); color:#fff; border-bottom-right-radius:4px}
.wcm-msg.out .tk{font-size:10px; color:#B7C6FF; margin-left:6px}
.wcm-msg.doc{display:flex; gap:8px; align-items:center}
.wcm-msg.doc i{width:22px; height:26px; border-radius:4px; background:rgba(255,255,255,.18); flex:none; position:relative}
.wcm-msg.doc i::after{content:"PDF"; position:absolute; inset:auto 0 3px; font-size:7px; font-style:normal; text-align:center; font-weight:700}
.wcm-msg.doc small{display:block; color:#C9D5FF; font-size:10.5px}
.wcm-typing{align-self:flex-start; background:var(--m-in); border-radius:12px; padding:9px 12px; display:flex; gap:4px}
.wcm-typing span{width:5px; height:5px; border-radius:50%; background:var(--m-fg-3); animation:wcm-dot 1s infinite}
.wcm-typing span:nth-child(2){animation-delay:.15s}.wcm-typing span:nth-child(3){animation-delay:.3s}
.wcm-in{animation:wcm-in .35s ease-out}

/* Rodapé da conversa / barra de ligação */
.wcm__foot{border-top:1px solid var(--m-line); padding:10px 12px; min-height:58px; display:flex; align-items:center}
.wcm-compose{flex:1; display:flex; align-items:center; gap:8px; color:var(--m-fg-3); font-size:12px}
.wcm-compose span{flex:1; border:1px solid var(--m-line); border-radius:999px; padding:8px 12px}
.wcm-compose b{width:32px; height:32px; border-radius:50%; background:var(--m-blue-strong); display:grid; place-items:center}
.wcm-compose b svg{width:14px; height:14px}
.wcm-call{flex:1; display:flex; align-items:center; gap:10px; background:linear-gradient(90deg,rgba(37,211,102,.16),rgba(31,79,216,.18)); border:1px solid rgba(37,211,102,.4); border-radius:14px; padding:8px 10px}
.wcm-call__ic{width:32px; height:32px; border-radius:50%; background:var(--m-wa); display:grid; place-items:center; flex:none; position:relative}
.wcm-call__ic svg{width:15px; height:15px}
.wcm-call.is-ringing .wcm-call__ic::after{content:""; position:absolute; inset:0; border-radius:50%; border:2px solid var(--m-wa); animation:wcm-ring 1.1s ease-out infinite}
.wcm-call__txt{min-width:0; flex:1}
.wcm-call__txt b{display:block; font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.wcm-call__txt small{font-size:11px; color:var(--m-fg-2); display:flex; align-items:center; gap:6px}
.wcm-call__txt small i{width:6px; height:6px; border-radius:50%; background:var(--m-red); display:inline-block}
.wcm-btn{font:inherit; font-size:11.5px; font-weight:600; border:0; border-radius:999px; padding:8px 12px; color:#fff; white-space:nowrap}
.wcm-btn.no{background:#3A1A2A; color:var(--m-red)}
.wcm-btn.yes{background:var(--m-wa); color:#06260F}
.wcm-btn.yes.is-pulse{animation:wcm-pulse 1s ease-in-out infinite}
.wcm-btn.is-press{transform:scale(.92)}
.wcm-btn.end{background:#3A1A2A; color:var(--m-red)}
.wcm-wave{display:flex; align-items:center; gap:2px; height:18px}
.wcm-wave span{width:3px; height:5px; border-radius:2px; background:var(--m-wa); animation:wcm-wave .9s ease-in-out infinite}
.wcm-wave span:nth-child(2){animation-delay:-.6s}.wcm-wave span:nth-child(3){animation-delay:-.3s}.wcm-wave span:nth-child(4){animation-delay:-.75s}
.wcm-time{font-family:var(--m-mono); font-size:12px; color:var(--m-fg); font-variant-numeric:tabular-nums}

.wcm__bar{display:flex; justify-content:space-between; gap:10px; padding:9px 16px; border-top:1px solid var(--m-line); font-family:var(--m-mono); font-size:9.5px; letter-spacing:1px; text-transform:uppercase; color:var(--m-fg-3)}
.wcm__bar b{color:var(--m-blue); font-weight:500}

@keyframes wcm-in{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}
@keyframes wcm-new{0%{background:rgba(31,79,216,.35)}100%{background:transparent}}
@keyframes wcm-dot{0%,100%{opacity:.3; transform:translateY(0)}50%{opacity:1; transform:translateY(-2px)}}
@keyframes wcm-ring{0%{opacity:.9; transform:scale(1)}100%{opacity:0; transform:scale(1.7)}}
@keyframes wcm-pulse{0%,100%{box-shadow:0 0 0 0 rgba(37,211,102,.55)}50%{box-shadow:0 0 0 7px rgba(37,211,102,0)}}
@keyframes wcm-wave{0%,100%{transform:scaleY(1)}50%{transform:scaleY(3.4)}}

@media (max-width:560px){
  .wcm__body{grid-template-columns:1fr; min-height:0}
  .wcm__inbox{flex-direction:row; border-right:0; border-bottom:1px solid var(--m-line); overflow-x:auto}
  .wcm-it{grid-template-columns:auto; justify-items:center; padding:6px; min-width:58px}
  .wcm-it__name{font-size:10.5px; max-width:60px}
  .wcm-it__prev,.wcm-it__badge{display:none}
  .wcm__msgs{min-height:300px}
  .wcm__tabs .wcm__tab:not(.is-on){display:none}
}
@media (prefers-reduced-motion:reduce){
  .wcm *, .wcm *::after{animation:none!important; transition:none!important}
}
.wcm__foot,.wcm-call,.wcm-compose,.wcm__msgs,.wcm__ch{min-width:0}
.wcm-call__txt small{white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:block}
.wcm-call__txt small i{margin-right:5px; vertical-align:middle}
@media (max-width:420px){.wcm-call .wcm-wave{display:none}.wcm-btn{padding:7px 9px}}