.cgl-root{position:fixed;z-index:99998;bottom:var(--cgl-bottom,24px);right:var(--cgl-side,24px);display:flex;flex-direction:column;align-items:flex-end;gap:12px;font-family:inherit}
.cgl-root.cgl-left{right:auto;left:var(--cgl-side,24px);align-items:flex-start}
.cgl-launch{display:inline-flex;align-items:center;gap:10px;border:0;cursor:pointer;padding:0 20px 0 16px;height:56px;border-radius:999px;background:var(--cgl-accent,#175cb5);color:#fff;font-size:15px;font-weight:600;letter-spacing:.01em;box-shadow:0 18px 40px rgba(15,32,63,.22);transition:transform .18s ease,box-shadow .18s ease,background .18s ease}
.cgl-launch:hover{transform:translateY(-2px);box-shadow:0 22px 48px rgba(15,32,63,.28)}
.cgl-launch:focus-visible{outline:3px solid #fff;outline-offset:3px}
.cgl-launch-icon{display:inline-flex}
.cgl-launch-text{white-space:nowrap}
.cgl-root[data-cgl-open="true"] .cgl-launch-text{display:none}
.cgl-root[data-cgl-open="true"] .cgl-launch{padding:0;width:56px;justify-content:center}
@media(max-width:600px){.cgl-launch-text{display:none}.cgl-launch{padding:0;width:56px;justify-content:center}}
.cgl-panel{width:min(390px,calc(100vw - 32px));max-height:min(640px,calc(100vh - 120px));display:flex;flex-direction:column;background:#fff;color:#10203a;border-radius:20px;overflow:hidden;box-shadow:0 30px 70px rgba(12,26,53,.28);border:1px solid rgba(16,32,58,.08)}
.cgl-panel[hidden]{display:none}
.cgl-panel-head{display:flex;gap:12px;align-items:flex-start;justify-content:space-between;padding:18px 18px 14px;background:linear-gradient(135deg,var(--cgl-accent,#175cb5),rgba(16,32,58,.92));color:#fff}
.cgl-panel-head h2{margin:2px 0 4px;font-size:18px;line-height:1.25;color:#fff}
.cgl-kicker{display:flex;align-items:center;gap:6px;margin:0;font-size:11px;text-transform:uppercase;letter-spacing:.12em;opacity:.85}
.cgl-kicker svg{width:14px;height:14px}
.cgl-sub{margin:0;font-size:13px;line-height:1.45;opacity:.88}
.cgl-close{background:rgba(255,255,255,.16);border:0;color:#fff;width:32px;height:32px;border-radius:50%;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cgl-close svg{width:16px;height:16px}
.cgl-thread{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:12px;background:#f6f8fb;min-height:180px}
.cgl-msg{max-width:88%;padding:11px 14px;border-radius:16px;font-size:14px;line-height:1.55;box-shadow:0 6px 18px rgba(16,32,58,.06)}
.cgl-msg p{margin:0 0 8px}
.cgl-msg p:last-child{margin:0}
.cgl-msg ul{margin:6px 0 0;padding-left:18px}
.cgl-msg li{margin:0 0 4px}
.cgl-msg-bot{align-self:flex-start;background:#fff;border-bottom-left-radius:6px}
.cgl-msg-user{align-self:flex-end;background:var(--cgl-accent,#175cb5);color:#fff;border-bottom-right-radius:6px}
.cgl-msg-note{align-self:center;background:#fff5e0;color:#63430b;font-size:12.5px;text-align:center;max-width:100%}
.cgl-sources{margin:8px 0 0;padding:0;list-style:none;display:flex;flex-wrap:wrap;gap:6px}
.cgl-sources a{display:inline-block;font-size:12px;padding:4px 9px;border-radius:999px;background:rgba(23,92,181,.08);color:var(--cgl-accent,#175cb5);text-decoration:none}
.cgl-typing{display:inline-flex;gap:4px;align-items:center}
.cgl-typing span{width:6px;height:6px;border-radius:50%;background:#96a3b8;animation:cgl-bounce 1.2s infinite ease-in-out}
.cgl-typing span:nth-child(2){animation-delay:.15s}
.cgl-typing span:nth-child(3){animation-delay:.3s}
@keyframes cgl-bounce{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}
.cgl-quick{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 10px;background:#f6f8fb}
.cgl-quick:empty{display:none}
.cgl-quick button{border:1px solid rgba(16,32,58,.14);background:#fff;border-radius:999px;padding:7px 12px;font-size:12.5px;cursor:pointer;color:#10203a}
.cgl-quick button:hover{border-color:var(--cgl-accent,#175cb5);color:var(--cgl-accent,#175cb5)}
.cgl-form{display:flex;gap:8px;align-items:flex-end;padding:12px 14px;border-top:1px solid rgba(16,32,58,.08);background:#fff}
.cgl-form textarea{flex:1;resize:none;border:1px solid rgba(16,32,58,.16);border-radius:14px;padding:10px 12px;font:inherit;font-size:14px;line-height:1.45;max-height:120px;color:#10203a;background:#fff}
.cgl-form textarea:focus{outline:2px solid var(--cgl-accent,#175cb5);outline-offset:1px}
.cgl-send{border:0;background:var(--cgl-accent,#175cb5);color:#fff;width:42px;height:42px;border-radius:14px;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;flex:none}
.cgl-send[disabled]{opacity:.5;cursor:not-allowed}
.cgl-panel-foot{padding:8px 16px 12px;background:#fff}
.cgl-panel-foot p{margin:0;font-size:11.5px;line-height:1.45;color:#68758b}
.cgl-handoff{margin:0;padding:12px;border-radius:14px;background:#fff;border:1px dashed rgba(23,92,181,.35);align-self:stretch}
.cgl-handoff p{margin:0 0 8px;font-size:13px;line-height:1.5}
.cgl-handoff-row{display:flex;gap:6px}
.cgl-handoff input{flex:1;border:1px solid rgba(16,32,58,.16);border-radius:10px;padding:8px 10px;font:inherit;font-size:13px}
.cgl-handoff button{border:0;border-radius:10px;background:var(--cgl-accent,#175cb5);color:#fff;padding:8px 14px;font-size:13px;cursor:pointer}
.cgl-inline-callout{display:flex;flex-wrap:wrap;gap:12px;align-items:center;justify-content:space-between;padding:18px 20px;border-radius:16px;background:#f2f6fc;border:1px solid rgba(23,92,181,.16)}
.cgl-inline-callout p{margin:0;font-size:14px;line-height:1.5}
.cgl-inline-open{border:0;border-radius:999px;background:var(--cgl-accent,#175cb5);color:#fff;padding:10px 18px;font-size:14px;cursor:pointer}
@media(prefers-reduced-motion:reduce){.cgl-launch,.cgl-typing span{transition:none;animation:none}}

/* ------------------------------------------------------------------ */
/* 1.9.1 — live handover to the team                                   */
/* ------------------------------------------------------------------ */
.cgl-mode{display:block;margin:0;padding:9px 18px;font-size:12px;font-weight:600;letter-spacing:.01em;text-align:center}
.cgl-mode--waiting{background:#fdf3e0;color:#8a5a00;border-bottom:1px solid #f2e2c4}
.cgl-mode--live{background:#e7f6ed;color:#186b41;border-bottom:1px solid #cdead9}
.cgl-mode--closed{background:#eef1f4;color:#5d6a76;border-bottom:1px solid #e0e5ea}
.cgl-panel-head-actions{display:flex;align-items:center;gap:8px}
.cgl-human{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border:1px solid rgba(255,255,255,.32);border-radius:999px;background:rgba(255,255,255,.1);color:#fff;font-size:12px;font-weight:600;cursor:pointer;transition:background .16s ease,border-color .16s ease}
.cgl-human:hover{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.55)}
.cgl-human svg{width:15px;height:15px}
.cgl-msg--agent{margin-right:auto;background:#0f2438;color:#fff;border-bottom-left-radius:6px}
.cgl-msg--agent .cgl-msg-who{color:rgba(255,255,255,.72)}
.cgl-msg--agent a{color:#9dc6ff}
.cgl-msg-who{display:block;margin-bottom:4px;font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;opacity:.65}
.cgl-offer{margin:6px 0 14px;padding:14px 16px;border:1px dashed #c9d6e2;border-radius:14px;background:#f6f9fc}
.cgl-offer p{margin:0 0 10px;font-size:13px;color:#44586a;line-height:1.55}
.cgl-offer-btn{display:inline-flex;align-items:center;justify-content:center;padding:9px 16px;border:0;border-radius:999px;background:var(--cgl-accent,#175cb5);color:#fff;font-size:13px;font-weight:600;cursor:pointer;transition:filter .16s ease}
.cgl-offer-btn:hover{filter:brightness(1.08)}
.cgl-contact{display:grid;gap:9px;margin:6px 0 14px;padding:16px;border:1px solid #dfe6ed;border-radius:14px;background:#fff}
.cgl-contact-title{margin:0;font-size:13.5px;font-weight:700;color:#12283b}
.cgl-contact label{display:grid;gap:4px;font-size:11.5px;font-weight:600;color:#5c7080;letter-spacing:.01em}
.cgl-contact input{width:100%;padding:9px 11px;border:1px solid #d3dce4;border-radius:9px;font-size:13.5px;color:#12283b;background:#fbfcfd}
.cgl-contact input:focus{border-color:var(--cgl-accent,#175cb5);outline:0;box-shadow:0 0 0 3px rgba(23,92,181,.14)}
.cgl-contact-note{margin:2px 0 0;font-size:10.5px;line-height:1.5;color:#8a97a3}
.cgl-msg--sources{display:flex;flex-wrap:wrap;gap:6px;align-items:center;max-width:100%;margin-right:auto;padding:0;background:none}
.cgl-sources-label{font-size:10.5px;font-weight:700;letter-spacing:.07em;text-transform:uppercase;color:#8a97a3}
.cgl-msg--sources a{padding:5px 11px;border:1px solid #dbe3ea;border-radius:999px;background:#fff;font-size:12px;color:#175cb5;text-decoration:none}
.cgl-msg--sources a:hover{border-color:var(--cgl-accent,#175cb5)}
@media (prefers-reduced-motion:reduce){.cgl-offer-btn,.cgl-human{transition:none}}

/* ==========================================================================
   1.12.0 — keep the live chat clear of the shopping bag
   Previously .cgl-root was fixed at bottom:24px / right:24px with z-index
   99998, exactly on top of the bag launcher (bottom:24px / right:24px,
   z-index 99990). The bag became unclickable and visually clipped.

   The bag now owns the corner. Chat sits in the slot above it whenever the bag
   is on the page (body.cgb-active is added by the shopping bag plugin, and
   body.cg-has-bag is added by the theme's motion layer as a runtime check).
   ========================================================================== */
.cgl-root{
	--cgl-stack-gap:16px;
	--cgl-bag-size:60px;
	z-index:var(--cg-z-chat,2147480300)!important;
}

body.cgb-active .cgl-root,
body.cg-has-bag .cgl-root,
body.woocommerce .cgl-root,
body.woocommerce-page .cgl-root{
	bottom:calc(var(--cgl-bottom,24px) + var(--cgl-bag-size) + var(--cgl-stack-gap))!important;
}

/* The open conversation panel must not run off the top of the screen once the
   launcher has been raised. */
body.cgb-active .cgl-panel,
body.cg-has-bag .cgl-panel{
	max-height:min(620px,calc(100vh - 200px))!important;
}

/* Bag drawer open: hide chat completely so nothing overlaps the drawer. */
.cgb-is-open .cgl-root,
html.cgb-is-open .cgl-root,
body.cgb-is-open .cgl-root{
	opacity:0!important;
	visibility:hidden!important;
	pointer-events:none!important;
	transition:opacity .18s ease;
}

@media(max-width:480px){
	.cgl-root{--cgl-bag-size:56px}
	body.cgb-active .cgl-root,
	body.cg-has-bag .cgl-root{
		right:16px!important;
		bottom:calc(16px + var(--cgl-bag-size) + var(--cgl-stack-gap) + env(safe-area-inset-bottom))!important;
	}
	body.cgb-active .cgl-panel,
	body.cg-has-bag .cgl-panel{
		max-height:min(560px,calc(100vh - 190px))!important;
	}
}

/* 1.12.0 — the chat launcher is always painted above the bag, and always sits
   in its own slot above it, on every page (not only WooCommerce pages). */
.cgl-root{z-index:var(--cg-z-chat,2147480300)!important}
body .cgl-root{
	bottom:calc(var(--cgl-bottom,24px) + var(--cgl-bag-size,60px) + var(--cgl-stack-gap,16px))!important;
}
body.cgb-hidden .cgl-root,
body.cg-no-bag .cgl-root{bottom:var(--cgl-bottom,24px)!important}

/* ==========================================================================
   1.13.0 — (a) the launcher physically leaves the bag corner
            (b) every text colour inside the panel is stated outright

   1.12.0 tried to solve the overlap with z-index and a bottom offset, so the
   two buttons still shared the same corner and the bag was still covered on
   real pages. The launcher now lives in the OPPOSITE corner by default
   (bottom-left) and only stacks above the bag if you deliberately switch it
   back to the right in Live Chat settings.
   ========================================================================== */

.cgl-root{
	--cgl-side:24px;
	--cgl-bottom:24px;
	--cgl-dodge:0px;
}

/* Default: bottom-left. The bag keeps the bottom-right corner to itself. */
.cgl-root,
body .cgl-root,
body.cgb-active .cgl-root,
body.cg-has-bag .cgl-root,
body.woocommerce .cgl-root,
body.woocommerce-page .cgl-root{
	right:auto!important;
	left:var(--cgl-side,24px)!important;
	bottom:var(--cgl-bottom,24px)!important;
	align-items:flex-start!important;
}

/* Panel grows away from the screen edge it is anchored to. */
.cgl-root:not(.cgl-right) .cgl-panel{transform-origin:bottom left}
.cgl-root.cgl-right .cgl-panel{transform-origin:bottom right}

/* Opt back in to the right-hand side: then, and only then, stack above the
   bag. --cgl-dodge is measured at runtime by chat.js. */
.cgl-root.cgl-right,
body .cgl-root.cgl-right,
body.cgb-active .cgl-root.cgl-right,
body.cg-has-bag .cgl-root.cgl-right{
	left:auto!important;
	right:var(--cgl-side,24px)!important;
	align-items:flex-end!important;
	bottom:calc(var(--cgl-bottom,24px) + var(--cgl-dodge,0px))!important;
}

/* Never sit under an open bag drawer. */
body.cgb-is-open .cgl-root,
html.cgb-is-open .cgl-root{opacity:0;pointer-events:none;transition:opacity .16s ease}

@media(max-width:600px){
	.cgl-root,
	body .cgl-root,
	body.cgb-active .cgl-root,
	body.cg-has-bag .cgl-root{
		left:16px!important;
		right:auto!important;
		bottom:calc(16px + env(safe-area-inset-bottom,0px))!important;
	}
	.cgl-root.cgl-right,
	body.cg-has-bag .cgl-root.cgl-right{
		left:auto!important;
		right:16px!important;
		bottom:calc(16px + var(--cgl-dodge,0px) + env(safe-area-inset-bottom,0px))!important;
	}
	.cgl-root .cgl-panel{width:min(390px,calc(100vw - 32px))}
}

/* -------------------------------------------------------------------------
   Readability. Themes that set a light body colour, a dark colour scheme or
   `color:inherit` on buttons were bleaching the assistant's own text, which is
   why the chatbot looked blank. Every colour below is stated explicitly.
   ------------------------------------------------------------------------- */

.cgl-panel{
	color-scheme:light;
	background:#fff!important;
	color:#10203a!important;
}
.cgl-panel *{text-shadow:none}

.cgl-panel-head,
.cgl-panel-head h2,
.cgl-panel-head .cgl-kicker,
.cgl-panel-head .cgl-sub,
.cgl-close{color:#fff!important}
.cgl-panel-head{background:linear-gradient(135deg,var(--cgl-accent,#175cb5),#0d2340)!important}
.cgl-kicker,.cgl-sub{opacity:1!important;color:rgba(255,255,255,.9)!important}

.cgl-thread{background:#f4f7fb!important}
.cgl-msg{color:#10203a!important}
.cgl-msg-bot,
.cgl-msg--bot{background:#fff!important;color:#10203a!important;border:1px solid rgba(16,32,58,.10)}
.cgl-msg-bot a,.cgl-msg--bot a{color:#0f4c9a!important;text-decoration:underline}
.cgl-msg-user{background:var(--cgl-accent,#175cb5)!important;color:#fff!important}
.cgl-msg-user a{color:#fff!important;text-decoration:underline}
.cgl-msg--agent{background:#0f2438!important;color:#fff!important}
.cgl-msg-note{background:#fff4de!important;color:#5a3c05!important;border:1px solid #f0dcb4}
.cgl-msg-who{opacity:1!important;color:inherit!important}

.cgl-quick button{background:#fff!important;color:#12304a!important;border-color:rgba(16,32,58,.16)!important}
.cgl-quick button:hover{background:#eef4fd!important;color:#0f4c9a!important;border-color:var(--cgl-accent,#175cb5)!important}
.cgl-quick{background:#f4f7fb!important}

.cgl-form{background:#fff!important}
.cgl-form textarea{background:#fff!important;color:#10203a!important;-webkit-text-fill-color:#10203a}
.cgl-form textarea::placeholder{color:#7c8ba1!important;opacity:1}
.cgl-send{background:var(--cgl-accent,#175cb5)!important;color:#fff!important}

.cgl-panel-foot{background:#fff!important}
.cgl-panel-foot p{color:#5d6b80!important}
.cgl-sources a{background:rgba(23,92,181,.10)!important;color:#0f4c9a!important}
.cgl-handoff{background:#fff!important;color:#10203a!important}
.cgl-handoff input{background:#fff!important;color:#10203a!important}
.cgl-handoff button{background:var(--cgl-accent,#175cb5)!important;color:#fff!important}
.cgl-launch{color:#fff!important}
.cgl-inline-callout{color:#10203a!important}

/* Same treatment when the visitor's OS is in dark mode: the panel stays a
   light card rather than inheriting half-applied dark styles. */
@media(prefers-color-scheme:dark){
	.cgl-panel{background:#fff!important;color:#10203a!important}
	.cgl-thread,.cgl-quick{background:#f4f7fb!important}
	.cgl-msg-bot{background:#fff!important;color:#10203a!important}
	.cgl-form,.cgl-panel-foot{background:#fff!important}
	.cgl-form textarea{background:#fff!important;color:#10203a!important}
}

@media(forced-colors:active){
	.cgl-panel,.cgl-msg,.cgl-quick button{border:1px solid CanvasText}
	.cgl-panel,.cgl-msg-bot,.cgl-form textarea{background:Canvas!important;color:CanvasText!important}
}