/**
 * ALIAI – chat UI. Font: Albert Sans.
 */
.ams-form-wrapper {
	--ams-font: 'Albert Sans', -apple-system, BlinkMacSystemFont, sans-serif;
	--ams-bg: #f8f9fa;
	--ams-surface: #ffffff;
	--ams-user-bg: #1a1d21;
	--ams-user-text: #ffffff;
	--ams-answer-bg: #ffffff;
	--ams-answer-text: #1a1d21;
	--ams-answer-border: #e8eaed;
	--ams-error-bg: #fef2f2;
	--ams-error-text: #b91c1c;
	--ams-typing-bg: #eef0f2;
	--ams-typing-text: #5f6368;
	--ams-input-bg: #eef0f2;
	--ams-input-placeholder: #80868b;
	--ams-btn-bg: #1a1d21;
	--ams-btn-hover: #2d3238;
	--ams-radius: 16px;
	--ams-radius-sm: 12px;
	--ams-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
	--ams-shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);

	max-width: 100%;
	margin: 1.5em 0;
	font-family: var(--ams-font);
	box-shadow: var(--ams-shadow-lg);
	border-radius: var(--ams-radius);
	overflow: hidden;
	background: var(--ams-input-bg);
}

/* External greeting (Elementor section) – add class via JS and slide it up on chat start */
.ams-ext-greeting {
	transition: transform 0.4s ease, opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
	overflow: hidden;
}

.ams-ext-greeting.ams-ext-greeting--hidden {
	transform: translateY(-100%);
	opacity: 0;
	max-height: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
}

.ams-ext-greeting.ams-ext-greeting--collapsed {
	display: none;
}


/* Below three boxes – slide down and hide when Ask Ali / chat starts; textarea area takes the space */
.ams-below-boxes {
	/* Explicit max-height so transition from this to 0 runs smoothly (auto → 0 often doesn’t animate). */
	max-height: 80vh;
	transition: transform 0.4s ease, opacity 0.4s ease, max-height 0.4s ease, margin 0.4s ease, padding 0.4s ease;
	overflow: hidden;
}

.ams-below-boxes.ams-below-boxes--hidden {
	transform: translateY(100%);
	opacity: 0;
	max-height: 0 !important;
	margin-top: 0;
	margin-bottom: 0;
	padding-top: 0;
	padding-bottom: 0;
	pointer-events: none;
	visibility: hidden;
}

/* Kept for any manual use; we no longer add --collapsed from JS to avoid reflow jump */
.ams-below-boxes.ams-below-boxes--collapsed {
	display: none;
}

/* Chat area – only this scrolls; long answers expand naturally */
.ams-chat {
	background: var(--ams-bg);
	border-bottom: 1px solid var(--ams-answer-border);
/* 	min-height: 140px; */
	max-height: 650px;
	display: flex;
	flex-direction: column;
}

.ams-chat-messages {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 1.25em 1.25em 1em;
	display: flex;
	flex-direction: column;
	gap: 1em;
/* 	min-height: 60px; */
	-webkit-overflow-scrolling: touch;
}

.ams-chat-messages::-webkit-scrollbar {
	width: 8px;
}

.ams-chat-messages::-webkit-scrollbar-track {
	background: transparent;
}

.ams-chat-messages::-webkit-scrollbar-thumb {
	background: #c4c7cc;
	border-radius: 4px;
}

.ams-chat-messages::-webkit-scrollbar-thumb:hover {
	background: #a8abb2;
}

.ams-chat-msg {
	display: flex;
	align-items: flex-end;
	max-width: 100%;
	animation: ams-msg-in 0.25s ease;
}

@keyframes ams-msg-in {
	from {
		opacity: 0;
		transform: translateY(6px);
	}
	to {
		opacity: 1;
		transform: translateY(0);
	}
}

.ams-chat-msg--user {
	justify-content: flex-end;
}

.ams-chat-msg--assistant,
.ams-chat-msg--error,
.ams-chat-msg--typing {
	justify-content: flex-start;
}

.ams-chat-bubble {
	max-width: 82%;
	padding: 0.75em 1.1em;
	border-radius: var(--ams-radius-sm);
	line-height: 1.55;
	word-wrap: break-word;
	white-space: pre-wrap;
	font-size: 0.9375rem;
	font-family: var(--ams-font);
	box-sizing: border-box;
}

/* No scroll inside bubble – long answers expand; chat area scrolls */
.ams-chat-bubble--user {
	background: var(--ams-user-bg);
	color: var(--ams-user-text);
	border-bottom-right-radius: 4px;
	box-shadow: var(--ams-shadow);
	font-weight: 500;
}

.ams-chat-bubble--assistant {
	background: var(--ams-answer-bg);
	color: var(--ams-answer-text);
	border: 1px solid var(--ams-answer-border);
	border-bottom-left-radius: 4px;
	box-shadow: var(--ams-shadow);
}

.ams-chat-bubble--error {
	background: var(--ams-error-bg);
	color: var(--ams-error-text);
	border: 1px solid #fecaca;
	border-bottom-left-radius: 4px;
	font-weight: 500;
}

.ams-chat-bubble--typing {
	background: var(--ams-typing-bg);
	color: var(--ams-typing-text);
	border-bottom-left-radius: 4px;
	font-style: italic;
	font-weight: 500;
	margin: 150px 0;
}

/* Input bar */
.ams-message-form.ams-chat-bar {
	min-height: 52px;
	background: var(--ams-input-bg);
	border-radius: 0 0 var(--ams-radius) var(--ams-radius);
	overflow: hidden;
	padding: 8px;
}

.ams-chat-bar .ams-input-wrap {
	position: relative;
	width: 100%;
	height: 100%;
	min-height: 38px;
}

.ams-chat-bar .ams-input {
	width: 100%;
	min-height: 106px;
	padding: 1.7em 1em 1.7em 1em;
	padding-right: 7.25em;
	margin: 0;
	border: none;
	border-radius: var(--ams-radius-sm);
	background: var(--ams-surface);
	font-family: var(--ams-font);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1.4;
	box-sizing: border-box;
	resize: none;
	display: block;
	box-shadow: var(--ams-shadow);
}

.ams-chat-bar .ams-input::placeholder {
	color: var(--ams-input-placeholder);
	font-weight: 400;
}

.ams-chat-bar .ams-input:focus {
	outline: none;
	box-shadow: 0 0 0 2px var(--ams-btn-bg);
}

.ams-submit.ams-ask-ali {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.55em 1.1em;
	margin: 0;
	border: none;
	border-radius: var(--ams-radius-sm);
	background: var(--ams-btn-bg);
	color: #fff;
	font-size: 0.9375rem;
	font-weight: 700;
	font-family: var(--ams-font);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
	z-index: 1;
	box-shadow: var(--ams-shadow);
}

.ams-chat-bar .ams-input-wrap:focus-within .ams-submit.ams-ask-ali {
	z-index: 2;
}

.ams-submit.ams-ask-ali:hover {
	background: var(--ams-btn-hover);
}

.ams-submit.ams-ask-ali:focus {
	outline: none;
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--ams-btn-bg);
}

.ams-submit.ams-ask-ali:disabled {
	cursor: not-allowed;
	opacity: 0.7;
}

/* Copy link to open chat elsewhere */
.ams-chat-share {
	margin: 0.75em 0 0;
	padding: 0 0.25em;
	font-size: 0.8125rem;
	font-family: var(--ams-font);
}

.ams-copy-link {
	background: none;
	border: none;
	color: #5f6368;
	text-decoration: underline;
	cursor: pointer;
	padding: 0;
	font-family: var(--ams-font);
	font-size: inherit;
}

.ams-copy-link:hover {
    color: #c36;
    background: white;
}

.ams-copy-link-feedback {
	margin-left: 0.5em;
	color: #00a32a;
}

/* Chat History toggle */
.ams-chat-header-row {
	margin-bottom: 0.5em;
}

.ams-history-toggle {
	background: none;
	border: 1px solid var(--ams-answer-border);
	border-radius: var(--ams-radius-sm);
	padding: 0.4em 0.75em;
	font-family: var(--ams-font);
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--ams-answer-text);
	cursor: pointer;
	transition: background 0.2s ease, border-color 0.2s ease;
}

.ams-history-toggle:hover {
	background: #c36;
	border-color: #c4c7cc;
}

/* Chat History panel – slide from right, light gray */
.ams-history-panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: 100%;
	max-width: 380px;
	z-index: 100001;
	background: #eef0f2;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	transform: translateX(100%);
	transition: transform 0.3s ease;
	display: flex;
	flex-direction: column;
}

.ams-history-panel.ams-history-panel--open {
	transform: translateX(0);
}

.ams-history-panel-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
	min-height: 0;
}

.ams-history-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.5em;
	padding: 1em 1rem;
	border-bottom: 1px solid #c4c7cc;
	background: #fff;
	flex-shrink: 0;
}

.ams-history-back {
	background: none;
	border: none;
	font-size: 1.25rem;
	color: #5f6368;
	cursor: pointer;
	padding: 0.25em;
	line-height: 1;
}

.ams-history-back:hover {
	color: #1a1d21;
}

.ams-history-title {
	margin: 0;
	font-family: var(--ams-font);
	font-size: 1.125rem;
	font-weight: 700;
	color: #1a1d21;
	flex: 1;
}

.ams-history-close {
	width: 2em;
	height: 2em;
	border: none;
	border-radius: 50%;
	background: #d63638;
	color: #fff;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	transition: background 0.2s ease;
}

.ams-history-close:hover {
	background: #b32d2e;
}

.ams-history-body {
	flex: 1;
	overflow-y: auto;
	overflow-x: hidden;
	padding: 0.75rem 1rem;
	min-height: 0;
}

.ams-history-list {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.ams-history-item {
	background: #fff;
	border: 1px solid var(--ams-answer-border);
	border-radius: var(--ams-radius-sm);
	padding: 0.75em 1em;
	cursor: pointer;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}

.ams-history-item:hover {
	background: #f8f9fa;
	box-shadow: var(--ams-shadow);
}

.ams-history-item-date {
	font-size: 0.8125rem;
	color: #5f6368;
	margin-bottom: 0.35em;
}

.ams-history-item-question {
	font-weight: 700;
	font-size: 0.9375rem;
	color: #1a1d21;
	line-height: 1.35;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.ams-history-empty {
	margin: 1em 0;
	text-align: center;
	color: #5f6368;
	font-size: 0.9375rem;
}

.ams-history-chat .ams-chat-msg {
	animation: ams-msg-in 0.25s ease;
}

.ams-history-messages {
	display: flex;
	flex-direction: column;
	gap: 0.75em;
}

.ams-history-footer {
	padding: 0.75rem 1rem;
	border-top: 1px solid #c4c7cc;
	background: #fff;
	flex-shrink: 0;
}

.ams-history-footer .ams-input-wrap {
	position: relative;
	min-height: 40px;
}

.ams-history-footer .ams-input {
	width: 100%;
	padding: 0.6em 1em 0.6em 1em;
	padding-right: 6.5em;
	border-radius: var(--ams-radius-sm);
	border: 1px solid var(--ams-answer-border);
	background: #fff;
	font-family: var(--ams-font);
	font-size: 0.9375rem;
}

.ams-history-footer .ams-ask-ali {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	padding: 0.45em 0.9em;
	font-size: 0.875rem;
}