#jbc-chatbot-root {
  --jbc-cb-primary: #BA8A39;
  --jbc-cb-dark: #4E472B;
  --jbc-cb-paper: #F5F0E6;
  --jbc-cb-ink: #1E1C10;
  --jbc-cb-dust: #7A7268;
  position: fixed;
  bottom: 64px;
  z-index: 9999;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
}
/* 24px (theme's own back-to-top button) + 44px (its width) + 16px gap
   + 60px (WhatsApp button) + 16px gap = 160px, so the chat bubble sits
   past both of the other two floating buttons. */
#jbc-chatbot-root.jbc-cb--right { right: 160px; }
#jbc-chatbot-root.jbc-cb--left  { left: 24px; }

/* ── WhatsApp button (independent of the chat widget's own open/close state) ── */
#jbc-cb-whatsapp {
  --jbc-cb-primary: #BA8A39;
  --jbc-cb-dark: #4E472B;
  position: fixed;
  bottom: 64px;
  z-index: 9998;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--jbc-cb-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(30,28,16,.35);
  transition: transform .2s ease, background .2s ease;
}
#jbc-cb-whatsapp:hover { transform: translateY(-2px); background: var(--jbc-cb-primary); }
#jbc-cb-whatsapp svg { width: 30px; height: 30px; }
/* Sits between the theme's back-to-top button (right:24px) and the chat bubble. */
#jbc-cb-whatsapp.jbc-cb--right { right: 84px; }
#jbc-cb-whatsapp.jbc-cb--left  { left: 84px; }

#jbc-cb-bubble {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  border: none;
  background: var(--jbc-cb-dark);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 8px 28px rgba(30,28,16,.35);
  transition: transform .2s ease, background .2s ease;
  position: relative;
}
#jbc-cb-bubble:hover { transform: translateY(-2px); background: var(--jbc-cb-primary); }
#jbc-cb-bubble svg { width: 26px; height: 26px; position: absolute; transition: opacity .2s, transform .2s; }
#jbc-cb-bubble .jbc-cb-icon-close { opacity: 0; transform: scale(.6); }
#jbc-chatbot-root.jbc-cb-open #jbc-cb-bubble .jbc-cb-icon-chat { opacity: 0; transform: scale(.6); }
#jbc-chatbot-root.jbc-cb-open #jbc-cb-bubble .jbc-cb-icon-close { opacity: 1; transform: scale(1); }

#jbc-cb-panel {
  position: absolute;
  bottom: 76px;
  width: 360px;
  max-width: calc(100vw - 48px);
  height: 480px;
  max-height: calc(100vh - 140px);
  background: var(--jbc-cb-paper);
  border-radius: 4px;
  box-shadow: 0 20px 60px rgba(30,28,16,.3);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translateY(16px) scale(.98);
  transition: opacity .25s ease, transform .25s ease;
}
#jbc-chatbot-root.jbc-cb--right #jbc-cb-panel { right: 0; }
#jbc-chatbot-root.jbc-cb--left  #jbc-cb-panel { left: 0; }
#jbc-chatbot-root.jbc-cb-open #jbc-cb-panel {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0) scale(1);
}

.jbc-cb-header {
  background: var(--jbc-cb-dark);
  padding: 18px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}
.jbc-cb-avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.jbc-cb-avatar--fallback {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--jbc-cb-primary);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 18px;
}
.jbc-cb-header-text { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.jbc-cb-header-text strong { color: #fff; font-size: 14px; font-weight: 500; }
.jbc-cb-header-text span { color: rgba(255,255,255,.55); font-size: 11px; }

.jbc-cb-messages {
  flex: 1;
  overflow-y: auto;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jbc-cb-msg {
  max-width: 82%;
  padding: 10px 14px;
  border-radius: 14px;
  font-size: 13px;
  line-height: 1.55;
  font-weight: 300;
  word-wrap: break-word;
}
.jbc-cb-msg p { margin: 0 0 8px; font-size: inherit; font-family: inherit; }
.jbc-cb-msg p:last-child { margin-bottom: 0; }
.jbc-cb-msg--bot {
  align-self: flex-start;
  background: #fff;
  color: var(--jbc-cb-ink);
  border-bottom-left-radius: 3px;
}
.jbc-cb-msg--user {
  align-self: flex-end;
  background: var(--jbc-cb-primary);
  color: #fff;
  border-bottom-right-radius: 3px;
}
.jbc-cb-msg--typing { display: flex; gap: 4px; padding: 14px; align-items: center; }
.jbc-cb-typing-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: var(--jbc-cb-dust);
  animation: jbc-cb-bounce 1.2s infinite ease-in-out;
}
.jbc-cb-typing-dot:nth-child(2) { animation-delay: .15s; }
.jbc-cb-typing-dot:nth-child(3) { animation-delay: .3s; }
@keyframes jbc-cb-bounce {
  0%, 60%, 100% { transform: translateY(0); opacity: .4; }
  30% { transform: translateY(-4px); opacity: 1; }
}

#jbc-cb-form {
  flex-shrink: 0;
  display: flex;
  gap: 8px;
  padding: 14px;
  background: #fff;
  border-top: 1px solid rgba(78,71,43,.1);
}
#jbc-cb-input {
  flex: 1;
  border: 1px solid #C8BFB0;
  border-radius: 20px;
  padding: 10px 16px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: var(--jbc-cb-paper);
  color: var(--jbc-cb-ink);
}
#jbc-cb-input:focus { border-color: var(--jbc-cb-primary); }
#jbc-cb-form button {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--jbc-cb-primary);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s;
}
#jbc-cb-form button:hover { background: var(--jbc-cb-dark); }
#jbc-cb-form button svg { width: 16px; height: 16px; }

@media (max-width: 480px) {
  #jbc-cb-panel { width: calc(100vw - 32px); height: calc(100vh - 120px); bottom: 74px; }
  #jbc-chatbot-root { bottom: 40px; }
  /* 16px (back-to-top) + 44px + 16px gap + 60px (WhatsApp) + 16px gap = 152px */
  #jbc-chatbot-root.jbc-cb--right { right: 152px; }
  #jbc-chatbot-root.jbc-cb--left { left: 16px; }
  #jbc-cb-whatsapp { bottom: 40px; }
  #jbc-cb-whatsapp.jbc-cb--right { right: 76px; }
  #jbc-cb-whatsapp.jbc-cb--left { left: 76px; }
}

/* ── End Chat button (header) ── */
#jbc-cb-end-btn {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,.12);
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  transition: background .2s, color .2s;
}
#jbc-cb-end-btn:hover { background: rgba(255,255,255,.22); color: #fff; }
#jbc-cb-end-btn svg { width: 14px; height: 14px; }

/* ── Pre-chat lead capture gate ── */
#jbc-cb-prechat {
  flex: 1;
  padding: 22px 20px;
  overflow-y: auto;
  display: block;
}
.jbc-cb-prechat-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 20px;
  color: var(--jbc-cb-ink);
  margin-bottom: 4px;
}
.jbc-cb-prechat-body {
  font-size: 13px;
  color: var(--jbc-cb-dust);
  margin-bottom: 18px;
}
#jbc-cb-prechat-form { display: flex; flex-direction: column; gap: 12px; }
#jbc-cb-prechat-form input {
  border: 1px solid #C8BFB0;
  border-radius: 6px;
  padding: 11px 14px;
  font-size: 13px;
  font-family: inherit;
  outline: none;
  background: #fff;
  color: var(--jbc-cb-ink);
}
#jbc-cb-prechat-form input:focus { border-color: var(--jbc-cb-primary); }
.jbc-cb-prechat-error {
  color: #B3261E;
  font-size: 12px;
  margin: 0;
  min-height: 1em;
}
#jbc-cb-prechat-submit {
  background: var(--jbc-cb-primary);
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 12px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
}
#jbc-cb-prechat-submit:hover { background: var(--jbc-cb-dark); }
#jbc-cb-prechat-submit:disabled { opacity: .6; cursor: default; }

/* ── System notes (e.g. "conversation ended") ── */
.jbc-cb-system-note {
  text-align: center;
  font-size: 11px;
  color: var(--jbc-cb-dust);
  padding: 8px 0;
  align-self: center;
}

/* ── Custom confirm modal (replaces the native browser confirm() popup) ── */
.jbc-cb-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(30,28,16,.45);
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: inherit;
  animation: jbc-cb-fade-in .15s ease;
}
@keyframes jbc-cb-fade-in { from { opacity: 0; } to { opacity: 1; } }
.jbc-cb-modal {
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  width: 84%;
  max-width: 280px;
  box-shadow: 0 12px 32px rgba(30,28,16,.25);
}
.jbc-cb-modal p {
  font-size: 13px;
  color: var(--jbc-cb-ink);
  margin: 0 0 16px;
  line-height: 1.5;
}
.jbc-cb-modal-btns {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.jbc-cb-modal-btns button {
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.jbc-cb-modal-cancel {
  background: transparent;
  border: 1px solid #C8BFB0 !important;
  color: var(--jbc-cb-dust);
}
.jbc-cb-modal-confirm {
  background: var(--jbc-cb-primary);
  color: #fff;
}
.jbc-cb-modal-confirm:hover { background: var(--jbc-cb-dark); }

/* ── Email-transcript offer (shown after ending a chat) ── */
.jbc-cb-transcript-offer {
  align-self: center;
  background: #fff;
  border: 1px solid rgba(78,71,43,.12);
  border-radius: 10px;
  padding: 14px 16px;
  max-width: 90%;
  text-align: center;
}
.jbc-cb-transcript-offer p {
  font-size: 12px;
  color: var(--jbc-cb-ink);
  margin: 0 0 10px;
}
.jbc-cb-transcript-btns { display: flex; gap: 8px; justify-content: center; }
.jbc-cb-transcript-btns button {
  border: none;
  border-radius: 16px;
  padding: 8px 16px;
  font-size: 12px;
  cursor: pointer;
  font-family: inherit;
}
.jbc-cb-transcript-btns button:not(.jbc-cb-transcript-no) {
  background: var(--jbc-cb-primary);
  color: #fff;
}
.jbc-cb-transcript-btns .jbc-cb-transcript-no {
  background: transparent;
  border: 1px solid #C8BFB0;
  color: var(--jbc-cb-dust);
}

/* ── Hover tooltips on the floating icons (shown above each icon) ── */
[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  white-space: nowrap;
  background: var(--jbc-cb-dark);
  color: #fff;
  padding: 6px 12px;
  border-radius: 6px;
  font-size: 12px;
  font-family: 'Instrument Sans', system-ui, -apple-system, sans-serif;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  box-shadow: 0 4px 12px rgba(30,28,16,.25);
  z-index: 1;
}
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}
/* Forces the tooltip hidden right after a click, even while the cursor is
   still resting on the button (JS toggles this class off again once the
   cursor actually leaves) — otherwise a pure :hover tooltip has no way to
   know a click happened and just stays visible. */
.jbc-cb-tooltip-suppressed::after {
  opacity: 0 !important;
  visibility: hidden !important;
}

@media (max-width: 480px) {
  [data-tooltip]::after { display: none; } /* no hover on touch devices — avoids a tooltip getting stuck open after a tap */
}