/* SB Chat Desk - visitor widget. Everything is scoped to #sbcd-root so no theme is touched. */
#sbcd-root {
	--sbcd-accent: #2563eb;
	--sbcd-ink: #15171c;
	--sbcd-line: #e6e8ee;
	position: fixed;
	bottom: 18px;
	z-index: 99990;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 15px;
	line-height: 1.5;
}
#sbcd-root.sbcd-right { right: 18px; }
#sbcd-root.sbcd-left { left: 18px; }
#sbcd-root *, #sbcd-root *::before, #sbcd-root *::after { box-sizing: border-box; }

.sbcd-launcher {
	width: 58px; height: 58px; border: 0; border-radius: 50%;
	background: var(--sbcd-accent); color: #fff; cursor: pointer;
	display: grid; place-items: center; margin-left: auto;
	box-shadow: 0 10px 26px -8px rgba(16, 24, 40, .45);
	transition: transform .18s ease, box-shadow .18s ease;
}
.sbcd-launcher:hover { transform: translateY(-2px); box-shadow: 0 16px 32px -10px rgba(16, 24, 40, .5); }
.sbcd-launcher:focus-visible { outline: 3px solid var(--sbcd-accent); outline-offset: 3px; }
.sbcd-launcher svg { width: 27px; height: 27px; fill: currentColor; }
.sbcd-launcher.is-open svg { transform: scale(.92); }

/* The panel is laid out with flex, which would otherwise beat the hidden attribute and
   leave the chat permanently open with a close button that does nothing. */
.sbcd-panel[hidden] { display: none; }
.sbcd-panel {
	position: absolute; bottom: 72px; width: min(374px, calc(100vw - 32px));
	height: min(560px, calc(100vh - 130px));
	display: flex; flex-direction: column; overflow: hidden;
	background: #fff; color: var(--sbcd-ink);
	border: 1px solid var(--sbcd-line); border-radius: 18px;
	box-shadow: 0 24px 60px -20px rgba(16, 24, 40, .4);
	animation: sbcd-in .18s ease both;
}
#sbcd-root.sbcd-right .sbcd-panel { right: 0; }
#sbcd-root.sbcd-left .sbcd-panel { left: 0; }
@keyframes sbcd-in { from { opacity: 0; transform: translateY(10px); } }

.sbcd-head { position: relative; padding: 16px 48px 14px 18px; background: var(--sbcd-accent); color: #fff; }
.sbcd-title { font-weight: 700; font-size: 16px; }
.sbcd-sub { font-size: 12.5px; opacity: .85; margin-top: 2px; }
.sbcd-close {
	position: absolute; right: 10px; top: 12px; width: 32px; height: 32px;
	border: 0; border-radius: 50%; background: rgba(255, 255, 255, .16); color: #fff; cursor: pointer;
	display: grid; place-items: center;
}
.sbcd-close:hover { background: rgba(255, 255, 255, .28); }
.sbcd-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

.sbcd-log { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 10px; background: #f7f8fa; }
.sbcd-msg { display: flex; }
.sbcd-msg.sbcd-visitor { justify-content: flex-end; }
.sbcd-bubble {
	max-width: 85%; padding: 10px 13px; border-radius: 14px;
	background: #fff; border: 1px solid var(--sbcd-line);
	white-space: pre-wrap; word-wrap: break-word; font-size: 14.5px;
}
.sbcd-visitor .sbcd-bubble { background: var(--sbcd-accent); border-color: transparent; color: #fff; border-bottom-right-radius: 5px; }
.sbcd-ai .sbcd-bubble, .sbcd-owner .sbcd-bubble { border-bottom-left-radius: 5px; }
.sbcd-owner .sbcd-bubble { border-color: var(--sbcd-accent); }
.sbcd-typing .sbcd-bubble { opacity: .6; font-style: italic; }

.sbcd-details { background: #fff; border: 1px solid var(--sbcd-line); border-radius: 14px; padding: 12px; display: grid; gap: 8px; }
.sbcd-details-label { font-size: 12.5px; font-weight: 600; opacity: .75; }
.sbcd-field { width: 100%; padding: 9px 11px; border: 1px solid var(--sbcd-line); border-radius: 9px; font: inherit; font-size: 14px; }
.sbcd-field:focus { outline: none; border-color: var(--sbcd-accent); }
.sbcd-save { justify-self: start; padding: 8px 16px; border: 0; border-radius: 999px; background: var(--sbcd-accent); color: #fff; font-weight: 600; cursor: pointer; }

.sbcd-form { display: flex; align-items: flex-end; gap: 8px; padding: 10px; border-top: 1px solid var(--sbcd-line); background: #fff; }
.sbcd-input {
	flex: 1; resize: none; border: 1px solid var(--sbcd-line); border-radius: 12px;
	padding: 10px 12px; font: inherit; font-size: 14.5px; max-height: 110px; color: inherit;
}
.sbcd-input:focus { outline: none; border-color: var(--sbcd-accent); }
.sbcd-send {
	width: 42px; height: 42px; flex: none; border: 0; border-radius: 50%;
	background: var(--sbcd-accent); color: #fff; cursor: pointer; display: grid; place-items: center;
}
.sbcd-send:disabled { opacity: .5; cursor: default; }
.sbcd-send svg { width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

@media (max-width: 860px) {
	/* Clear of any sticky bar the site puts along the bottom on phones. */
	#sbcd-root { bottom: calc(14px + var(--sbcd-lift, 0px)); }
}
@media (max-width: 480px) {
	#sbcd-root.sbcd-right { right: 14px; }
	#sbcd-root.sbcd-left { left: 14px; }
	.sbcd-panel { height: min(74vh, calc(100vh - 110px)); }
}
@media (prefers-reduced-motion: reduce) {
	.sbcd-launcher, .sbcd-panel { transition: none; animation: none; }
}
@media (prefers-color-scheme: dark) {
	.sbcd-panel { background: #15171c; color: #eef0f4; border-color: #262a33; }
	.sbcd-log { background: #0f1116; }
	.sbcd-bubble { background: #1b1e25; border-color: #262a33; }
	.sbcd-form, .sbcd-details { background: #15171c; border-color: #262a33; }
	.sbcd-input, .sbcd-field { background: #1b1e25; border-color: #262a33; color: inherit; }
}