/*
 * Front-end styles for the Smart Chat Concierge floating chat widget.
 * Colors are applied inline where they come from admin settings
 * (button color); everything else lives here.
 */

#sccc-chat-widget-root {
	position: fixed;
	z-index: 999999;
	bottom: 20px;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

#sccc-chat-widget-root.sccc-pos-bottom-right {
	right: 20px;
}

#sccc-chat-widget-root.sccc-pos-bottom-left {
	left: 20px;
}

.sccc-toggle-btn {
	width: 60px;
	height: 60px;
	border-radius: 50%;
	border: none;
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.2);
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	transition: transform 0.15s ease;
}

.sccc-toggle-btn:hover {
	transform: scale(1.06);
}

.sccc-toggle-btn svg {
	width: 28px;
	height: 28px;
	fill: currentColor;
}

.sccc-chat-window {
	position: absolute;
	bottom: 76px;
	width: 340px;
	max-width: calc(100vw - 40px);
	height: 480px;
	max-height: 70vh;
	background: #fff;
	border-radius: 12px;
	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
	display: none;
	flex-direction: column;
	overflow: hidden;
	box-sizing: border-box;
}

/* Scoped to the widget only — must not affect box-sizing on the host page. */
#sccc-chat-widget-root,
#sccc-chat-widget-root * {
	box-sizing: border-box;
}

#sccc-chat-widget-root.sccc-pos-bottom-right .sccc-chat-window {
	right: 0;
}

#sccc-chat-widget-root.sccc-pos-bottom-left .sccc-chat-window {
	left: 0;
}

.sccc-chat-window.sccc-open {
	display: flex;
}

.sccc-chat-header {
	color: #fff;
	padding: 14px 8px 14px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-weight: 600;
}

.sccc-chat-header span {
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.sccc-chat-header button {
	/* A permanent (not hover-only) circle so it visibly reads as a
	 * tappable button on touch devices, where hover states don't apply.
	 * Opaque white rather than a translucent tint — translucent washes
	 * out and loses contrast against lighter header colors (e.g.
	 * orange), where a faint white tint barely reads as a shape at all. */
	background: rgba(255, 255, 255, 0.9);
	border: none;
	color: rgba(0, 0, 0, 0.65);
	cursor: pointer;
	line-height: 1;
	/* Apple/Google's 44x44px tap-target minimum applies to the hit area,
	 * not the icon — but a bigger circle here also lets the icon itself
	 * read clearly at a glance instead of looking lost in the middle. */
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: background 0.15s ease, transform 0.15s ease;
}

.sccc-chat-header button svg {
	width: 26px;
	height: 26px;
}

.sccc-chat-header button:hover,
.sccc-chat-header button:active {
	background: #fff;
	transform: scale(1.05);
}

.sccc-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 12px;
	background: #f7f7f8;
}

.sccc-msg {
	max-width: 85%;
	margin-bottom: 10px;
	padding: 8px 12px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.4;
	white-space: pre-wrap;
	word-wrap: break-word;
}

.sccc-msg-bot {
	background: #eef0f2;
	color: #1d2327;
	border-bottom-left-radius: 4px;
	margin-right: auto;
}

.sccc-msg-user {
	background: #2271b1;
	color: #fff;
	border-bottom-right-radius: 4px;
	margin-left: auto;
}

.sccc-quick-replies {
	display: flex;
	flex-wrap: wrap;
	gap: 6px;
	padding: 10px 12px;
	background: #f7f7f8;
	border-top: 1px solid #e2e4e7;
}

.sccc-quick-replies:empty {
	display: none;
}

.sccc-quick-reply-btn {
	border: 1.5px solid #c3c4c7;
	background: #fff;
	border-radius: 16px;
	padding: 6px 13px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	transition: background 0.15s ease, opacity 0.15s ease;
}

.sccc-quick-reply-btn:hover {
	opacity: 0.85;
}

.sccc-lead-form {
	padding: 12px;
	background: #f0f6fc;
	border-top: 1px solid #e2e4e7;
}

.sccc-lead-form-cancel {
	display: block;
	width: 100%;
	margin-top: 8px;
	padding: 6px;
	border: none;
	background: transparent;
	color: #646970;
	font-size: 12.5px;
	text-align: center;
	text-decoration: underline;
	cursor: pointer;
}

.sccc-lead-form-cancel:hover {
	color: #1d2327;
}

.sccc-lead-form-label {
	margin-bottom: 8px;
	font-size: 12.5px;
	font-weight: 600;
	color: #1d2327;
}

.sccc-book-now-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 10px;
	padding: 9px;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	text-align: center;
	text-decoration: none;
	font-size: 13px;
	font-weight: 600;
}

.sccc-book-now-btn:hover {
	opacity: 0.9;
	color: #fff;
}

.sccc-whatsapp-btn {
	display: block;
	width: 100%;
	box-sizing: border-box;
	margin-top: 8px;
	padding: 8px;
	border-radius: 6px;
	border: 1px solid #25d366;
	background: #fff;
	color: #128c3e;
	text-align: center;
	text-decoration: none;
	font-size: 12.5px;
	font-weight: 600;
}

.sccc-whatsapp-btn:hover {
	background: #eafbf1;
	color: #128c3e;
}

.sccc-lead-form input {
	width: 100%;
	box-sizing: border-box;
	margin-bottom: 6px;
	padding: 7px 9px;
	border: 1px solid #c3c4c7;
	border-radius: 6px;
	/* iOS Safari auto-zooms the whole page when a focused input's font
	 * size is under 16px — keep it at 16px to prevent that. */
	font-size: 16px;
}

#sccc-lead-submit {
	width: 100%;
	padding: 8px;
	border: none;
	border-radius: 6px;
	background: #2271b1;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
}

.sccc-lead-error {
	color: #d63638;
	font-size: 12px;
	margin: 4px 0;
}

.sccc-chat-input-row {
	display: flex;
	border-top: 1px solid #e2e4e7;
	padding: 8px;
	gap: 6px;
	box-sizing: border-box;
	max-width: 100%;
}

.sccc-chat-input-row input {
	flex: 1 1 auto;
	/* Flex items default to min-width: auto, which stops them shrinking
	 * below their natural content width — on narrow screens that pushes
	 * the Send button past the window's edge instead of the input
	 * shrinking to make room for it. */
	min-width: 0;
	border: 1px solid #c3c4c7;
	border-radius: 20px;
	padding: 8px 14px;
	/* iOS Safari auto-zooms the whole page when a focused input's font
	 * size is under 16px — keep it at 16px to prevent that. */
	font-size: 16px;
	box-sizing: border-box;
}

.sccc-chat-input-row button {
	flex: 0 0 auto;
	border: none;
	border-radius: 20px;
	padding: 8px 16px;
	background: #2271b1;
	color: #fff;
	cursor: pointer;
	font-size: 13px;
	white-space: nowrap;
}

.sccc-typing {
	font-style: italic;
	color: #8c8f94;
	font-size: 12px;
	padding: 0 4px 6px;
}

/* Below this width, the floating-card layout (a small window anchored
 * to one corner) stops working well — site content peeks around its
 * edges and there's little room for messages. Standard practice for
 * chat widgets on phones (Intercom, Drift, Crisp, etc.) is a
 * full-screen takeover instead, so we switch to that here. */
@media (max-width: 480px) {
	.sccc-chat-window {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		width: 100%;
		height: 100%;
		max-width: 100%;
		max-height: 100%;
		border-radius: 0;
	}

	.sccc-chat-header {
		/* Clears the iPhone notch/Dynamic Island when the widget covers
		 * the full screen. env() resolves to 0 on devices without a
		 * safe-area inset, so this is a no-op everywhere else. */
		padding-top: calc(14px + env(safe-area-inset-top));
	}

	.sccc-chat-input-row {
		/* Clears the home indicator on notched iPhones. */
		padding-bottom: calc(8px + env(safe-area-inset-bottom));
	}
}