/* smc-chat build 1.0.14 */
/* ==========================================================================
   Scrapping A Car chat widget

   Every selector is scoped under .smc-chat-root, so nothing here can reach
   the theme, the funnel, or any other part of the page.

   Colours match the quote funnel on purpose. This widget appears on every
   page next to that funnel, so a second visual identity would read as a
   third party bolt-on rather than part of the same company.
   ========================================================================== */

.smc-chat-root {
	/* Theme se rang aur font khud utha liye jate hain.
	 *
	 * Elementor apni global values .elementor-kit-NN par rakhta hai, aur wo
	 * class <body> par lagti hai, is liye ye widget unke andar hai aur var()
	 * seedha resolve ho jata hai. Site par theme badal dein ya globals tweak
	 * kar dein, widget khud ba khud match kar lega.
	 *
	 * Har var ke saath hardcoded fallback hai (is site ki asli values), taake
	 * Elementor kabhi ye variables emit na kare tab bhi kuch na toote.
	 *
	 * --smcc-accent settings screen se override hota hai. Wo sab se pehle
	 * aata hai, is liye admin ki marzi theme se upar rehti hai.
	 */
	--smcc-accent:  var(--smcc-accent-override, var(--e-global-color-primary, #262362));
	--smcc-link:    var(--e-global-color-secondary, #0F4FB0);
	--smcc-ink:     var(--e-global-color-c58817e, #1A2537);
	--smcc-text:    var(--e-global-color-text, #545454);
	--smcc-white:   var(--e-global-color-58be983, #ffffff);

	--smcc-surface: #f6f7fb;
	--smcc-border:  #e2e5ee;
	--smcc-tint:    #eef0f8;
	--smcc-muted:   #7b8394;
	--smcc-danger:  #b3261e;

	--smcc-font-head: var(--e-global-typography-primary-font-family, 'Playfair Display'), Georgia, serif;
	--smcc-font-body: var(--e-global-typography-text-font-family, 'Inter'), system-ui, -apple-system, 'Segoe UI', sans-serif;

	position: fixed;
	bottom: 24px;
	z-index: 99999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
	font-family: var(--smcc-font-body);
	line-height: 1.5;
}

.smc-chat-root.smc-chat--right { right: 24px; }

.smc-chat-root.smc-chat--left {
	left: 24px;
	right: auto;
	align-items: flex-start;
}

.smc-chat-root *,
.smc-chat-root *::before,
.smc-chat-root *::after {
	box-sizing: border-box;
}


/* ---- Launcher ---------------------------------------------------------- */

.smc-chat-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 58px;
	height: 58px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--smcc-accent);
	color: var(--smcc-white);
	cursor: pointer;
	box-shadow: 0 6px 18px rgba(0, 0, 0, .22);
	transition: background-color .15s ease, box-shadow .15s ease;
}

.smc-chat-toggle:hover,
.smc-chat-toggle:focus-visible {
	background-color: var(--smcc-accent);
	filter: brightness(.88);
	box-shadow: 0 8px 22px rgba(0, 0, 0, .28);
}

.smc-chat-toggle:focus-visible {
	outline: 3px solid var(--smcc-accent);
	outline-offset: 3px;
}

/* The icon does not move when the panel opens. The panel has its own close
   button, and on mobile the launcher is hidden entirely while open, so a
   rotation was decoration rather than information. */
.smc-chat--open .smc-chat-toggle svg {
	transform: none;
}


/* ---- Panel ------------------------------------------------------------- */

.smc-chat-panel {
	display: flex;
	flex-direction: column;
	width: 370px;
	max-width: calc(100vw - 32px);
	height: 540px;
	max-height: calc(100vh - 120px);
	overflow: hidden;
	border: 1px solid var(--smcc-border);
	border-radius: 14px;
	background-color: var(--smcc-white);
	box-shadow: 0 18px 44px rgba(0, 0, 0, .18);
}

.smc-chat-panel[hidden] { display: none; }


/* ---- Header ------------------------------------------------------------ */

.smc-chat-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 16px 18px;
	background-color: var(--smcc-ink);
	color: var(--smcc-white);
}

.smc-chat-title {
	margin: 0;
	font-family: var(--smcc-font-head);
	font-size: 17px;
	font-weight: 600;
	line-height: 1.3;
	color: var(--smcc-white);
}

.smc-chat-subtitle {
	margin: 2px 0 0;
	font-size: 12.5px;
	line-height: 1.35;
	color: rgba(255, 255, 255, .72);
}

.smc-chat-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	flex: 0 0 32px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent;
	color: var(--smcc-white);
	cursor: pointer;
	opacity: .8;
	transition: background-color .15s ease, opacity .15s ease;
}

.smc-chat-close:hover,
.smc-chat-close:focus-visible {
	background-color: rgba(255, 255, 255, .14);
	opacity: 1;
}

.smc-chat-close:focus-visible {
	outline: 2px solid var(--smcc-white);
	outline-offset: 1px;
}


/* ---- Messages ---------------------------------------------------------- */

.smc-chat-list {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 18px;
	overflow-y: auto;
	overscroll-behavior: contain;
	background-color: var(--smcc-surface);
}

.smc-chat-row {
	display: flex;
	max-width: 100%;
}

.smc-chat-row--user { justify-content: flex-end; }
.smc-chat-row--bot  { justify-content: flex-start; }

.smc-chat-bubble {
	max-width: 84%;
	padding: 10px 14px;
	border-radius: 12px;
	font-size: 14.5px;
	line-height: 1.55;
	overflow-wrap: anywhere;
}

.smc-chat-row--bot .smc-chat-bubble {
	border: 1px solid var(--smcc-border);
	border-bottom-left-radius: 4px;
	background-color: var(--smcc-white);
	color: var(--smcc-text);
}

.smc-chat-row--user .smc-chat-bubble {
	border: 1px solid var(--smcc-accent);
	border-bottom-right-radius: 4px;
	background-color: var(--smcc-accent);
	color: var(--smcc-white);
}

.smc-chat-bubble--error {
	border-color: #f0c9c6;
	background-color: #fdf2f1;
	color: var(--smcc-danger);
}

/* Typing indicator */
.smc-chat-bubble--typing {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 14px;
}

.smc-chat-dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background-color: var(--smcc-muted);
	animation: smcc-blink 1.2s infinite ease-in-out;
}

.smc-chat-dot:nth-child(2) { animation-delay: .15s; }
.smc-chat-dot:nth-child(3) { animation-delay: .3s; }

@keyframes smcc-blink {
	0%, 60%, 100% { opacity: .28; }
	30%           { opacity: 1; }
}


/* ---- Starter chips ----------------------------------------------------- */

.smc-chat-starters {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	padding: 12px 18px 0;
	background-color: var(--smcc-white);
}

.smc-chat-starters[hidden] { display: none; }

.smc-chat-chip {
	padding: 8px 13px;
	border: 1px solid var(--smcc-border);
	border-radius: 999px;
	background-color: var(--smcc-white);
	color: var(--smcc-ink);
	font-family: var(--smcc-font-body);
	font-size: 13px;
	line-height: 1.35;
	text-align: left;
	cursor: pointer;
	transition: background-color .12s ease, border-color .12s ease;
}

.smc-chat-chip:hover,
.smc-chat-chip:focus-visible {
	border-color: var(--smcc-accent);
	background-color: var(--smcc-tint);
}

.smc-chat-chip:focus-visible {
	outline: 2px solid var(--smcc-accent);
	outline-offset: 1px;
}


/* ---- Composer ---------------------------------------------------------- */

.smc-chat-form {
	display: flex;
	align-items: flex-end;
	gap: 10px;
	padding: 14px 18px 16px;
	border-top: 1px solid var(--smcc-border);
	background-color: var(--smcc-white);
}

.smc-chat-input {
	flex: 1 1 auto;
	min-width: 0;
	min-height: 44px;
	max-height: 110px;
	padding: 11px 14px;
	border: 1px solid var(--smcc-border);
	border-radius: 10px;
	background-color: var(--smcc-white);
	color: var(--smcc-text);
	font-family: var(--smcc-font-body);
	/* 16px, not smaller: iOS Safari zooms the viewport on focus below that
	   and never zooms back out. */
	font-size: 16px;
	line-height: 1.4;
	resize: none;
	overflow-y: auto;
}

.smc-chat-input::placeholder { color: var(--smcc-muted); opacity: 1; }

.smc-chat-input:focus {
	border-color: var(--smcc-accent);
	box-shadow: 0 0 0 3px var(--smcc-tint);
	outline: none;
}

.smc-chat-send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	flex: 0 0 44px;
	padding: 0;
	border: 1px solid var(--smcc-accent);
	border-radius: 10px;
	background-color: var(--smcc-accent);
	color: var(--smcc-white);
	cursor: pointer;
	transition: background-color .15s ease;
}

.smc-chat-send:hover:not(:disabled),
.smc-chat-send:focus-visible {
	background-color: var(--smcc-accent);
	border-color: var(--smcc-accent);
	filter: brightness(.9);
}

.smc-chat-send:focus-visible {
	outline: 2px solid var(--smcc-accent);
	outline-offset: 2px;
}

.smc-chat-send:disabled {
	opacity: .55;
	cursor: default;
}


/* ---- Mobile: a full sheet, not a floating card ------------------------- */

@media (max-width: 520px) {

	.smc-chat-root {
		bottom: 16px;
		gap: 10px;
	}

	.smc-chat-root.smc-chat--right { right: 16px; }
	.smc-chat-root.smc-chat--left  { left: 16px; }

	/* Once the panel fills the screen the floating launcher underneath it is
	   just a second close button in an awkward place. */
	.smc-chat--open .smc-chat-toggle { display: none; }

	.smc-chat--open {
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		gap: 0;
	}

	.smc-chat-panel {
		width: 100%;
		max-width: 100%;
		height: 100%;
		max-height: 100%;
		border: 0;
		border-radius: 0;
	}

	.smc-chat-head { padding: 14px 16px; }
	.smc-chat-list { padding: 16px; }
	.smc-chat-starters { padding: 12px 16px 0; }
	.smc-chat-form { padding: 12px 16px 14px; }

	.smc-chat-bubble { max-width: 88%; }
}


/* ---- Reduced motion ---------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
	.smc-chat-root *,
	.smc-chat-root *::before,
	.smc-chat-root *::after {
		animation-duration: .001ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .001ms !important;
	}
}


/* ---- Handover note ------------------------------------------------------
   Shown when the CRM sets handoff:true. Styled as a quiet aside, not an
   error: nothing has gone wrong, the bot is simply passing the visitor on.
   -------------------------------------------------------------------------- */

.smc-chat-bubble--handoff {
	border-color: var(--smcc-accent) !important;
	background-color: var(--smcc-tint) !important;
	color: var(--smcc-ink) !important;
	font-weight: 600;
}


/* ==========================================================================
   Theme reset armour

   Hello Elementor's reset.css does this to every button on the site:

       [type=button],[type=submit],button {
           background-color: transparent;
           border: 1px solid #c36;      <- pink
           border-radius: 3px;
           color: #c36;                 <- pink
           padding: .5rem 1rem;
           font-size: 1rem;
           white-space: nowrap;
       }

   Every control in this widget is a <button>: the launcher, the close
   button, the starter chips and the send button. That is why they came out
   pink, square and transparent while the panel and the message list, which
   are plain divs, looked correct.

   On paper a class beats an element selector and this should not happen.
   In practice it did, and reset.css is enqueued AFTER this file (position 3
   against position 2), so rather than keep guessing at the cascade this
   block simply removes the argument: higher specificity plus !important on
   exactly the properties reset.css touches, and nothing else.

   Scoped under .smc-chat-root, so no button anywhere else on the site is
   affected.
   ========================================================================== */

.smc-chat-root button,
.smc-chat-root .smc-chat-toggle,
.smc-chat-root .smc-chat-close,
.smc-chat-root .smc-chat-chip,
.smc-chat-root .smc-chat-send {
	font-family: var(--smcc-font-body) !important;
	text-align: center !important;
	text-decoration: none !important;
	white-space: normal !important;
	transition: background-color .15s ease, border-color .15s ease, filter .15s ease !important;
}

/* Launcher */
.smc-chat-root .smc-chat-toggle {
	width: 58px !important;
	height: 58px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 50% !important;
	background-color: var(--smcc-accent) !important;
	color: var(--smcc-white) !important;
	font-size: 0 !important;
}

.smc-chat-root .smc-chat-toggle:hover,
.smc-chat-root .smc-chat-toggle:focus-visible {
	background-color: var(--smcc-accent) !important;
	color: var(--smcc-white) !important;
}

/* Close */
.smc-chat-root .smc-chat-close {
	width: 32px !important;
	height: 32px !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 8px !important;
	background-color: transparent !important;
	color: var(--smcc-white) !important;
	font-size: 0 !important;
}

.smc-chat-root .smc-chat-close:hover,
.smc-chat-root .smc-chat-close:focus-visible {
	background-color: rgba(255, 255, 255, .16) !important;
	color: var(--smcc-white) !important;
}

/* Starter chips */
.smc-chat-root .smc-chat-chip {
	padding: 8px 13px !important;
	border: 1px solid var(--smcc-border) !important;
	border-radius: 999px !important;
	background-color: var(--smcc-white) !important;
	color: var(--smcc-ink) !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	line-height: 1.35 !important;
	text-align: left !important;
}

.smc-chat-root .smc-chat-chip:hover,
.smc-chat-root .smc-chat-chip:focus-visible {
	border-color: var(--smcc-accent) !important;
	background-color: var(--smcc-tint) !important;
	color: var(--smcc-ink) !important;
}

/* Send */
.smc-chat-root .smc-chat-send {
	width: 44px !important;
	height: 44px !important;
	padding: 0 !important;
	border: 1px solid var(--smcc-accent) !important;
	border-radius: 10px !important;
	background-color: var(--smcc-accent) !important;
	color: var(--smcc-white) !important;
	font-size: 0 !important;
}

.smc-chat-root .smc-chat-send:hover:not(:disabled),
.smc-chat-root .smc-chat-send:focus-visible {
	background-color: var(--smcc-accent) !important;
	color: var(--smcc-white) !important;
	filter: brightness(.88);
}

/* Icons follow the button's own colour, never the theme's link pink. */
.smc-chat-root button svg,
.smc-chat-root button svg path {
	fill: currentColor !important;
}

/* Composer: the theme also has opinions about form controls. */
.smc-chat-root .smc-chat-input {
	border: 1px solid var(--smcc-border) !important;
	border-radius: 10px !important;
	background-color: var(--smcc-white) !important;
	color: var(--smcc-text) !important;
	font-family: var(--smcc-font-body) !important;
	font-size: 16px !important;
	padding: 11px 14px !important;
	resize: none !important;
}

/* The panel is not a button, but the theme styles headings and links too. */
.smc-chat-root .smc-chat-title {
	font-family: var(--smcc-font-head) !important;
	color: var(--smcc-white) !important;
}

.smc-chat-root .smc-chat-subtitle {
	color: rgba(255, 255, 255, .74) !important;
}

.smc-chat-root a {
	color: inherit !important;
}


/* ---- Quote call to action ----------------------------------------------
   Shown after a price question. Deliberately looks like an action, not
   another message bubble, so it does not read as more chat to skim past.
   -------------------------------------------------------------------------- */

.smc-chat-root .smc-chat-cta {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	max-width: 100% !important;
	min-height: 44px !important;
	padding: 11px 18px !important;
	border: 1px solid var(--smcc-accent) !important;
	border-radius: 10px !important;
	background-color: var(--smcc-accent) !important;
	color: var(--smcc-white) !important;
	font-family: var(--smcc-font-body) !important;
	font-size: 14.5px !important;
	font-weight: 600 !important;
	line-height: 1.3 !important;
	text-align: center !important;
	text-decoration: none !important;
}

.smc-chat-root .smc-chat-cta:hover,
.smc-chat-root .smc-chat-cta:focus-visible {
	color: var(--smcc-white) !important;
	filter: brightness(.88);
}

.smc-chat-root .smc-chat-cta:focus-visible {
	outline: 2px solid var(--smcc-accent) !important;
	outline-offset: 2px !important;
}


/* ---- Start over ---------------------------------------------------------
   The transcript deliberately survives a page change, so a visitor can
   browse the site without losing the thread. That makes an explicit way to
   clear it necessary rather than optional.

   Quiet by design: it sits beside the close button and should never compete
   with the conversation itself.
   -------------------------------------------------------------------------- */

.smc-chat-root .smc-chat-reset {
	margin-left: auto !important;
	margin-right: 4px !important;
	padding: 6px 10px !important;
	border: 1px solid rgba(255, 255, 255, .28) !important;
	border-radius: 999px !important;
	background-color: transparent !important;
	color: rgba(255, 255, 255, .82) !important;
	font-family: var(--smcc-font-body) !important;
	font-size: 12px !important;
	font-weight: 500 !important;
	line-height: 1.2 !important;
	white-space: nowrap !important;
	cursor: pointer !important;
}

.smc-chat-root .smc-chat-reset:hover,
.smc-chat-root .smc-chat-reset:focus-visible {
	border-color: rgba(255, 255, 255, .6) !important;
	background-color: rgba(255, 255, 255, .14) !important;
	color: var(--smcc-white) !important;
}

.smc-chat-root .smc-chat-reset:focus-visible {
	outline: 2px solid var(--smcc-white) !important;
	outline-offset: 1px !important;
}