/* BPM Contact Bubble v1.7 */

/*
  Notes:
  - Placement/sizes are controlled via CSS variables injected on #bpmcb-root.
  - #bpmcb-root gets class bpmcb-right or bpmcb-left.
*/

#bpmcb-root { position: relative; }

/* ===== Launcher (floating button) ===== */
#bpmcb-launcher {
  position: fixed;
  right: var(--bpmcb-offset-x, 16px);
  bottom: var(--bpmcb-offset-y, 16px);
  width: var(--bpmcb-launcher-size, 56px);
  height: var(--bpmcb-launcher-size, 56px);
  border-radius: 999px;
  border: none;
  cursor: pointer;
  background: var(--bpmcb-color, #03A84E);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  z-index: var(--bpmcb-z, 999999);
}

.bpmcb-left #bpmcb-launcher {
  left: var(--bpmcb-offset-x, 16px);
  right: auto;
}

#bpmcb-launcher:hover { transform: translateY(-1px); box-shadow: 0 12px 28px rgba(0,0,0,.22); }
#bpmcb-launcher .bpmcb-icon, #bpmcb-launcher i { font-size: 22px; line-height: 1; }

/* ===== Overlay ===== */
#bpmcb-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.18);
  backdrop-filter: blur(.5px);
  z-index: var(--bpmcb-z-overlay, 99998);
}

/* ===== Label / timed message bubble ===== */
#bpmcb-label {
  position: fixed;
  right: var(--bpmcb-offset-x, 16px);
  bottom: calc(var(--bpmcb-offset-y, 16px) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px));
  max-width: min(320px, calc(100vw - 24px));
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  padding: 10px 12px;
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  z-index: var(--bpmcb-z, 999999);
}

.bpmcb-left #bpmcb-label {
  left: var(--bpmcb-offset-x, 16px);
  right: auto;
}

#bpmcb-label[hidden] { display: none !important; }

#bpmcb-label-text {
  padding-right: 22px;
  font-size: 14px;
  line-height: 1.35;
}

.bpmcb-label-close {
  position: absolute;
  top: 4px;
  right: 6px;
  border: none;
  background: transparent;
  font-size: 18px;
  cursor: pointer;
}

/* label position variants */
#bpmcb-label.bpmcb-label-pos-above {
  bottom: calc(var(--bpmcb-offset-y, 16px) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px));
}

/* Left of the launcher */
.bpmcb-right #bpmcb-label.bpmcb-label-pos-left {
  bottom: calc(var(--bpmcb-offset-y, 16px) + 6px);
  right: calc(var(--bpmcb-offset-x, 16px) + var(--bpmcb-launcher-size, 56px) + 12px);
}

.bpmcb-left #bpmcb-label.bpmcb-label-pos-left {
  bottom: calc(var(--bpmcb-offset-y, 16px) + 6px);
  left: calc(var(--bpmcb-offset-x, 16px) - 12px);
  transform: translateX(-100%);
}

/* Right of the launcher */
.bpmcb-left #bpmcb-label.bpmcb-label-pos-right {
  bottom: calc(var(--bpmcb-offset-y, 16px) + 6px);
  left: calc(var(--bpmcb-offset-x, 16px) + var(--bpmcb-launcher-size, 56px) + 12px);
}

.bpmcb-right #bpmcb-label.bpmcb-label-pos-right {
  bottom: calc(var(--bpmcb-offset-y, 16px) + 6px);
  right: calc(var(--bpmcb-offset-x, 16px) - 12px);
  transform: translateX(100%);
}

/* ===== Greeting stage ===== */
#bpmcb-greeting {
  position: fixed;
  right: var(--bpmcb-offset-x, 16px);
  bottom: calc(var(--bpmcb-offset-y, 16px) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px));
  width: var(--bpmcb-greeting-width, 320px);
  max-width: calc(100vw - 24px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 10px 24px rgba(0,0,0,.18);
  overflow: hidden;
  z-index: var(--bpmcb-z, 999999);
  font-family: system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
}

.bpmcb-left #bpmcb-greeting {
  left: var(--bpmcb-offset-x, 16px);
  right: auto;
}

#bpmcb-greeting[hidden] { display: none !important; }
.bpmcb-greet-header { display:flex; align-items:center; justify-content: space-between; padding: 10px 12px; background: #f7f8f9; border-bottom: 1px solid #edf0f3; }
.bpmcb-greet-header button { border:none; background:transparent; font-size:20px; cursor:pointer; }
.bpmcb-greet-body { padding: 12px; font-size: 14px; line-height: 1.4; }
.bpmcb-greet-actions { display:flex; gap: 8px; padding: 0 12px 12px 12px; }
.bpmcb-btn { flex:1; padding: 10px 12px; border-radius: 8px; border: none; cursor:pointer; background: var(--bpmcb-color, #03A84E); color:#fff; font-weight: 600; }
.bpmcb-btn-ghost { background: #f0f2f4; color: #111; }

/* ===== Panel with form ===== */
#bpmcb-panel {
  position: fixed;
  right: var(--bpmcb-offset-x, 16px);
  bottom: calc(var(--bpmcb-offset-y, 16px) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px));
  width: var(--bpmcb-panel-width, 360px);
  max-width: calc(100vw - 24px);
  border-radius: 12px;
  background: #fff;
  box-shadow: 0 14px 40px rgba(0,0,0,.22);
  z-index: var(--bpmcb-z, 999999);
  display:block;
}

.bpmcb-left #bpmcb-panel {
  left: var(--bpmcb-offset-x, 16px);
  right: auto;
}

#bpmcb-panel[hidden] { display: none !important; }
.bpmcb-header { display:flex; align-items:center; justify-content: space-between; padding: 12px; background:#f7f8f9; border-bottom: 1px solid #edf0f3; }
#bpmcb-title { font-weight: 700; font-size: 15px; }
.bpmcb-close { border:none; background:transparent; font-size:22px; cursor:pointer; }
#bpmcb-form { padding: 12px; max-height: 70vh; overflow: auto; }
.bpmcb-label { display:block; font-size:12px; color:#5b6875; margin: 8px 0 4px; }
#bpmcb-form input[type="text"],#bpmcb-form input[type="email"],#bpmcb-form input[type="tel"],#bpmcb-form textarea {
  width: 100%; border: 1px solid #d8dee6; border-radius: 8px; padding: 10px 12px; font-size: 14px;
}
#bpmcb-form textarea { resize: vertical; }
.bpmcb-hp { position: absolute; left: -5000px; top: -5000px; height: 0; width: 0; }
.bpmcb-submit { width: 100%; margin-top: 12px; padding: 12px; border: none; background: var(--bpmcb-color,#03A84E); color:#fff; border-radius: 10px; font-weight: 700; cursor: pointer; }
.bpmcb-status { margin-top: 8px; font-size: 13px; color:#0f5132; }
.bpmcb-foot { font-size: 12px; color: #5b6875; padding: 8px 12px 12px; }
.bpmcb-success { color:#0f5132; background:#d1e7dd; border:1px solid #badbcc; padding:8px 10px; border-radius:8px; }

/* ===== Nudge pulse on launcher ===== */
@keyframes bpmcb-pulse {
  0% { box-shadow: 0 0 0 0 rgba(var(--bpmcb-color-rgb, 3,168,78), 0.35); }
  70% { box-shadow: 0 0 0 14px rgba(var(--bpmcb-color-rgb, 3,168,78), 0); }
  100% { box-shadow: 0 0 0 0 rgba(var(--bpmcb-color-rgb, 3,168,78), 0); }
}
#bpmcb-launcher.bpmcb-pulse { animation: bpmcb-pulse 1.8s ease-out 3; }

/* ===== Safe-area insets ===== */
@supports (bottom: env(safe-area-inset-bottom)){
  #bpmcb-launcher { bottom: calc(var(--bpmcb-offset-y, 16px) + env(safe-area-inset-bottom)); }
  #bpmcb-panel { bottom: calc(var(--bpmcb-offset-y, 16px) + env(safe-area-inset-bottom) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px)); }
  #bpmcb-greeting { bottom: calc(var(--bpmcb-offset-y, 16px) + env(safe-area-inset-bottom) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px)); }
  #bpmcb-label { bottom: calc(var(--bpmcb-offset-y, 16px) + env(safe-area-inset-bottom) + var(--bpmcb-launcher-size, 56px) + var(--bpmcb-panel-gap, 14px)); }

  #bpmcb-launcher { right: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-right)); }
  .bpmcb-left #bpmcb-launcher { left: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-left)); right: auto; }

  #bpmcb-panel { right: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-right)); }
  .bpmcb-left #bpmcb-panel { left: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-left)); right: auto; }

  #bpmcb-greeting { right: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-right)); }
  .bpmcb-left #bpmcb-greeting { left: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-left)); right: auto; }

  #bpmcb-label { right: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-right)); }
  .bpmcb-left #bpmcb-label { left: calc(var(--bpmcb-offset-x, 16px) + env(safe-area-inset-left)); right: auto; }
}

@media (max-width: 480px){
  #bpmcb-panel { right: 8px; left: 8px; width: auto; }
  #bpmcb-greeting { right: 8px; left: 8px; width: auto; }
  #bpmcb-label { right: 8px; left: 8px; width: auto; max-width: none; transform: none !important; }
  #bpmcb-launcher { right: 8px; bottom: 8px; }
  .bpmcb-left #bpmcb-launcher { left: 8px; right: auto; }
}