/* ===== Botón flotante (igual que antes) ===== */
.imabox-chat-btn{
  position: fixed; right: 18px; bottom: 18px;
  width: 56px; height: 56px; border: 0; border-radius: 50%;
  background:#f01f50; box-shadow:0 12px 30px rgba(0,0,0,.28);
  display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:9999;
}
.imabox-chat-btn svg{ width:28px; height:28px; fill:#fff; }

/* ===== Panel: vuelve a abajo-derecha ===== */
#imabox-chat-panel{
  position: fixed;
  right: 18px;
  bottom: 86px;               /* deja espacio para el botón flotante */
  width: 360px;               /* ancho cómodo */
  max-width: calc(100vw - 36px);
  max-height: 80vh;           /* que no se salga en pantallas bajas */
  overflow: auto;
  background:#fff;
  border-radius:16px;
  border:1px solid rgba(0,0,0,.06);
  box-shadow:0 24px 60px rgba(0,0,0,.35);
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif;
  z-index:9998;
}

/* Cabecera */
#imabox-chat-panel header{
  background:#181818; color:#fff;
  padding:1rem 1.1rem;
  display:grid; gap:.25rem;
  border-top-left-radius:16px; border-top-right-radius:16px;
}
#imabox-chat-panel header strong{ font-size:1.05rem; }

/* Contenido */
#imabox-chat-panel form{
  padding:1rem 1.1rem 1.2rem;
  display:grid; gap:.8rem;
}

/* Evitar desbordes */
#imabox-chat-panel *, #imabox-chat-panel *::before, #imabox-chat-panel *::after{ box-sizing:border-box; }

/* Etiquetas */
#imabox-chat-panel label{ display:grid; gap:.35rem; color:#222; font-weight:600; }

/* Campos centrados visualmente */
#imabox-chat-panel input,
#imabox-chat-panel textarea{
  width:100%;
  background:#fff; color:#222;
  border:1px solid #e6e6e6;
  border-radius:12px;
  padding:.75rem;
  font:inherit;
  text-align:center;               /* <-- texto y placeholder centrados */
  outline:none;
  box-shadow:0 2px 0 rgba(0,0,0,.03) inset;
}
#imabox-chat-panel textarea{ min-height:110px; resize:vertical; }

/* Foco accesible */
#imabox-chat-panel input:focus,
#imabox-chat-panel textarea:focus{
  border-color:#f01f50;
  box-shadow:0 0 0 3px rgba(37,211,102,.18);
}

/* Botones */
.actions{ display:grid; grid-template-columns:1fr 1fr; gap:.6rem; margin-top:.2rem; }
.actions button{
  padding:.75rem .9rem; border:0; border-radius:10px; cursor:pointer; font-weight:700;
}
.actions button[type="submit"]{ background:#f01f50; color:#fff; }
#imabox-whats{ background:#f1f2f4; color:#1f2937; }

/* Textos auxiliares */
.hint{ font-size:.85rem; color:#666; margin-top:.15rem; }
.ok{ color:#0a7f3f; } .err{ color:#b00020; }

/* Móvil: que se ajuste bien al ancho y no tape el botón */
@media (max-width: 520px){
  #imabox-chat-panel{
    right: 10px; bottom: 82px; width: calc(100vw - 20px);
    max-height: 70vh;
  }
}