/* ═══════════════════════════════════════════════════════════════
   Amaze Manors — AI Chatbot Widget
   Brand colours: primary #8c6e4c · dark #5a3f20 · light #f5f0ea
   Font: Montserrat (inherits from theme)
   ═══════════════════════════════════════════════════════════════ */

:root {
	--amc-primary : #8c6e4c;
	--amc-dark    : #5a3f20;
	--amc-light   : #f5f0ea;
	--amc-border  : rgba(140, 110, 76, 0.18);
	--amc-white   : #ffffff;
	--amc-ink     : #1a1a1a;
	--amc-shadow  : 0 24px 64px rgba(0, 0, 0, 0.16), 0 4px 16px rgba(0, 0, 0, 0.08);
	--amc-radius  : 18px;
	--amc-font    : 'Montserrat', ui-sans-serif, system-ui, sans-serif;
	--amc-ease    : cubic-bezier(0.34, 1.2, 0.64, 1);
}

/* ─── Widget container ────────────────────────────────────────── */
#amc-chat-widget {
	position   : fixed;
	bottom     : 24px;
	right      : 24px;
	z-index    : 999999;
	font-family: var(--amc-font);
	font-size  : 14px;
	line-height: 1.5;
	color      : var(--amc-ink);
}

/* ─── Toggle button ───────────────────────────────────────────── */
#amc-toggle {
	width          : 62px;
	height         : 62px;
	border-radius  : 50%;
	background     : var(--amc-dark);
	border         : none;
	cursor         : pointer;
	display        : flex;
	align-items    : center;
	justify-content: center;
	box-shadow     : 0 6px 24px rgba(90, 63, 32, 0.45);
	transition     : transform 0.25s var(--amc-ease), background 0.2s ease;
	position       : relative;
	outline        : none;
}

#amc-toggle:hover  { background: var(--amc-primary); transform: scale(1.07); }
#amc-toggle:focus-visible {
	outline: 3px solid var(--amc-primary);
	outline-offset: 3px;
}

/* Pulse ring to draw attention */
#amc-toggle::after {
	content      : '';
	position     : absolute;
	inset        : 0;
	border-radius: 50%;
	border       : 2px solid var(--amc-dark);
	animation    : amc-pulse 3s ease-out infinite;
	opacity      : 0;
}

@keyframes amc-pulse {
	0%   { transform: scale(1);   opacity: 0.55; }
	100% { transform: scale(1.7); opacity: 0; }
}

#amc-chat-widget.amc-open #amc-toggle::after { animation: none; }

#amc-toggle svg {
	width     : 26px;
	height    : 26px;
	fill      : var(--amc-white);
	transition: opacity 0.15s, transform 0.2s;
}

.amc-icon-close { display: none; }
#amc-chat-widget.amc-open .amc-icon-chat  { display: none; }
#amc-chat-widget.amc-open .amc-icon-close { display: block; }

/* Notification badge */
#amc-badge {
	position      : absolute;
	top           : -2px;
	right         : -2px;
	width         : 20px;
	height        : 20px;
	border-radius : 50%;
	background    : #e53e3e;
	border        : 2px solid #fff;
	display       : flex;
	align-items   : center;
	justify-content: center;
	font-size     : 10px;
	font-weight   : 700;
	color         : #fff;
	line-height   : 1;
}

/* ─── Chat window ─────────────────────────────────────────────── */
#amc-chat-window {
	position       : absolute;
	bottom         : 76px;
	right          : 0;
	width          : 390px;
	height         : 560px;
	background     : var(--amc-white);
	border-radius  : var(--amc-radius);
	box-shadow     : var(--amc-shadow);
	display        : flex;
	flex-direction : column;
	overflow       : hidden;
	opacity        : 0;
	pointer-events : none;
	transform      : translateY(20px) scale(0.96);
	transform-origin: bottom right;
	transition     : opacity 0.28s ease, transform 0.28s var(--amc-ease);
}

#amc-chat-widget.amc-open #amc-chat-window {
	opacity       : 1;
	pointer-events: all;
	transform     : translateY(0) scale(1);
}

/* ─── Header ──────────────────────────────────────────────────── */
#amc-header {
	background    : linear-gradient(135deg, var(--amc-dark) 0%, #7a5530 100%);
	padding       : 16px 20px;
	display       : flex;
	align-items   : center;
	gap           : 14px;
	flex-shrink   : 0;
}

.amc-avatar {
	width          : 44px;
	height         : 44px;
	border-radius  : 50%;
	background     : rgba(255, 255, 255, 0.15);
	display        : flex;
	align-items    : center;
	justify-content: center;
	flex-shrink    : 0;
}

.amc-avatar svg {
	width : 22px;
	height: 22px;
	fill  : var(--amc-white);
}

.amc-header-text { flex: 1; }

.amc-header-name {
	font-size     : 14px;
	font-weight   : 700;
	color         : var(--amc-white);
	letter-spacing: 0.04em;
	text-transform: uppercase;
}

.amc-header-sub {
	font-size  : 11.5px;
	color      : rgba(255, 255, 255, 0.72);
	margin-top : 3px;
	display    : flex;
	align-items: center;
	gap        : 6px;
}

.amc-dot {
	width        : 8px;
	height       : 8px;
	border-radius: 50%;
	background   : #4ade80;
	display      : inline-block;
	flex-shrink  : 0;
	box-shadow   : 0 0 0 2px rgba(74, 222, 128, 0.3);
}

/* ─── Messages area ───────────────────────────────────────────── */
#amc-messages {
	flex          : 1;
	overflow-y    : auto;
	padding       : 18px 16px 8px;
	display       : flex;
	flex-direction: column;
	gap           : 10px;
	scroll-behavior: smooth;
}

#amc-messages::-webkit-scrollbar        { width: 4px; }
#amc-messages::-webkit-scrollbar-track  { background: transparent; }
#amc-messages::-webkit-scrollbar-thumb  { background: var(--amc-border); border-radius: 4px; }

/* ─── Message bubbles ─────────────────────────────────────────── */
.amc-msg {
	display  : flex;
	max-width: 86%;
	animation: amc-in 0.22s ease;
}

@keyframes amc-in {
	from { opacity: 0; transform: translateY(10px); }
	to   { opacity: 1; transform: translateY(0); }
}

.amc-msg--bot  { align-self: flex-start; }
.amc-msg--user { align-self: flex-end; flex-direction: row-reverse; }

.amc-bubble {
	padding      : 10px 15px;
	border-radius: 16px;
	font-size    : 13.5px;
	line-height  : 1.58;
}

.amc-msg--bot .amc-bubble {
	background             : var(--amc-light);
	color                  : var(--amc-ink);
	border-bottom-left-radius: 4px;
}

.amc-msg--user .amc-bubble {
	background              : var(--amc-dark);
	color                   : var(--amc-white);
	border-bottom-right-radius: 4px;
}

/* ─── Typing indicator ────────────────────────────────────────── */
.amc-typing {
	display    : flex;
	align-items: center;
	gap        : 5px;
	padding    : 4px 2px;
}

.amc-typing span {
	width        : 7px;
	height       : 7px;
	border-radius: 50%;
	background   : var(--amc-primary);
	display      : block;
	animation    : amc-bounce 1.3s infinite;
	flex-shrink  : 0;
}

.amc-typing span:nth-child(2) { animation-delay: 0.18s; }
.amc-typing span:nth-child(3) { animation-delay: 0.36s; }

@keyframes amc-bounce {
	0%, 55%, 100% { transform: translateY(0); }
	28%           { transform: translateY(-7px); }
}

/* ─── Quick prompt chips ──────────────────────────────────────── */
#amc-quick-prompts {
	padding    : 4px 14px 10px;
	display    : flex;
	flex-wrap  : wrap;
	gap        : 7px;
	flex-shrink: 0;
}

.amc-q {
	font-family  : var(--amc-font);
	font-size    : 11px;
	font-weight  : 600;
	letter-spacing: 0.02em;
	padding      : 5px 13px;
	border-radius: 20px;
	border       : 1.5px solid var(--amc-border);
	background   : transparent;
	color        : var(--amc-primary);
	cursor       : pointer;
	transition   : background 0.18s, color 0.18s, border-color 0.18s;
	line-height  : 1.4;
}

.amc-q:hover {
	background  : var(--amc-primary);
	color       : var(--amc-white);
	border-color: var(--amc-primary);
}

/* ─── Input area ──────────────────────────────────────────────── */
#amc-input-wrap {
	display    : flex;
	align-items: flex-end;
	gap        : 8px;
	padding    : 10px 14px 12px;
	border-top : 1px solid var(--amc-border);
	background : var(--amc-white);
	flex-shrink: 0;
}

#amc-input {
	flex       : 1;
	font-family: var(--amc-font);
	font-size  : 13.5px;
	padding    : 10px 15px;
	border     : 1.5px solid var(--amc-border);
	border-radius: 24px;
	outline    : none;
	resize     : none;
	line-height: 1.5;
	max-height : 100px;
	transition : border-color 0.2s, background 0.2s;
	color      : var(--amc-ink);
	background : var(--amc-light);
	box-sizing : border-box;
}

#amc-input:focus {
	border-color: var(--amc-primary);
	background  : var(--amc-white);
}

#amc-input::placeholder { color: #aaa; }

#amc-send {
	width          : 42px;
	height         : 42px;
	border-radius  : 50%;
	background     : var(--amc-dark);
	border         : none;
	cursor         : pointer;
	display        : flex;
	align-items    : center;
	justify-content: center;
	flex-shrink    : 0;
	transition     : background 0.2s, transform 0.1s;
	outline        : none;
}

#amc-send:hover:not(:disabled) { background: var(--amc-primary); }
#amc-send:active:not(:disabled){ transform: scale(0.93); }

#amc-send:focus-visible {
	outline: 3px solid var(--amc-primary);
	outline-offset: 2px;
}

#amc-send svg {
	width : 18px;
	height: 18px;
	fill  : var(--amc-white);
}

#amc-send:disabled { opacity: 0.4; cursor: not-allowed; }

/* ─── Footer bar ──────────────────────────────────────────────── */
#amc-footer-bar {
	padding      : 5px 16px 7px;
	text-align   : center;
	font-size    : 10px;
	color        : #bbb;
	letter-spacing: 0.03em;
	background   : var(--amc-white);
	border-top   : 1px solid rgba(0, 0, 0, 0.04);
	flex-shrink  : 0;
}

/* ─── Mobile ──────────────────────────────────────────────────── */
@media (max-width: 480px) {
	#amc-chat-widget {
		bottom: 16px;
		right : 14px;
	}

	#amc-chat-window {
		width : calc(100vw - 28px);
		height: calc(100svh - 130px);
		right : 0;
	}
}