/* AI Chatbot Plugin – Chat Widget Styles */

/* ── Theme colours ─────────────────────────────────────────
   These two custom properties drive every gradient/accent in the
   chat UI. The defaults below are used as a fallback; the actual
   values are injected inline from the "Appearance" section of the
   Chatbot Settings screen (see Shortcode::enqueue_assets()). */
.aiec-chat-widget {
	--aiec-primary: #f9bf00;
	--aiec-secondary: #54595F;
}

/* Fixed, centered at the bottom of the viewport — always shows here
   regardless of where the shortcode was placed in the page content. */
.aiec-chat-widget {
	position: fixed;
	left: 50%;
	bottom: 24px;
	transform: translateX(-50%);
	z-index: 99998;
	display: inline-block;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

/* Step 1 */
#aiec-launcher-btn {

	width: 170px;
	height: 58px;

	transition:
		width .45s ease,
		border-radius .35s ease,
		opacity .2s;
}

/* Expand */
#aiec-launcher-btn.expand {

	width: 400px;
	border-radius: 18px;
}

/* ── "Ask to AI" Button ───────────────── */

#aiec-launcher-btn.aiec-ask-btn {
	-webkit-appearance: none !important;
	appearance: none !important;

	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 9px;

	padding: 14px 30px;
	margin: 0;

	border: 1px solid rgba(255, 255, 255, .4) !important;
	border-radius: 999px !important;

	cursor: pointer;

	font-size: 14.5px;
	font-weight: 700;
	font-family: inherit;
	color: #fff !important;

	overflow: hidden;

	background-color: transparent !important;
	background-image: none !important;

	backdrop-filter: blur(14px) saturate(160%);
	-webkit-backdrop-filter: blur(14px) saturate(160%);

	box-shadow:
		0 10px 30px rgba(99, 102, 241, .4),
		inset 0 1px 0 rgba(255, 255, 255, .45) !important;

	transition:
		transform .18s ease,
		box-shadow .18s ease,
		opacity .25s ease;
}

/* Transparent gradient layer */
#aiec-launcher-btn.aiec-ask-btn::before {
	content: "";

	position: absolute;
	inset: 0;

	background-image: linear-gradient(
		120deg,
		var(--aiec-primary),
		var(--aiec-secondary),
		var(--aiec-secondary),
		var(--aiec-primary)
	) !important;

	background-size: 300% 300%;

	opacity: .35;

	animation: aiec-water-flow 6s ease infinite;

	pointer-events: none;
	z-index: 0;
}

/* Keep content above gradient */
#aiec-launcher-btn.aiec-ask-btn .aiec-ask-btn-icon,
#aiec-launcher-btn.aiec-ask-btn .aiec-ask-btn-text,
#aiec-launcher-btn.aiec-ask-btn .aiec-ask-btn-shine {
	position: relative;
	z-index: 2;
}

#aiec-launcher-btn.aiec-ask-btn:hover {
	transform: translateY(-2px) scale(1.02);

	box-shadow:
		0 14px 36px rgba(99, 102, 241, .5),
		inset 0 1px 0 rgba(255, 255, 255, .5) !important;
}

#aiec-launcher-btn.aiec-ask-btn:hover::before {
	opacity: .45;
}

#aiec-launcher-btn.aiec-ask-btn:active {
	transform: translateY(0) scale(.97);
}

.aiec-chat-widget{

    overflow:visible;

}

/* Liquid gradient motion. */
@keyframes aiec-water-flow {
	0% {
		background-position: 0% 50%;
	}

	50% {
		background-position: 100% 50%;
	}

	100% {
		background-position: 0% 50%;
	}
}

/* Sweeping shine, layered on top of the gradient for a "water shimmer" feel. */
.aiec-ask-btn-shine {
	position: absolute;
	top: 0;
	left: -60%;
	width: 45%;
	height: 100%;
	background: linear-gradient(120deg, transparent, rgba(255, 255, 255, .55), transparent);
	transform: skewX(-20deg);
	animation: aiec-shine-sweep 3.4s ease-in-out infinite;
	pointer-events: none;
}

@keyframes aiec-shine-sweep {
	0% {
		left: -60%;
	}

	45% {
		left: 130%;
	}

	100% {
		left: 130%;
	}
}

.aiec-ask-btn-icon {
	font-size: 16px;
	line-height: 1;
}

.aiec-ask-btn-text {
	white-space: nowrap;
}

/* Smoothly hides the button while the chat window is open. */
#aiec-launcher-btn.aiec-ask-btn {
	width: 170px;
	height: 58px;
	display: flex;
	justify-content: center;
    align-items: center;
	transition:
		width .45s cubic-bezier(.22, 1, .36, 1),
		border-radius .35s ease,
		transform .35s ease;
}

#aiec-launcher-btn.aiec-ask-btn.expand {
	width: 600px;
	border-radius: 18px;
	position: relative;
	justify-content: center;
}

#aiec-launcher-btn.aiec-ask-btn.expand .aiec-ask-btn-text {
	position: absolute;
	left: 50%;
	transform: translateX(-50%);
	white-space: nowrap;
	z-index: 2;
}

#aiec-launcher-btn.aiec-ask-btn.expand .aiec-ask-btn-icon {
	position: absolute;
	left: calc(50% - 48px);
	z-index: 2;
}

/* ── Chat Window ───────────────────────────────────────── */
/* Opens centered directly above the button, growing out from it. */
.aiec-chat-window {
	position: absolute;
	left: 50%;
	bottom: 0;
	width: 600px;
	max-width: min(92vw, 600px);
	height: 560px;
	max-height: min(80vh, 560px);
	background: #fff;
	border-radius: 20px;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	box-shadow: 0 30px 70px rgba(15, 23, 42, .30);
	transform-origin: bottom center;
	transform:
		translateX(-50%) scaleY(0);
	opacity: 0;
	pointer-events: none;
	transition:
		transform .45s cubic-bezier(.22, 1, .36, 1),
		opacity .25s ease;
}

.aiec-chat-window.aiec-window-open {
	opacity: 1;
	pointer-events: auto;
	transform:
		translateX(-50%) scaleY(1);
}

/* ── Header ────────────────────────────────────────────── */
.aiec-chat-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;

	background: linear-gradient(
		135deg,
		var(--aiec-secondary),
		var(--aiec-primary)
	);

	background-color: rgba(255, 255, 255, 0.5);

	border: 1px solid #d8d8d8;

	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);

	box-shadow: 0 9px 8px 0 rgba(0, 0, 0, 0.0784313725);

	color: #fff;
	flex-shrink: 0;
}

.aiec-chat-header-info {
	display: flex;
	align-items: center;
	gap: 10px;
}

.aiec-chat-avatar {
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .2);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 16px;
	flex-shrink: 0;
}

.aiec-chat-title {
	font-size: 14px;
	font-weight: 700;
	line-height: 1.3;
}

.aiec-chat-status {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11.5px;
	opacity: .9;
}

.aiec-status-dot {
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: #4ade80;
	display: inline-block;
}

.aiec-chat-close {
	background: rgba(255, 255, 255, .15);
	border: none;
	border-radius: 8px;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #fff;
	cursor: pointer;
	transition: background .15s;
}

.aiec-chat-close:hover {
	background: rgba(255, 255, 255, .28);
}

/* ── Messages ──────────────────────────────────────────── */
.aiec-chat-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f8fafc;
}

.aiec-msg {
	max-width: 82%;
	padding: 9px 13px;
	border-radius: 14px;
	font-size: 13.5px;
	line-height: 1.5;
	word-wrap: break-word;
}

.aiec-msg-bot {
	align-self: flex-start;
	background: #fff;
	color: #1e293b;
	border: 1px solid #e2e8f0;
	border-bottom-left-radius: 4px;
}

.aiec-msg-user {
	align-self: flex-end;
	background: linear-gradient(135deg, var(--aiec-secondary), var(--aiec-primary));
	color: #fff;
	border-bottom-right-radius: 4px;
}

/* ── Typing indicator ──────────────────────────────────── */
.aiec-typing {
	align-self: flex-start;
	display: flex;
	align-items: center;
	gap: 4px;
	padding: 10px 14px;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
}

.aiec-typing span {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #94a3b8;
	animation: aiec-blink 1.2s infinite ease-in-out;
}

.aiec-typing span:nth-child(2) {
	animation-delay: .2s;
}

.aiec-typing span:nth-child(3) {
	animation-delay: .4s;
}

@keyframes aiec-blink {

	0%,
	80%,
	100% {
		opacity: .3;
		transform: scale(.85);
	}

	40% {
		opacity: 1;
		transform: scale(1);
	}
}

/* ── Quick-reply chips ─────────────────────────────────── */
.aiec-chip-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	align-self: flex-start;
	max-width: 90%;
}

.aiec-chip {
	padding: 9px 14px;
	border-radius: 10px;
	border: 1.5px solid #e0e7ff;
	background: #eef2ff;
	color: #4338ca;
	font-size: 13px;
	font-weight: 600;
	text-align: left;
	cursor: pointer;
	font-family: inherit;
	transition: background .15s, border-color .15s;
}

.aiec-chip:hover {
	background: #e0e7ff;
	border-color: #c7d2fe;
}

/* ── Input Row ─────────────────────────────────────────── */
.aiec-chat-input-row {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid #e2e8f0;
	background: #fff;
	flex-shrink: 0;
}

.aiec-chat-input-row[hidden] {
	display: none;
}

.aiec-chat-input {
	flex: 1;
	border: 1.5px solid #e2e8f0;
	border-radius: 20px;
	padding: 9px 15px;
	font-size: 13.5px;
	font-family: inherit;
	color: #1e293b;
	outline: none;
	transition: border-color .2s, box-shadow .2s;
}

.aiec-chat-input:focus {
	border-color: #6366f1;
	box-shadow: 0 0 0 3px rgba(99, 102, 241, .12);
}

.aiec-chat-send {
	-webkit-appearance: none;
	appearance: none;
	background: linear-gradient(135deg, var(--aiec-primary), var(--aiec-secondary)) !important;
	background-color: #6366f1 !important;
	background-image: linear-gradient(135deg, var(--aiec-primary), var(--aiec-secondary)) !important;
	border: none;
	border-radius: 50%;
	width: 36px;
	height: 36px;
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
}

.aiec-chat-send:hover {
	opacity: .9;
}

.aiec-chat-send:disabled {
	opacity: .5;
	cursor: default;
}

/* ── Responsive ────────────────────────────────────────── */
@media (max-width: 480px) {
	.aiec-chat-widget {
		bottom: 16px;
	}

	.aiec-chat-window {
		width: calc(100vw - 24px);
		max-width: calc(100vw - 24px);
		height: min(74vh, 560px);
	}
}
/* ─────────────────────────────────────────────────────────
   Phase 2 — matched door results
   ───────────────────────────────────────────────────────── */
.aiec-door-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
	gap: 10px;
	margin: 4px 0 6px;
	width: 100%;
	animation: aiec-fade-in .25s ease both;
}

.aiec-door-card {
	background: #fff;
	border: 1.5px solid #e0e7ff;
	border-radius: 12px;
	overflow: hidden;
	transition: border-color .15s ease, transform .15s ease;
}

.aiec-door-card:hover {
	border-color: #a5b4fc;
	transform: translateY(-1px);
}

.aiec-door-img {
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	display: block;
	background: #f5f7ff;
}

.aiec-door-noimg {
	width: 100%;
	aspect-ratio: 4 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #f5f7ff;
	color: #9aa2b1;
	font-size: 11px;
}

.aiec-door-body {
	padding: 8px 10px 10px;
}

.aiec-door-title {
	font-size: 13px;
	font-weight: 600;
	color: #1f2937;
	line-height: 1.3;
	margin-bottom: 5px;
}

.aiec-door-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
}

.aiec-door-chip {
	font-size: 10px;
	font-weight: 600;
	padding: 2px 7px;
	border-radius: 999px;
	background: #eef2ff;
	color: #4338ca;
	border: 1px solid #e0e7ff;
}

@keyframes aiec-fade-in {
	from { opacity: 0; transform: translateY(4px); }
	to   { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
	.aiec-door-grid { animation: none; }
	.aiec-door-card:hover { transform: none; }
}

@media (max-width: 480px) {
	.aiec-door-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
}

/* ─────────────────────────────────────────────────────────
   Phase 3 — free-text/AI chat, image upload, summary, profile
   ───────────────────────────────────────────────────────── */

/* Upload (paperclip) button next to the text input. */
.aiec-chat-upload {
	-webkit-appearance: none;
	appearance: none;
	background: #eef2ff;
	border: 1.5px solid #e0e7ff;
	border-radius: 50%;
	width: 34px;
	height: 34px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	color: #4338ca;
	cursor: pointer;
	transition: background .15s, border-color .15s;
}

.aiec-chat-upload:hover {
	background: #e0e7ff;
	border-color: #c7d2fe;
}

.aiec-chat-upload:disabled {
	opacity: .5;
	cursor: default;
}

/* Image bubble the visitor sees after uploading a photo. */
.aiec-msg-image img {
	display: block;
	max-width: 220px;
	max-height: 220px;
	border-radius: 10px;
	object-fit: cover;
}

.aiec-msg-user.aiec-msg-image {
	padding: 6px;
	background: transparent;
}

.aiec-msg-user.aiec-msg-image img {
	border: 2px solid var(--aiec-primary);
}

/* AI-generated "new look" image result card. */
.aiec-generated-image {
	align-self: flex-start;
	max-width: 82%;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	padding: 10px;
}

.aiec-generated-image img {
	display: block;
	width: 100%;
	border-radius: 8px;
	margin-bottom: 6px;
}

.aiec-generated-image-label {
	font-size: 11.5px;
	font-weight: 600;
	color: #6366f1;
}

/* Summary card shown before the contact-details questions. */
.aiec-summary-card {
	align-self: flex-start;
	max-width: 90%;
	background: #fff;
	border: 1.5px solid #e0e7ff;
	border-radius: 14px;
	border-bottom-left-radius: 4px;
	padding: 12px 14px;
	font-size: 13.5px;
	line-height: 1.7;
}

.aiec-summary-card strong { color: #1e293b; }

.aiec-summary-row {
	display: flex;
	gap: 6px;
}

.aiec-summary-row .aiec-summary-label {
	min-width: 92px;
	color: #6366f1;
	font-weight: 700;
}