/* WhatsConnect - estilos que casan con el HTML del JS */

#whatsconnect-widget{ z-index:2147483647; font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,"Helvetica Neue",Arial,"Noto Sans"; }

/* Botón flotante */
.whatsconnect-main-btn{
  width:56px;height:56px;border-radius:9999px;border:0;cursor:pointer;color:#fff;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 28px rgba(0,0,0,.22); transition:transform .15s ease, box-shadow .15s ease;
}
.whatsconnect-main-btn:hover{ transform:translateY(-2px); box-shadow:0 14px 32px rgba(0,0,0,.28); }
.whatsconnect-notification-badge{
  position:absolute;top:-6px;right:-6px;background:#ff4757;color:#fff;border-radius:9999px;padding:2px 6px;font-size:12px;line-height:16px;
}

/* Caja de chat */
.whatsconnect-chat-box{
  width:320px; max-height:65vh; background:#fff; border-radius:16px;
  box-shadow:0 18px 48px rgba(0,0,0,.22); overflow:hidden; margin-bottom:12px;
}
.whatsconnect-chat-header{
  padding:12px; color:#fff; display:flex; align-items:center; justify-content:space-between;
}
.whatsconnect-header-content{ display:flex; gap:10px; align-items:center; }
.whatsconnect-avatar{ width:40px; height:40px; border-radius:50%; object-fit:cover; background:#fff; }
.whatsconnect-header-text h4{ margin:0; font-size:14px; line-height:1.1; }
.whatsconnect-status{ display:block; font-size:12px; opacity:.9; }

.whatsconnect-close-btn{ background:transparent; border:0; color:inherit; cursor:pointer; opacity:.9; }
.whatsconnect-close-btn:hover{ opacity:1; }

.whatsconnect-chat-body{
  padding:12px; height:48vh; overflow:auto; background:#f8fafc;
}
.whatsconnect-message{ display:flex; gap:8px; margin-bottom:10px; }
.whatsconnect-bot-message .whatsconnect-message-bubble{
  background:#fff; border-radius:14px; padding:10px 12px; border:1px solid #e2e8f0; max-width:85%;
}
.whatsconnect-user-message{ justify-content:flex-end; }
.whatsconnect-user-message .whatsconnect-message-bubble{
  background:#25D366; color:#fff; border-radius:14px; padding:10px 12px; max-width:85%;
}

.whatsconnect-message-avatar{ width:28px;height:28px;border-radius:50%;object-fit:cover;background:#fff;border:1px solid #e2e8f0; }

.whatsconnect-options-container{ display:flex; flex-wrap:wrap; gap:8px; margin-top:10px; }
.whatsconnect-option-btn{
  background:#e2e8f0; border:0; padding:8px 12px; border-radius:9999px; cursor:pointer; font-size:14px;
}
.whatsconnect-option-btn:hover{ filter:brightness(.96); }
.whatsconnect-primary-btn{ color:#fff; }

@media (max-width:480px){
  .whatsconnect-chat-box{ width:calc(100vw - 32px); }
}