/* === ASPB Better styles === */
:root{
  --aspb-font: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Noto Sans", sans-serif;
}

.aspb-container{
  position:fixed;
  left:16px;
  bottom:16px;
  z-index:999999;
  pointer-events:none;
}
.aspb-container.right{ left:auto; right:16px; }

/* Tema claro (para fondos oscuros del sitio) */
.aspb-container.theme-light .aspb-bubble{
  background:#ffffff; color:#0f172a; border:1px solid rgba(15,23,42,.08);
  box-shadow:0 10px 24px rgba(0,0,0,.28);
}
.aspb-container.theme-light .aspb-avatar{ background:linear-gradient(135deg,#22c55e,#38bdf8); color:#fff; }
.aspb-container.theme-light .aspb-check{ background:#22c55e; color:#fff; }

/* Tema oscuro */
.aspb-container.theme-dark .aspb-bubble{
  background:#1f2937; color:#ffffff; border:1px solid rgba(255,255,255,.06);
  box-shadow:0 10px 24px rgba(0,0,0,.25);
}
.aspb-container.theme-dark .aspb-avatar{ background:linear-gradient(135deg,#22c55e,#06b6d4); color:#fff; }
.aspb-container.theme-dark .aspb-check{ background:#10b981; color:#fff; }

.aspb-bubble{
  display:flex; align-items:center; gap:10px;
  max-width:min(92vw,360px);
  border-radius:12px; padding:12px 14px;
  font:14px/1.35 var(--aspb-font);
  transform:translateY(20px); opacity:0;
  transition:transform .35s ease, opacity .35s ease;
  pointer-events:auto;
}
.aspb-bubble.show{ transform:translateY(0); opacity:1; }
.aspb-bubble.hide{ transform:translateY(10px); opacity:0; }

.aspb-avatar{ flex:0 0 34px; width:34px; height:34px; border-radius:50%; display:grid; place-items:center; font-weight:700; }
.aspb-check{ width:18px; height:18px; border-radius:50%; display:grid; place-items:center; font-size:12px; }

.aspb-content{ display:grid; gap:3px; }
.aspb-title{ font-weight:600; font-size:13.5px; }
.aspb-sub{ font-size:12.5px; opacity:.9; }
.aspb-time{ font-size:11.5px; opacity:.7; }

@media (max-width:480px){
  .aspb-bubble{ max-width:92vw; padding:10px 12px; }
}