/* ════════════════════════════════════════════════════════════════════
   CBS Signal Hub — Chat conversacional de WhatsApp
   ════════════════════════════════════════════════════════════════════ */

.cbs-wa-chat{
  --cbs-wa-green:#25D366;
  --cbs-wa-head:#075E54;
  --cbs-wa-bg:#ECE5DD;
  font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
}

/* ── Botón flotante ─────────────────────────────────────────────── */
.cbs-wa-chat__fab{
  position:fixed; right:16px; bottom:16px; z-index:2147483000;
  width:60px; height:60px; border-radius:50%;
  border:0; padding:0; cursor:pointer;
  background:var(--cbs-wa-green); color:#fff;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 6px 22px rgba(37,211,102,.50), 0 2px 8px rgba(0,0,0,.14);
  transition:transform .18s ease, box-shadow .18s ease;
}
.cbs-wa-chat__fab:hover{
  transform:scale(1.08) translateY(-2px);
  box-shadow:0 10px 30px rgba(37,211,102,.58);
}
.cbs-wa-chat__fab:active{ transform:scale(.97); }
.cbs-wa-chat__fab svg{ display:block; }
.cbs-wa-chat__fab-dot{
  position:absolute; top:6px; right:6px;
  width:13px; height:13px; border-radius:50%;
  background:#EA0029; border:2px solid #fff;
}
.cbs-wa-chat[data-closed="0"] .cbs-wa-chat__fab-dot{ display:none; }

/* ── Panel de chat ──────────────────────────────────────────────── */
.cbs-wa-chat__panel{
  position:fixed; right:16px; bottom:88px; z-index:2147483001;
  width:360px; max-width:calc(100vw - 32px);
  height:540px; max-height:calc(100vh - 120px);
  display:none; flex-direction:column;
  background:var(--cbs-wa-bg);
  border-radius:16px; overflow:hidden;
  box-shadow:0 24px 64px rgba(0,0,0,.26), 0 4px 16px rgba(0,0,0,.10);
}
.cbs-wa-chat[data-closed="0"] .cbs-wa-chat__panel{
  display:flex;
  animation:cbsWaPop .22s cubic-bezier(.34,1.4,.64,1);
}
@keyframes cbsWaPop{
  from{ opacity:0; transform:scale(.92) translateY(16px); }
  to{   opacity:1; transform:scale(1)   translateY(0); }
}

/* ── Encabezado ─────────────────────────────────────────────────── */
.cbs-wa-chat__head{
  display:flex; align-items:center; gap:10px;
  padding:10px 12px;
  background:var(--cbs-wa-head); color:#fff;
  flex:0 0 auto;
}
.cbs-wa-chat__avatar{
  position:relative; flex:0 0 auto;
  width:40px; height:40px; border-radius:50%;
  background:var(--cbs-wa-green);
  display:flex; align-items:center; justify-content:center;
}
.cbs-wa-chat__avatar svg{ width:24px; height:24px; }
.cbs-wa-chat__avatar-img{
  width:100%; height:100%;
  border-radius:50%;
  object-fit:cover;
  display:block;
}
.cbs-wa-chat__online{
  position:absolute; right:0; bottom:0;
  width:11px; height:11px; border-radius:50%;
  background:#4ade80; border:2px solid var(--cbs-wa-head);
}
.cbs-wa-chat__head-txt{ display:flex; flex-direction:column; line-height:1.25; min-width:0; flex:1; }
.cbs-wa-chat__head-txt strong{ font-size:14px; font-weight:600; }
.cbs-wa-chat__head-txt span{ font-size:11px; opacity:.85; }
.cbs-wa-chat__close{
  border:0; background:transparent; color:#fff; cursor:pointer;
  font-size:24px; line-height:1; padding:4px 6px; opacity:.85;
  flex:0 0 auto;
}
.cbs-wa-chat__close:hover{ opacity:1; }

/* ── Cuerpo de mensajes ─────────────────────────────────────────── */
.cbs-wa-chat__body{
  flex:1 1 auto; overflow-y:auto;
  padding:14px 12px;
  display:flex; flex-direction:column; gap:8px;
  background-color:var(--cbs-wa-bg);
}

/* ── Burbujas ───────────────────────────────────────────────────── */
.cbs-wa-chat__msg{
  position:relative;
  max-width:80%;
  padding:7px 10px 18px;
  border-radius:8px;
  font-size:13.5px; line-height:1.45; color:#0f172a;
  word-wrap:break-word; white-space:pre-wrap;
  box-shadow:0 1px 1px rgba(0,0,0,.10);
  animation:cbsWaMsg .18s ease;
}
@keyframes cbsWaMsg{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:translateY(0); } }
.cbs-wa-chat__msg--op{ align-self:flex-start; background:#fff;     border-top-left-radius:2px; }
.cbs-wa-chat__msg--me{ align-self:flex-end;   background:#D9FDD3;  border-top-right-radius:2px; }
.cbs-wa-chat__time{
  position:absolute; right:8px; bottom:4px;
  font-size:10px; color:#94a3b8;
}

/* ── Error ──────────────────────────────────────────────────────── */
.cbs-wa-chat__err{
  align-self:center;
  background:#fef2f2; color:#b91c1c;
  font-size:12px; padding:5px 12px; border-radius:10px;
  max-width:90%; text-align:center;
}

/* ── Indicador de escritura ─────────────────────────────────────── */
.cbs-wa-chat__typing{
  align-self:flex-start;
  background:#fff; border-radius:8px; border-top-left-radius:2px;
  padding:10px 12px; display:flex; gap:4px;
  box-shadow:0 1px 1px rgba(0,0,0,.10);
}
.cbs-wa-chat__typing span{
  width:7px; height:7px; border-radius:50%; background:#9ca3af;
  animation:cbsWaTyping 1.2s infinite ease-in-out;
}
.cbs-wa-chat__typing span:nth-child(2){ animation-delay:.18s; }
.cbs-wa-chat__typing span:nth-child(3){ animation-delay:.36s; }
@keyframes cbsWaTyping{
  0%,60%,100%{ transform:translateY(0); opacity:.5; }
  30%{ transform:translateY(-5px); opacity:1; }
}

/* ── Barra de entrada ───────────────────────────────────────────── */
.cbs-wa-chat__input{
  flex:0 0 auto;
  display:flex; align-items:center; gap:8px;
  padding:8px 10px;
  background:#f0f2f5;
}
.cbs-wa-chat__input input{
  flex:1; min-width:0;
  border:0 !important; outline:0 !important; box-shadow:none !important;
  background:#fff !important;
  border-radius:20px !important;
  padding:10px 14px !important; margin:0 !important;
  font-size:14px; color:#0f172a; height:auto !important;
  -webkit-appearance:none; appearance:none;
}
.cbs-wa-chat__input input::placeholder{ color:#9ca3af; }
.cbs-wa-chat__input input:disabled{ background:#e9edef !important; }
.cbs-wa-chat__input button{
  flex:0 0 auto;
  width:42px; height:42px; border-radius:50%;
  border:0; cursor:pointer;
  background:var(--cbs-wa-head); color:#fff;
  display:flex; align-items:center; justify-content:center;
  transition:background .15s, transform .12s;
}
.cbs-wa-chat__input button:hover{ background:#054c44; }
.cbs-wa-chat__input button:active{ transform:scale(.93); }
.cbs-wa-chat__input button:disabled{ background:#9ca3af; cursor:default; }

/* ── Móvil — el panel ocupa casi toda la pantalla ───────────────── */
@media (max-width:480px){
  .cbs-wa-chat__panel{
    right:8px; left:8px; bottom:84px;
    width:auto; max-width:none;
    height:calc(var(--cbs-wa-h, 100vh) - 100px);
    max-height:calc(var(--cbs-wa-h, 100vh) - 100px);
  }
}

/* ── Zoho SalesIQ: con el chat cerrado, su botón se apila sobre el FAB ── */
.zsiq-float,
.zsiq_floatmain,
#zsiq_float,
#zsiqwidget,
[class*="zsiq_"]{
  bottom:86px !important;
  right:16px !important;
  left:auto !important;
}

/* Con el chat de CBS abierto, ocultar Zoho para que no se encime */
body.cbs-wa-open .zsiq-float,
body.cbs-wa-open .zsiq_floatmain,
body.cbs-wa-open #zsiq_float,
body.cbs-wa-open #zsiqwidget,
body.cbs-wa-open [class*="zsiq_"]{
  display:none !important;
}
