/*
 * Smart Home Dubai AI Assistant — brand: #004C3E (green), #001A15 (deep), #C8F55F (lime), #EAF0F0 (mist).
 * Every selector is scoped under #shd-ai-root (ID specificity) and buttons/textarea are fully reset,
 * so theme and page-builder styles (Elementor kit, Hello reset, which load after this file) cannot restyle the widget.
 */
#shd-ai-root {
	--shd-green: #004C3E;
	--shd-deep: #001A15;
	--shd-lime: #C8F55F;
	--shd-mist: #EAF0F0;
	--shd-ink: #1b2a26;
	--shd-muted: #5E676D;
	--shd-line: #dfe7e5;
	--shd-bottom: 25px;
	position: fixed;
	z-index: 2147483000;
	bottom: calc(var(--shd-bottom) + env(safe-area-inset-bottom, 0px));
	font-family: "Kumbh Sans", "Segoe UI", Tahoma, system-ui, -apple-system, sans-serif;
	font-size: 15px;
	font-weight: 400;
	line-height: 1.5;
	letter-spacing: normal;
	text-transform: none;
	color: var(--shd-ink);
	text-align: start;
}
#shd-ai-root.shd-ai--right { right: 25px; left: auto; }
#shd-ai-root.shd-ai--left { left: 25px; right: auto; }
#shd-ai-root *, #shd-ai-root *::before, #shd-ai-root *::after { box-sizing: border-box; }
#shd-ai-root [hidden] { display: none !important; }

/* Hard reset of form controls against theme/kit button and input styles. */
#shd-ai-root button,
#shd-ai-root textarea {
	all: unset;
	box-sizing: border-box;
	font-family: inherit;
	-webkit-tap-highlight-color: transparent;
}
#shd-ai-root button { cursor: pointer; }
#shd-ai-root svg { display: block; width: 100%; height: 100%; max-width: none; fill: none; }
#shd-ai-root p, #shd-ai-root ul, #shd-ai-root ol, #shd-ai-root li {
	font: inherit; color: inherit; letter-spacing: normal; text-transform: none; background: none; border: 0;
}
#shd-ai-root button:focus-visible, #shd-ai-root a:focus-visible, #shd-ai-root textarea:focus-visible {
	outline: 3px solid var(--shd-lime); outline-offset: 2px;
}

/* Launcher */
#shd-ai-root .shd-ai__launcher {
	display: flex; align-items: center; justify-content: center;
	width: 60px; height: 60px; border-radius: 50%; padding: 15px; margin: 0 0 0 auto;
	background: var(--shd-green); color: var(--shd-lime); border: 0;
	box-shadow: 0 8px 24px rgba(0, 26, 21, .28);
	transition: transform .18s ease, background-color .18s ease;
}
#shd-ai-root.shd-ai--left .shd-ai__launcher { margin: 0; }
#shd-ai-root .shd-ai__launcher:hover { transform: translateY(-2px) scale(1.06); background: var(--shd-deep); color: var(--shd-lime); }

/* Launcher animation: pop-in on load, a soft lime pulse ring, and a short wiggle of the icon every few seconds.
 * All of it stops while the panel is open and for visitors who prefer reduced motion. */
#shd-ai-root .shd-ai__launcher {
	position: relative;
	animation: shd-ai-pop .55s cubic-bezier(.34, 1.56, .64, 1) .4s backwards;
}
#shd-ai-root .shd-ai__launcher::before,
#shd-ai-root .shd-ai__launcher::after {
	content: ""; position: absolute; inset: 0; border-radius: 50%;
	border: 2px solid var(--shd-lime); opacity: 0; pointer-events: none;
	animation: shd-ai-ring 2.8s ease-out 1.2s infinite;
}
#shd-ai-root .shd-ai__launcher::after { animation-delay: 2.1s; }
#shd-ai-root .shd-ai__launcher svg { animation: shd-ai-wiggle 5s ease-in-out 1.5s infinite; transform-origin: 50% 60%; }
#shd-ai-root.is-open .shd-ai__launcher::before,
#shd-ai-root.is-open .shd-ai__launcher::after { animation: none; }
#shd-ai-root.is-open .shd-ai__launcher svg { animation: shd-ai-spin-in .3s ease-out; }
@keyframes shd-ai-pop { from { opacity: 0; transform: scale(.3) translateY(20px); } to { opacity: 1; transform: none; } }
@keyframes shd-ai-ring { 0% { opacity: .75; transform: scale(1); } 70%, 100% { opacity: 0; transform: scale(1.55); } }
@keyframes shd-ai-wiggle {
	0%, 76%, 100% { transform: none; }
	80% { transform: rotate(-12deg) scale(1.08); }
	84% { transform: rotate(10deg) scale(1.08); }
	88% { transform: rotate(-6deg); }
	92% { transform: rotate(3deg); }
}
@keyframes shd-ai-spin-in { from { transform: rotate(-90deg) scale(.6); opacity: 0; } to { transform: none; opacity: 1; } }

/* Panel */
#shd-ai-root .shd-ai__panel {
	position: absolute; bottom: 74px;
	width: 380px; max-width: calc(100vw - 32px);
	height: 600px; max-height: calc(100vh - var(--shd-bottom) - 110px);
	background: #fff; border-radius: 18px; overflow: hidden;
	box-shadow: 0 18px 50px rgba(0, 26, 21, .25);
	display: flex; flex-direction: column;
	animation: shd-ai-in .2s ease-out;
}
#shd-ai-root.shd-ai--right .shd-ai__panel { right: 0; }
#shd-ai-root.shd-ai--left .shd-ai__panel { left: 0; }
@keyframes shd-ai-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

#shd-ai-root .shd-ai__header {
	flex: 0 0 auto; display: flex; align-items: center; gap: 6px;
	padding: 12px 10px 12px 14px;
	background: linear-gradient(135deg, var(--shd-deep), var(--shd-green));
	color: #fff;
}
#shd-ai-root .shd-ai__panel[dir="rtl"] .shd-ai__header { padding: 12px 14px 12px 10px; }
#shd-ai-root .shd-ai__avatar {
	flex: 0 0 38px; width: 38px; height: 38px; border-radius: 50%;
	background: var(--shd-lime); color: var(--shd-green);
	display: flex; align-items: center; justify-content: center; padding: 8px;
}
#shd-ai-root .shd-ai__heading { flex: 1 1 auto; min-width: 0; }
#shd-ai-root .shd-ai__title {
	font-weight: 700; font-size: 16px; line-height: 1.25; color: #fff;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#shd-ai-root .shd-ai__subtitle {
	font-size: 12px; line-height: 1.4; color: rgba(255, 255, 255, .85);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#shd-ai-root .shd-ai__subtitle::before {
	content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
	background: var(--shd-lime); margin-inline-end: 6px; vertical-align: middle;
}
#shd-ai-root .shd-ai__hbtn {
	flex: 0 0 auto; display: flex; align-items: center; justify-content: center;
	min-width: 34px; height: 34px; padding: 8px; margin: 0; border: 0; border-radius: 9px;
	background: rgba(255, 255, 255, .12); color: #fff;
	font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
}
#shd-ai-root .shd-ai__hbtn:hover { background: rgba(255, 255, 255, .24); color: #fff; }
#shd-ai-root .shd-ai__hbtn svg { width: 18px; height: 18px; }
#shd-ai-root .shd-ai__lang { padding: 0 10px; font-size: 14px; }

/* Messages */
#shd-ai-root .shd-ai__log {
	flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 16px 14px 8px; margin: 0;
	background: var(--shd-mist);
	display: flex; flex-direction: column; gap: 10px;
	overscroll-behavior: contain;
}
#shd-ai-root .shd-ai__msg {
	max-width: 86%; padding: 10px 13px; margin: 0; border-radius: 14px;
	font-size: 15px; line-height: 1.5;
	word-wrap: break-word; overflow-wrap: anywhere;
}
#shd-ai-root .shd-ai__msg p { margin: 0 0 8px; padding: 0; }
#shd-ai-root .shd-ai__msg p:last-child { margin-bottom: 0; }
#shd-ai-root .shd-ai__msg ul, #shd-ai-root .shd-ai__msg ol { margin: 4px 0 8px; padding: 0; padding-inline-start: 20px; }
#shd-ai-root .shd-ai__msg ul { list-style: disc; }
#shd-ai-root .shd-ai__msg ol { list-style: decimal; }
#shd-ai-root .shd-ai__msg li { margin: 2px 0; padding: 0; display: list-item; }
#shd-ai-root .shd-ai__msg strong { font-weight: 700; color: inherit; }
#shd-ai-root .shd-ai__msg a,
#shd-ai-root .shd-ai__msg a:hover,
#shd-ai-root .shd-ai__msg a:visited {
	color: var(--shd-green); text-decoration: underline; font-weight: 600; background: none;
	direction: ltr; unicode-bidi: isolate;
}
#shd-ai-root .shd-ai__msg--bot {
	align-self: flex-start; background: #fff; border: 1px solid var(--shd-line); color: var(--shd-ink);
	border-end-start-radius: 4px;
}
#shd-ai-root .shd-ai__msg--user {
	align-self: flex-end; background: var(--shd-green); color: #fff; border: 0;
	border-end-end-radius: 4px; white-space: pre-wrap;
}
#shd-ai-root .shd-ai__msg--error { border-color: #f1c7c7; background: #fff7f7; }
#shd-ai-root .shd-ai__chip {
	margin-top: 8px; display: inline-block; padding: 4px 10px; border-radius: 999px;
	background: var(--shd-lime); color: var(--shd-deep); font-size: 12px; font-weight: 700; white-space: nowrap;
}
#shd-ai-root .shd-ai__retry {
	display: inline-block; margin-top: 8px; padding: 6px 14px; border-radius: 8px;
	border: 1px solid var(--shd-green); background: #fff; color: var(--shd-green);
	font-weight: 700; font-size: 13px; line-height: 1.4;
}
#shd-ai-root .shd-ai__retry:hover { background: var(--shd-green); color: #fff; border: 1px solid var(--shd-green); }
#shd-ai-root .shd-ai__retry:disabled { opacity: .5; cursor: default; }

/* Typing */
#shd-ai-root .shd-ai__typing { display: flex; gap: 4px; align-items: center; padding: 13px 14px; }
#shd-ai-root .shd-ai__typing span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--shd-green); opacity: .35;
	animation: shd-ai-dot 1.2s infinite ease-in-out;
}
#shd-ai-root .shd-ai__typing span:nth-child(2) { animation-delay: .15s; }
#shd-ai-root .shd-ai__typing span:nth-child(3) { animation-delay: .3s; }
@keyframes shd-ai-dot { 0%, 80%, 100% { opacity: .35; transform: none; } 40% { opacity: 1; transform: translateY(-3px); } }

/* Quick replies */
#shd-ai-root .shd-ai__quick {
	display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 12px 10px; margin: 0;
	background: var(--shd-mist); border-top: 1px solid var(--shd-line);
	flex: 0 0 auto; max-height: 190px; overflow-y: auto;
}
#shd-ai-root .shd-ai__qr {
	display: inline-block; margin: 0;
	border: 1px solid var(--shd-green); background: #fff; color: var(--shd-green);
	border-radius: 999px; padding: 6px 12px;
	font-size: 13px; font-weight: 600; line-height: 1.3; white-space: normal; text-align: center;
}
#shd-ai-root .shd-ai__qr.is-primary { background: var(--shd-green); color: var(--shd-lime); }
#shd-ai-root .shd-ai__qr:hover { background: var(--shd-deep); color: var(--shd-lime); border: 1px solid var(--shd-deep); }

/* Composer */
#shd-ai-root .shd-ai__form {
	flex: 0 0 auto; display: flex; align-items: flex-end; gap: 8px; padding: 10px 12px; margin: 0;
	border-top: 1px solid var(--shd-line); background: #fff;
}
#shd-ai-root .shd-ai__input {
	display: block; flex: 1 1 auto; min-width: 0; width: auto;
	height: 44px; min-height: 44px; max-height: 120px;
	resize: none; overflow-y: hidden;
	border: 1px solid var(--shd-line); border-radius: 12px;
	padding: 11px 12px; margin: 0;
	font-size: 16px; /* 16px avoids iOS zoom */ line-height: 1.35;
	color: var(--shd-ink); background: #fbfdfc;
	white-space: pre-wrap; overflow-wrap: break-word; cursor: text;
}
#shd-ai-root .shd-ai__input::placeholder { color: #8a9490; opacity: 1; }
#shd-ai-root .shd-ai__input:focus { border: 1px solid var(--shd-green); box-shadow: 0 0 0 3px rgba(0, 76, 62, .12); }
#shd-ai-root .shd-ai__send {
	flex: 0 0 44px; display: flex; align-items: center; justify-content: center;
	width: 44px; height: 44px; border-radius: 12px; border: 0; padding: 11px; margin: 0;
	background: var(--shd-green); color: var(--shd-lime);
}
#shd-ai-root .shd-ai__send:hover { background: var(--shd-deep); color: var(--shd-lime); }
#shd-ai-root .shd-ai__send:disabled { opacity: .55; cursor: default; }
#shd-ai-root .shd-ai__panel[dir="rtl"] .shd-ai__send svg { transform: scaleX(-1); }
#shd-ai-root .shd-ai__foot {
	flex: 0 0 auto; padding: 0 14px 10px; margin: 0; font-size: 11px; line-height: 1.45; color: var(--shd-muted); background: #fff;
}
#shd-ai-root .shd-ai__foot a, #shd-ai-root .shd-ai__foot a:hover { color: var(--shd-muted); text-decoration: underline; font-size: 11px; }

/* Mobile: full screen */
@media (max-width: 520px) {
	#shd-ai-root.shd-ai--right { right: 14px; }
	#shd-ai-root.shd-ai--left { left: 14px; }
	#shd-ai-root.is-open { bottom: 0; right: 0; left: 0; }
	#shd-ai-root.is-open .shd-ai__launcher { display: none; }
	#shd-ai-root .shd-ai__panel {
		position: fixed; inset: 0; width: 100%; max-width: 100%; height: 100%; max-height: 100%;
		border-radius: 0; bottom: 0;
	}
	#shd-ai-root .shd-ai__header { padding-top: calc(12px + env(safe-area-inset-top, 0px)); }
	#shd-ai-root .shd-ai__form { padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px)); }
}

@media (prefers-reduced-motion: reduce) {
	#shd-ai-root .shd-ai__panel, #shd-ai-root .shd-ai__typing span, #shd-ai-root .shd-ai__launcher,
	#shd-ai-root .shd-ai__launcher svg { animation: none; transition: none; }
	#shd-ai-root .shd-ai__launcher::before, #shd-ai-root .shd-ai__launcher::after { animation: none; display: none; }
}