/* HexBot chat bubble. Remove the plugin to roll back. */
#hexbot { --hb-ink: #0b1020; --hb-ink2: #5b6478; --hb-line: #e8ebf3; --hb-brand: #6d4aff; --hb-cy: #22d3ee; position: fixed; right: 20px; bottom: 92px; z-index: 99990; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 14px; line-height: 1.5; color: var(--hb-ink); }
body.single-product #hexbot { bottom: 92px; }
#hexbot *, #hexbot *::before, #hexbot *::after { box-sizing: border-box; }

.hb-fab { display: flex; align-items: center; gap: 10px; height: 56px; padding: 0 20px 0 14px; border: 0; border-radius: 999px; cursor: pointer; color: #fff; font: 600 14px/1 inherit; font-family: inherit; background: linear-gradient(135deg, #0b1020, #3b2a9e 60%, #6d4aff); box-shadow: 0 14px 34px -10px rgba(85,53,224,.7), 0 0 0 1px rgba(255,255,255,.12) inset; transition: transform .2s ease, box-shadow .2s ease; position: relative; }
.hb-fab:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -10px rgba(85,53,224,.85); }
.hb-fab:focus-visible, .hb-send:focus-visible, .hb-x:focus-visible, .hb-chip:focus-visible, .hb-in:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.hb-fab svg { width: 30px; height: 30px; flex: none; }
.hb-fab .hb-dot { position: absolute; top: 8px; left: 38px; width: 11px; height: 11px; border-radius: 50%; background: #22c55e; border: 2px solid #1a1450; animation: hb-pulse 2.4s ease-out infinite; }
@keyframes hb-pulse { 0% { box-shadow: 0 0 0 0 rgba(34,197,94,.6); } 80%, 100% { box-shadow: 0 0 0 9px rgba(34,197,94,0); } }
#hexbot.is-open .hb-fab { display: none; }

.hb-panel { display: none; flex-direction: column; width: 392px; max-width: calc(100vw - 24px); height: min(620px, calc(100vh - 120px)); background: #fff; border-radius: 24px; overflow: hidden; box-shadow: 0 30px 80px -20px rgba(11,16,32,.55), 0 0 0 1px rgba(11,16,32,.06); transform-origin: bottom right; }
#hexbot.is-open .hb-panel { display: flex; animation: hb-pop .22s cubic-bezier(.2,.8,.2,1); }
@keyframes hb-pop { from { opacity: 0; transform: translateY(10px) scale(.96); } to { opacity: 1; transform: none; } }

.hb-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; color: #fff; background: radial-gradient(120% 160% at 100% 0%, rgba(109,74,255,.9), transparent 60%), radial-gradient(90% 120% at 0% 100%, rgba(34,211,238,.35), transparent 60%), #0b1020; }
.hb-av { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22); flex: none; }
.hb-av svg { width: 26px; height: 26px; }
.hb-ttl { flex: 1; min-width: 0; }
.hb-ttl b { display: block; font-size: 16px; font-weight: 700; letter-spacing: -.01em; }
.hb-ttl span { display: block; font-size: 12px; color: #c9c3ff; }
.hb-x { width: 36px; height: 36px; border: 0; border-radius: 50%; background: rgba(255,255,255,.12); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: grid; place-items: center; }
.hb-x:hover { background: rgba(255,255,255,.24); }

.hb-body { flex: 1; overflow-y: auto; padding: 16px; background: #f6f7fb; scroll-behavior: smooth; overscroll-behavior: contain; }
.hb-m { max-width: 92%; margin: 0 0 12px; padding: 11px 14px; border-radius: 18px; word-wrap: break-word; overflow-wrap: anywhere; }
.hb-m.bot { background: #fff; border: 1px solid var(--hb-line); border-bottom-left-radius: 6px; box-shadow: 0 1px 2px rgba(11,16,32,.04); }
.hb-m.me { margin-left: auto; background: linear-gradient(135deg, #5535e0, #6d4aff); color: #fff; border-bottom-right-radius: 6px; white-space: pre-wrap; }
.hb-m p { margin: 0 0 8px; } .hb-m p:last-child { margin-bottom: 0; }
.hb-m ul, .hb-m ol { margin: 4px 0 8px; padding-left: 20px; } .hb-m li { margin: 2px 0; }
.hb-m h4 { margin: 10px 0 4px; font-size: 14px; font-weight: 700; }
.hb-m a { color: var(--hb-brand); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.hb-m code { font-family: ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; font-size: 12.5px; background: #eef0f8; padding: 1px 6px; border-radius: 6px; }
.hb-code { margin: 8px 0; border-radius: 14px; overflow: hidden; background: #0b1020; }
.hb-code header { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px 6px 12px; background: #161c33; color: #aab3d1; font-size: 11.5px; text-transform: lowercase; }
.hb-copy { border: 1px solid rgba(255,255,255,.2); background: transparent; color: #e5e9ff; border-radius: 999px; padding: 3px 11px; font: 600 11.5px/1.4 inherit; font-family: inherit; cursor: pointer; }
.hb-copy:hover { background: rgba(255,255,255,.12); }
.hb-code pre { margin: 0 !important; padding: 12px !important; overflow-x: auto; max-height: 340px; background: #0b1020 !important; color: #e5e9ff !important; border: 0 !important; border-radius: 0 !important; box-shadow: none !important; }
.hb-code pre code { display: block; background: transparent !important; color: #e5e9ff !important; padding: 0 !important; font-size: 12px !important; line-height: 1.55; white-space: pre !important; border: 0 !important; text-shadow: none !important; }

.hb-typing { display: inline-flex; gap: 4px; padding: 4px 2px; }
.hb-typing i { width: 7px; height: 7px; border-radius: 50%; background: #a5aec6; animation: hb-bounce 1.2s infinite; }
.hb-typing i:nth-child(2) { animation-delay: .15s; } .hb-typing i:nth-child(3) { animation-delay: .3s; }
@keyframes hb-bounce { 0%, 60%, 100% { transform: none; opacity: .5; } 30% { transform: translateY(-5px); opacity: 1; } }

.hb-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 8px; }
.hb-chip { border: 1px solid var(--hb-line); background: #fff; color: var(--hb-ink); border-radius: 999px; padding: 8px 13px; font: 500 13px/1.3 inherit; font-family: inherit; cursor: pointer; text-align: left; transition: all .15s; }
.hb-chip:hover { border-color: var(--hb-brand); color: var(--hb-brand); transform: translateY(-1px); }
.hb-pck { display: block; margin: 0 0 10px; padding: 10px 14px; border-radius: 14px; background: linear-gradient(135deg, #efeaff, #e0f7ff); color: var(--hb-ink); font-size: 12.5px; text-decoration: none; border: 1px solid #ddd6ff; }
.hb-pck b { color: var(--hb-brand); } .hb-pck:hover { border-color: var(--hb-brand); }

.hb-form { display: flex; gap: 8px; align-items: flex-end; padding: 12px; border-top: 1px solid var(--hb-line); background: #fff; }
.hb-in { flex: 1; resize: none; max-height: 110px; min-height: 44px; border: 1px solid var(--hb-line); border-radius: 16px; padding: 11px 14px; font: 400 14px/1.4 inherit; font-family: inherit; color: var(--hb-ink); background: #f6f7fb; }
.hb-in:focus { outline: none; border-color: var(--hb-brand); background: #fff; box-shadow: 0 0 0 3px rgba(109,74,255,.15); }
.hb-send { width: 44px; height: 44px; flex: none; border: 0; border-radius: 14px; cursor: pointer; color: #fff; background: linear-gradient(135deg, #6d4aff, #22d3ee); display: grid; place-items: center; transition: transform .15s, opacity .15s; }
.hb-send:hover { transform: translateY(-1px); } .hb-send:disabled { opacity: .45; cursor: default; transform: none; }
.hb-send svg { width: 20px; height: 20px; }
.hb-foot { padding: 0 14px 10px; background: #fff; font-size: 11px; color: var(--hb-ink2); text-align: center; }

@media (max-width: 782px) {
	#hexbot { right: 12px; bottom: 84px; }
	body.single-product #hexbot { bottom: 150px; }
	.hb-fab { height: 52px; padding: 0 16px 0 12px; }
	#hexbot.is-open { right: 0; left: 0; bottom: 0; }
	.hb-panel { width: 100%; max-width: 100%; height: min(88vh, 100dvh - 16px); border-radius: 22px 22px 0 0; }
}
@media (prefers-reduced-motion: reduce) { #hexbot *, #hexbot *::before, #hexbot *::after { animation: none !important; transition: none !important; } .hb-body { scroll-behavior: auto; } }


/* ---------- Wiring diagram (HTML/CSS cards + SVG wires; also used in the expanded view) ---------- */
.hb-wd { margin: 8px 0 10px; border: 1px solid #e0e4f2; border-radius: 16px; background: #fff; overflow: hidden; font-family: "Poppins", system-ui, -apple-system, "Segoe UI", sans-serif; color: #0b1020; }
.hb-wd-bar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 10px 8px 14px; background: linear-gradient(135deg, #0b1020, #2a1b78); color: #fff; }
.hb-wd-bar b { font-size: 13px; font-weight: 600; }
.hb-wd-exp { border: 1px solid rgba(255,255,255,.3); background: rgba(255,255,255,.1); color: #fff; border-radius: 999px; padding: 4px 12px; font: 600 11.5px/1.4 inherit; font-family: inherit; cursor: pointer; }
.hb-wd-exp:hover { background: rgba(255,255,255,.24); }
.hb-wd-stage { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(36px, .55fr) minmax(0, 1fr); align-items: center; padding: 18px 34px 18px 12px; background-color: #f6f8ff; background-image: radial-gradient(#d6dcf0 1px, transparent 1.2px); background-size: 16px 16px; }
.hb-wd-svg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; overflow: visible; }
.hb-wd-main { grid-column: 1; position: relative; z-index: 1; }
.hb-wd-side { grid-column: 3; display: flex; flex-direction: column; gap: 14px; position: relative; z-index: 1; }
.hb-pc { position: relative; background: #fff; border: 1.5px solid #cfd6ee; border-radius: 12px; box-shadow: 0 6px 16px -8px rgba(11,16,32,.25); }
.hb-pc-h { padding: 6px 10px; border-radius: 10px 10px 0 0; font-size: 11.5px; font-weight: 700; line-height: 1.3; color: #fff; background: linear-gradient(135deg, #5535e0, #6d4aff); text-align: center; }
.hb-wd-main .hb-pc-h { background: linear-gradient(135deg, #0b1020, #3b2a9e); }
.hb-pr { position: relative; display: flex; align-items: center; justify-content: center; min-height: 24px; padding: 3px 16px; border-top: 1px solid #eef0f8; font: 600 11px/1.2 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace; white-space: nowrap; }
.hb-pr:first-of-type { border-top: 0; }
.hb-pd { position: absolute; top: 50%; width: 11px; height: 11px; margin-top: -5.5px; border-radius: 50%; background: #fff; border: 2.5px solid #94a3b8; display: none; z-index: 2; }
.hb-pd.on { display: block; }
.hb-pd.l { left: -6.5px; } .hb-pd.r { right: -6.5px; }
.hb-wd-leg { display: flex; flex-wrap: wrap; gap: 6px 14px; padding: 8px 14px 10px; background: #fff; border-top: 1px solid #eef0f8; font-size: 11px; color: #5b6478; }
.hb-wd-leg span { display: inline-flex; align-items: center; gap: 6px; }
.hb-wd-leg i { width: 18px; height: 4px; border-radius: 2px; display: inline-block; }
.hb-wd-fb { padding: 10px 14px; font-size: 12.5px; color: #5b6478; }

/* expanded view */
.hb-lb { position: fixed; inset: 0; z-index: 99999; background: rgba(11,16,32,.72); backdrop-filter: blur(4px); display: grid; place-items: center; padding: 16px; overflow: auto; }
.hb-lb .hb-wd { width: min(960px, 100%); max-height: 94vh; overflow: auto; box-shadow: 0 40px 100px -20px rgba(0,0,0,.6); }
.hb-lb .hb-wd-stage { padding: 30px 70px 30px 28px; grid-template-columns: minmax(0, 1fr) minmax(120px, 1.1fr) minmax(0, 1fr); }
.hb-lb .hb-pc-h { font-size: 14px; padding: 9px 12px; }
.hb-lb .hb-pr { font-size: 13px; min-height: 30px; padding: 4px 20px; }
.hb-lb .hb-pd { width: 13px; height: 13px; margin-top: -6.5px; }
.hb-lb .hb-pd.l { left: -7.5px; } .hb-lb .hb-pd.r { right: -7.5px; }
.hb-lb .hb-wd-bar b { font-size: 15px; } .hb-lb .hb-wd-leg { font-size: 12.5px; }

/* phones: wider wire gutter in the chat; expanded view is a roomy, horizontally scrollable canvas */
@media (max-width: 520px) {
	.hb-wd-stage { grid-template-columns: minmax(0, 1fr) minmax(54px, .75fr) minmax(0, 1fr); }
	.hb-lb { padding: 10px; place-items: start center; }
	.hb-lb .hb-wd { max-height: calc(100dvh - 20px); }
	.hb-lb .hb-wd-stage { min-width: 540px; padding: 22px 70px 22px 16px; grid-template-columns: minmax(0, 1fr) minmax(130px, 1fr) minmax(0, 1fr); }
	.hb-lb .hb-wd-bar, .hb-lb .hb-wd-leg { position: sticky; left: 0; }
}

.hb-lb > .hb-lb-x { position: fixed; top: 14px; right: 18px; z-index: 3; background: #0b1020; border: 1px solid rgba(255,255,255,.55); padding: 8px 16px; font-size: 13px; box-shadow: 0 8px 24px rgba(0,0,0,.4); }
.hb-lb > .hb-lb-x:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }

/* WhatsApp */
.hb-wa { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: #25d366; color: #fff; flex: none; box-shadow: 0 6px 16px -6px rgba(37,211,102,.8); transition: transform .15s; }
.hb-wa:hover { transform: scale(1.08); color: #fff; } .hb-wa svg { width: 20px; height: 20px; }
.hb-wa:focus-visible { outline: 3px solid #f59e0b; outline-offset: 2px; }
.hb-pwa { background: linear-gradient(135deg, #e8fff1, #f0fff7); border-color: #bdf0d1; } .hb-pwa b:last-child { color: #128c4a; } .hb-pwa:hover { border-color: #25d366; }