/* Leveragency · Web v2 · Componente compartido: demo de conversación de WhatsApp.
   Scope único: .wa — lo montan varias secciones, no lo redefinan. */

.wa{--wa-h:400px;display:flex;flex-direction:column;background:var(--papel-alto);border:var(--borde);border-radius:var(--r-3);overflow:hidden;position:relative}
@media (min-width:601px){.wa{--wa-h:470px}}

/* ---- cabecera ---- */
.wa-head{display:flex;align-items:center;gap:11px;padding:12px 14px;border-bottom:var(--borde);background:var(--papel-alto)}
.wa-av{flex:none;width:38px;height:38px;border-radius:50%;background:var(--papel-bajo);border:1px solid var(--linea);display:grid;place-items:center;font-family:var(--fd);font-variation-settings:'SOFT' 0,'WONK' 0;font-weight:600;font-size:17px;line-height:1;color:var(--tinta)}
.wa-id{flex:1;min-width:0}
.wa-id b{display:block;font-weight:600;font-size:15px;line-height:1.25;color:var(--tinta);letter-spacing:-.01em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-id span{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.04em;color:var(--gris);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.wa-head .live{flex:none}

/* ---- cuerpo ---- */
.wa-body{height:var(--wa-h);flex:none;overflow-y:auto;overflow-x:hidden;padding:16px 14px 14px;background:var(--papel-alto);display:flex;flex-direction:column;align-items:stretch;gap:9px;scrollbar-width:thin;scrollbar-color:var(--linea-fuerte) transparent}
/* la conversación se apoya abajo, como en un chat de verdad (sin romper el scroll) */
.wa-body>:first-child{margin-top:auto}
.wa-body::-webkit-scrollbar{width:5px}
.wa-body::-webkit-scrollbar-thumb{background:var(--linea-fuerte);border-radius:3px}

.wa-msg{display:flex;flex-direction:column;max-width:84%}
.wa-msg--in{align-self:flex-start;align-items:flex-start}
.wa-msg--out{align-self:flex-end;align-items:flex-end}
.wa-b{border:1px solid var(--linea);border-radius:var(--r-3);padding:9px 12px;font-size:15px;line-height:1.46;color:var(--tinta-cuerpo);background:var(--papel-bajo);text-align:left}
.wa-msg--in .wa-b{border-bottom-left-radius:2px}
.wa-msg--out .wa-b{background:var(--ambar-wash);border-color:var(--ambar-borde);border-bottom-right-radius:2px}
.wa-meta{display:flex;align-items:center;gap:8px;margin-top:5px;font-family:var(--fm);font-size:10.5px;letter-spacing:.06em;color:var(--gris)}
.wa-meta em{font-style:normal;text-transform:uppercase;letter-spacing:.1em}

/* aparición de cada mensaje (plus, nunca requisito) */
.wa-msg,.wa-sys,.wa-typing{animation:wa-sube .28s var(--ease) both}
@keyframes wa-sube{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---- escribiendo ---- */
.wa-typing{align-self:flex-end;display:inline-flex;align-items:center;gap:5px;padding:13px 14px;background:var(--ambar-wash);border:1px solid var(--ambar-borde);border-radius:var(--r-3);border-bottom-right-radius:2px}
.wa-typing i{width:6px;height:6px;border-radius:50%;background:var(--gris);opacity:.35;animation:wa-punto 1.05s infinite}
.wa-typing i:nth-child(2){animation-delay:.2s}
.wa-typing i:nth-child(3){animation-delay:.4s}
@keyframes wa-punto{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

/* ---- nota de voz ---- */
.wa-voz{display:flex;align-items:center;gap:10px;min-width:212px}
.wa-voz>svg{flex:none;width:19px;height:19px;color:var(--tinta)}
.wa-onda{flex:1;display:flex;align-items:center;gap:2.5px;height:24px}
.wa-onda i{flex:1 1 2px;min-width:2px;max-width:3px;border-radius:2px;background:var(--linea-fuerte);transform-origin:center;animation:wa-onda 1.5s ease-in-out infinite}
@keyframes wa-onda{0%,100%{transform:scaleY(.55)}50%{transform:scaleY(1)}}
.wa-dur{flex:none;font-family:var(--fm);font-size:11px;color:var(--gris);letter-spacing:.04em}
.wa-tr{margin-top:9px;padding-top:9px;border-top:1px solid var(--linea);font-family:var(--fm);font-size:11px;line-height:1.55;letter-spacing:.02em;color:var(--gris);animation:wa-sube .3s var(--ease) both}

/* ---- marca de día ---- */
.wa-dia{align-self:center;font-family:var(--fm);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--gris);opacity:.75;padding:2px 0}

/* ---- línea de sistema ---- */
.wa-sys{align-self:center;max-width:94%;display:inline-flex;align-items:center;gap:7px;padding:6px 12px;border:1px solid var(--linea);border-radius:999px;background:var(--papel);font-family:var(--fm);font-size:11px;line-height:1.4;letter-spacing:.03em;color:var(--gris);text-align:left}
.wa-sys i{flex:none;width:6px;height:6px;border-radius:50%;background:var(--verde)}

/* ---- pie: chips de respuesta / reinicio ---- */
.wa-foot{flex:none;min-height:68px;display:flex;flex-wrap:wrap;align-items:center;gap:8px;padding:12px 14px;border-top:var(--borde);background:var(--papel-alto)}
.wa-foot .chip{font-size:15px}
.wa-hint{font-family:var(--fm);font-size:11px;letter-spacing:.06em;color:var(--gris);display:inline-flex;align-items:center;gap:8px}
.wa-hint::before{content:"";width:22px;height:1px;background:var(--linea-fuerte);flex:none}
.wa-reset{font-family:var(--fm);font-size:11.5px;letter-spacing:.06em;color:var(--gris);text-decoration:underline;text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}
.wa-reset:hover{color:var(--tinta)}

/* ---- estado sin JS: se lee igual ---- */
.wa-fb{padding:16px 14px;display:flex;flex-direction:column;gap:9px}
.wa-fb p{margin:0;max-width:84%;border:1px solid var(--linea);border-radius:var(--r-3);padding:9px 12px;font-size:15px;line-height:1.46;background:var(--papel-bajo)}
.wa-fb p:nth-child(even){align-self:flex-end;background:var(--ambar-wash);border-color:var(--ambar-borde)}

@media (prefers-reduced-motion:reduce){
  .wa-msg,.wa-sys,.wa-typing,.wa-tr{animation:none}
  .wa-typing i,.wa-onda i{animation:none}
}