:root { --bmx-primary: #059669; --bmx-blue1:#1e90ff; --bmx-blue2:#0ea5e9; }
* { box-sizing: border-box; }
#bmx-chat-root, .bmx-window, .bmx-bubble { font-family: 'Poppins', system-ui,-apple-system,Segoe UI,Roboto,Arial; }

.bmx-left  { left: 18px; right: auto; }
.bmx-right { right: 18px; left:  auto; }

/* Animated bubble */
@keyframes bmx-pulse {
  0% { transform: translateZ(0) scale(1); box-shadow: 0 0 0 0 rgba(14,165,233,.5); }
  70%{ transform: translateZ(0) scale(1.05); box-shadow: 0 0 0 14px rgba(14,165,233,0); }
  100%{ transform: translateZ(0) scale(1); box-shadow: 0 0 0 0 rgba(14,165,233,0); }
}
.bmx-bubble {
  position: fixed; bottom: 18px;
  display: inline-flex; align-items:center; gap:10px;
  background: linear-gradient(135deg, var(--bmx-blue1), var(--bmx-blue2));
  color:#fff; border:0; border-radius: 999px; padding: 12px 16px;
  font-weight:600; cursor:pointer; z-index:999999;
  animation: bmx-pulse 2.2s ease-out infinite;
}
.bmx-bubble .bmx-dot {
  width: 22px; height: 22px; border-radius:50%;
  background: rgba(255,255,255,.15);
  display:grid; place-items:center; position:relative;
}
.bmx-bubble .bmx-dot:before, .bmx-bubble .bmx-dot:after {
  content:''; position:absolute; width:4px; height:4px; border-radius:50%; background:#fff; top:9px;
}
.bmx-bubble .bmx-dot:before { left:6px; }
.bmx-bubble .bmx-dot:after  { right:6px; }
.bmx-bubble .bmx-d1 { width:4px; height:4px; background:#fff; border-radius:50%; }

.bmx-window {
  position: fixed; bottom: 84px; width: 360px; max-width: calc(100vw - 36px);
  background:#fff; border-radius:18px; overflow:hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,.18); z-index:999999; display:none;
  border: 1px solid #eef2f7;
}

/* Header */
.bmx-header {
  background: linear-gradient(135deg, var(--bmx-blue1), var(--bmx-blue2));
  color:#fff; padding: 14px 16px 10px; position: relative;
}
.bmx-header .bmx-row { display:flex; align-items:center; justify-content:space-between; }
.bmx-avatar {
  width:32px; height:32px; border-radius:50%; background:rgba(255,255,255,.25); display:grid; place-items:center; font-weight:700;
  margin-right:10px;
}
.bmx-title { display:flex; align-items:center; gap:10px; font-weight:700; }
.bmx-sub { font-size:12px; opacity:.95; margin-top:6px; display:flex; align-items:center; gap:6px; }
.bmx-close { cursor:pointer; opacity:.9; font-weight:700; }
.bmx-close:hover { opacity:1; }

.bmx-status-dot {
  width:8px; height:8px; border-radius:50%;
}
.bmx-online { background:#22c55e; }  /* green */
.bmx-offline { background:#ef4444; } /* red  */

/* Body */
.bmx-body { padding:12px; max-height:360px; overflow:auto; font-size:14px; line-height:1.45; }
.bmx-msg { margin:8px 0; display:flex; }
.bmx-msg .txt { padding:10px 12px; border-radius:14px; max-width:82%; }
.bmx-msg.user { justify-content:flex-end; }
.bmx-msg.user .txt { background:#e8f2ff; color:#1e3a8a; border:1px solid #dbeafe; }
.bmx-msg.agent .txt { background:#f3f4f6; color:#111827; }

/* Chips */
.bmx-options { display:flex; flex-wrap:wrap; gap:10px; margin-top:8px; }
.bmx-pill {
  background:#fff; color:#2563eb; border:2px solid #2563eb; border-radius:999px; padding:8px 14px;
  cursor:pointer; font-weight:600; font-size:13px; transition: .15s ease;
}
.bmx-pill:hover { background:#2563eb; color:#fff; }

/* Input + send button */
.bmx-input { border-top:1px solid #eef2f7; padding:10px; display:flex; gap:8px; align-items: center; }
.bmx-input input {
  flex:1; border:1px solid #e5e7eb; border-radius: 999px; padding:10px 14px; outline:none;
}
.bmx-input button {
  width:44px; height:44px; border-radius:50%; border:0; background:linear-gradient(135deg,var(--bmx-blue1),var(--bmx-blue2)); color:#fff; font-weight:700; cursor:pointer;
}

/* Branding */
.bmx-brand {
  margin: 0 10px 10px;
  font-size: 12px;
  color: #64748b;
  text-align: right;
}
.bmx-brand a { color:#64748b; text-decoration: none; font-weight:600; }
.bmx-brand a:hover { text-decoration: underline; }

/* WhatsApp CTA */
.bmx-wa { margin-top:10px; display:inline-flex; align-items:center; gap:8px; background:#25D366; color:#fff; border:0; border-radius:999px; padding:10px 14px; font-weight:700; cursor:pointer; }