/* Scope typography and controls so storefront form styles cannot override chat. */
#scs-widget .scs-chat-message { align-items: flex-start; gap: 8px; margin-bottom: 16px; }
#scs-widget .scs-chat-message > div { min-width: 0; max-width: calc(100% - 38px); border-radius: 12px; }
#scs-widget .scs-chat-message--customer > div { border-top-right-radius: 4px; }
#scs-widget .scs-chat-message--admin > div, #scs-widget .scs-chat-message--ai > div { border-top-left-radius: 4px; }
#scs-widget .scs-chat-message-avatar { display: block; flex: 0 0 30px; width: 30px; height: 30px; max-width: 30px; margin: 2px 0 0; border-radius: 50%; object-fit: cover; background: #e0f0ec; box-shadow: 0 0 0 2px #fff, 0 2px 5px #183b3414; }
#scs-widget .scs-chat-message-avatar[hidden] { display: none; }
#scs-widget .scs-chat-message--system > div { max-width: 92%; }
#scs-widget .scs-launcher-badge[hidden],
#scs-widget .scs-unread-bubble[hidden] {
	display: none !important;
}

#scs-widget .scs-unread-bubble {
	background: #fff;
	border: 1px solid #cbdcd7;
	border-radius: 12px;
	bottom: 82px;
	box-shadow: 0 6px 24px rgba(4, 57, 42, .18);
	color: #183b34;
	cursor: pointer;
	display: block;
	font: 600 14px/1.5 Arial, sans-serif;
	letter-spacing: normal;
	margin: 0;
	max-width: calc(100vw - 40px);
	padding: 12px 16px;
	position: absolute;
	text-align: left;
	text-transform: none;
	width: 240px;
}

#scs-widget.scs-position-right .scs-unread-bubble { right: 0; }
#scs-widget.scs-position-left .scs-unread-bubble { left: 0; }

#scs-widget .scs-unread-bubble::after {
	background: #fff;
	border-bottom: 1px solid #cbdcd7;
	border-right: 1px solid #cbdcd7;
	bottom: -6px;
	content: '';
	height: 10px;
	position: absolute;
	right: 28px;
	transform: rotate(45deg);
	width: 10px;
}

#scs-widget.scs-position-left .scs-unread-bubble::after { left: 28px; right: auto; }
#scs-widget .scs-unread-bubble:focus-visible { outline: 3px solid #52c6a4; outline-offset: 3px; }
#scs-widget.has-unread .scs-launcher { animation: scs-message-nudge .6s ease-in-out 3; }
@keyframes scs-message-nudge {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}
@media (prefers-reduced-motion: reduce) {
	#scs-widget.has-unread .scs-launcher { animation: none; }
}

#scs-widget .scs-back[hidden],
#scs-widget .scs-guest-link-view[hidden],
#scs-widget .scs-details-note[hidden] { display: none !important; }

#scs-widget .scs-back {
	background: transparent !important;
	border: 1px solid rgba(255, 255, 255, .45) !important;
	border-radius: 6px;
	box-shadow: none;
	color: #fff !important;
	cursor: pointer;
	flex: 0 0 auto;
	font: 600 13px/1.4 Arial, sans-serif;
	min-height: 36px;
	padding: 6px 8px;
	text-transform: none;
}
#scs-widget .scs-back:hover:not(:disabled) { background: rgba(255, 255, 255, .12) !important; }
#scs-widget .scs-back:disabled { cursor: wait; opacity: .6; }
#scs-widget .scs-chat-header > .scs-header-avatar { flex: 0 0 38px; }
#scs-widget .scs-chat-header > span:not(.scs-header-avatar) { display: flex; flex: 1; flex-direction: column; min-width: 0; }
#scs-widget .scs-lead-view { min-height: 0; overflow-y: auto; }
#scs-widget .scs-details-note { color: #47645d; font-size: 12px; margin: 0 0 14px; }
#scs-widget .scs-guest-link-view { overflow-y: auto; padding: 24px 20px; }
#scs-widget .scs-guest-link-view strong { font-size: 20px; }
#scs-widget .scs-guest-link-view p { margin: 14px 0 20px; }
#scs-widget .scs-guest-link-view button {
	background: var(--scs-primary) !important;
	border: 1px solid var(--scs-primary) !important;
	border-radius: 6px;
	color: #fff !important;
	cursor: pointer;
	display: block;
	font: 600 14px/1.5 Arial, sans-serif;
	margin: 10px 0 0;
	min-height: 44px;
	padding: 10px;
	text-transform: none;
	width: 100%;
}
#scs-widget .scs-guest-link-view .scs-guest-link-skip { background: #fff !important; color: var(--scs-primary) !important; }

#scs-widget .scs-chat-panel {
	font: 400 14px/1.5 Arial, sans-serif;
	text-align: left;
}

#scs-widget .scs-chat-header strong {
	font: 700 16px/1.4 Arial, sans-serif;
}

#scs-widget .scs-chat-header small {
	font: 400 12px/1.5 Arial, sans-serif;
}

#scs-widget .scs-lead-view {
	padding: 20px;
}

#scs-widget .scs-lead-intro strong {
	display: block;
	font: 700 20px/1.4 Arial, sans-serif;
}

#scs-widget .scs-lead-intro p {
	font: 400 14px/1.5 Arial, sans-serif;
	margin: 6px 0 20px;
}

#scs-widget .scs-lead-form > label,
#scs-widget .scs-field-row label {
	font: 600 14px/1.5 Arial, sans-serif;
	margin: 0 0 14px;
	min-width: 0;
}

#scs-widget .scs-lead-form input,
#scs-widget .scs-lead-form textarea,
#scs-widget .scs-chat-composer textarea {
	background: #fff !important;
	border: 1px solid #cbdcd7 !important;
	border-radius: 6px;
	box-shadow: none;
	box-sizing: border-box;
	color: #183b34 !important;
	font: 400 16px/1.5 Arial, sans-serif !important;
	letter-spacing: normal;
	min-height: 44px;
	padding: 9px 12px;
}

#scs-widget .scs-lead-form input,
#scs-widget .scs-lead-form textarea {
	margin: 6px 0 0;
	width: 100%;
}

#scs-widget .scs-lead-form input::placeholder,
#scs-widget .scs-chat-composer textarea::placeholder {
	color: #71837f;
	font: inherit !important;
	opacity: 1;
}

#scs-widget .scs-lead-form input:-webkit-autofill {
	-webkit-text-fill-color: #183b34 !important;
	caret-color: #183b34;
}

#scs-widget .scs-lead-form input:focus,
#scs-widget .scs-lead-form textarea:focus,
#scs-widget .scs-chat-composer textarea:focus {
	border-color: var(--scs-primary) !important;
	box-shadow: 0 0 0 3px rgba(7, 95, 70, .14) !important;
	outline: 0 !important;
}

#scs-widget .scs-privacy-note,
#scs-widget .scs-form-error {
	font: 400 12px/1.5 Arial, sans-serif;
	margin: 0 0 16px;
}

#scs-widget .scs-start,
#scs-widget .scs-chat-composer button,
#scs-widget .scs-shipping-quote__accept,
#scs-widget .scs-shipping-quote__decline {
	background: var(--scs-primary) !important;
	background-image: none !important;
	border: 1px solid var(--scs-primary) !important;
	border-radius: 6px;
	box-shadow: none;
	color: #fff !important;
	min-height: 44px;
	text-transform: none;
}

#scs-widget .scs-start {
	align-items: center;
	display: flex;
	font: 600 14px/1.5 Arial, sans-serif !important;
	gap: 8px;
	justify-content: center;
	letter-spacing: normal;
	margin: 0;
	padding: 10px 16px;
	width: 100%;
}

#scs-widget .scs-start:hover:not(:disabled),
#scs-widget .scs-chat-composer button:hover:not(:disabled),
#scs-widget .scs-shipping-quote__accept:hover:not(:disabled),
#scs-widget .scs-shipping-quote__decline:hover:not(:disabled) {
	background: #044b37 !important;
	border-color: #044b37 !important;
}

#scs-widget .scs-chat-panel button:focus-visible {
	outline: 3px solid #52c6a4 !important;
	outline-offset: 2px;
}

#scs-widget .scs-close,
#scs-widget .scs-close:hover,
#scs-widget .scs-close:focus {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none;
	color: #fff !important;
}

#scs-widget .scs-close:hover {
	background: rgba(255, 255, 255, .12) !important;
}

@media (max-width: 782px) {
	#scs-widget .scs-lead-view {
		padding: 16px;
	}
}

/* Scroll the mobile support window independently from the storefront. */
@media (max-width: 782px) {
	#scs-widget .scs-chat-panel {
		overscroll-behavior: none;
	}
	#scs-widget .scs-chat-messages,
	#scs-widget .scs-lead-view,
	#scs-widget .scs-guest-link-view,
	#scs-widget textarea {
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
	}
}

/* Drag and dock the mobile launcher; keep the support window within the viewport. */
@media (max-width: 780px) {
	#scs-widget.scs-mobile-drag-ready {
		--scs-safe-top: env(safe-area-inset-top, 0px);
		--scs-safe-right: env(safe-area-inset-right, 0px);
		--scs-safe-bottom: env(safe-area-inset-bottom, 0px);
		--scs-safe-left: env(safe-area-inset-left, 0px);
	}
	#scs-widget.scs-mobile-drag-ready .scs-launcher {
		touch-action: none;
		-webkit-touch-callout: none;
		-webkit-user-select: none;
		user-select: none;
		transform: none;
	}
	#scs-widget.scs-mobile-drag-ready .scs-launcher img {
		-webkit-user-drag: none;
		pointer-events: none;
	}
	#scs-widget.scs-mobile-positioned {
		bottom: auto;
		left: var(--scs-dock-x);
		right: auto;
		top: var(--scs-dock-y);
		transition: left .2s ease-out, top .2s ease-out;
	}
	#scs-widget.scs-launcher-dragging {
		transition: none;
	}
	#scs-widget.scs-launcher-dragging .scs-launcher {
		animation: none;
		cursor: grabbing;
	}
	#scs-widget.scs-mobile-positioned .scs-chat-panel {
		bottom: auto;
		left: var(--scs-dock-panel-x, 16px);
		max-height: var(--scs-dock-panel-height, calc(100dvh - 32px));
		position: fixed;
		right: auto;
		top: var(--scs-dock-panel-y, 16px);
		width: var(--scs-dock-panel-width, calc(100vw - 32px));
	}
	#scs-widget.scs-mobile-positioned[data-scs-dock-edge="left"] .scs-unread-bubble {
		left: 0;
		right: auto;
	}
	#scs-widget.scs-mobile-positioned[data-scs-dock-edge="right"] .scs-unread-bubble {
		left: auto;
		right: 0;
	}
	#scs-widget.scs-mobile-positioned[data-scs-dock-edge="left"] .scs-unread-bubble::after {
		left: 24px;
		right: auto;
	}
	#scs-widget.scs-mobile-positioned[data-scs-dock-edge="right"] .scs-unread-bubble::after {
		left: auto;
		right: 24px;
	}
	#scs-widget.scs-dock-notice-below .scs-unread-bubble {
		bottom: auto;
		top: calc(100% + 16px);
	}
	#scs-widget.scs-dock-notice-below .scs-unread-bubble::after {
		bottom: auto;
		top: -6px;
		transform: rotate(225deg);
	}
	#scs-widget.scs-launcher-dragging .scs-unread-bubble {
		visibility: hidden;
	}
}
@media (max-width: 780px) and (prefers-reduced-motion: reduce) {
	#scs-widget.scs-mobile-positioned { transition: none; }
}

/* Keep the compact mobile details form focused on fields and its action. */
@media (max-width: 782px) {
	#scs-widget .scs-lead-form > :is(.scs-details-note, .scs-privacy-note) {
		display: none !important;
	}
}
