/* AskMeAgent chat — covers two render modes:
 *   1. Floating widget (.askmeagent-widget, .askmeagent-panel, .askmeagent-msg etc.)
 *   2. Inline shortcode (.askmeagent-shortcode, reuses theme classes: .chatbox_wrapper, .chat_box, .chat_pic, .chat_name, .chat_text)
 *
 * Inline shortcode mostly inherits theme styles; we only ship minimal fallbacks. Floating
 * widget is self-contained.
 */

/* ─── FLOATING WIDGET (mode 1) ───────────────────────────── */

.askmeagent-widget {
	/* Defaults — can be overridden per-site via the brand color setting (injects --askmeagent-primary inline). */
	--askmeagent-primary: #daed4e;
	--askmeagent-primary-contrast: #1e1e1e;
	--askmeagent-surface: #ffffff;
	--askmeagent-surface-alt: #f8faec;
	--askmeagent-text: #1a1a1a;
	--askmeagent-text-muted: #555555;
	--askmeagent-border: #d7dee0;
	--askmeagent-user-bubble: #f3f8d6;
	--askmeagent-error-bg: #fde2e2;
	--askmeagent-error-text: #7a1a1a;
	--askmeagent-notice-bg: #fff7e1;
	--askmeagent-notice-border: #e2c46f;
	--askmeagent-transition: 0.15s ease;

	position: fixed;
	inset-inline-end: 12px;
	inset-block-end: calc(12px + env(safe-area-inset-bottom, 0px));
	z-index: 99998;
	font-family: inherit;
}

.askmeagent-toggle {
	min-width: 48px;
	min-height: 48px;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	border: none;
	background: var(--askmeagent-primary);
	color: var(--askmeagent-primary-contrast);
	cursor: pointer;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	transition: transform var(--askmeagent-transition);
}
.askmeagent-toggle:hover { transform: scale(1.05); }
.askmeagent-toggle:focus-visible {
	outline: 3px solid var(--askmeagent-primary);
	outline-offset: 3px;
}
.askmeagent-toggle-icon--svg {
	width: 28px;
	height: 28px;
}
.askmeagent-toggle-icon--img {
	width: 36px;
	height: 36px;
	border-radius: 50%;
	object-fit: cover;
	display: block;
}

/* Empty state — welcome message + starter buttons (shown when log has no messages yet) */
.askmeagent-empty-state {
	display: flex;
	flex-direction: column;
	gap: 10px;
	padding: 4px 0;
}
.askmeagent-welcome {
	background: var(--askmeagent-surface-alt);
	color: var(--askmeagent-text);
	border-radius: 12px;
	padding: 10px 12px;
	font-size: 14px;
	line-height: 1.4;
}
.askmeagent-starter-buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px;
	margin-top: 8px;
}
/* Drop to 1 column on very narrow widget containers (<300px panel width) */
@media (max-width: 360px) {
	.askmeagent-starter-buttons {
		grid-template-columns: 1fr;
	}
}
/* !important on bg + color + border to survive theme button resets
   (themes commonly do `button { background: transparent; border: none; }`). */
.askmeagent-starter-btn {
	text-align: center;
	background: var(--askmeagent-primary) !important;
	background-color: var(--askmeagent-primary) !important;
	background-image: none !important;
	color: var(--askmeagent-primary-contrast) !important;
	border: 1.5px solid var(--askmeagent-primary) !important;
	border-radius: 999px;
	padding: 9px 12px;
	font-size: 13px;
	line-height: 1.3;
	cursor: pointer;
	transition: filter var(--askmeagent-transition), transform var(--askmeagent-transition), box-shadow var(--askmeagent-transition);
	font-family: inherit;
	font-weight: 500;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.askmeagent-starter-btn:hover {
	background: var(--askmeagent-primary) !important;
	background-color: var(--askmeagent-primary) !important;
	color: var(--askmeagent-primary-contrast) !important;
	filter: brightness(0.92);
	transform: translateY(-1px);
	box-shadow: 0 2px 6px rgba(0, 0, 0, 0.12);
}
.askmeagent-starter-btn:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 2px;
}

.askmeagent-panel {
	position: fixed;
	inset: 0;
	background: var(--askmeagent-surface);
	display: flex;
	flex-direction: column;
	overflow: hidden;
	padding-block-start: env(safe-area-inset-top, 0px);
	padding-block-end: env(safe-area-inset-bottom, 0px);
	color: var(--askmeagent-text);
}
.askmeagent-panel[hidden] { display: none; }

@media (min-width: 768px) {
	.askmeagent-panel {
		inset: auto;
		inset-inline-end: 12px;
		inset-block-end: 80px;
		width: min(400px, calc(100vw - 24px));
		height: min(560px, calc(100vh - 120px));
		border-radius: 12px;
		box-shadow: 0 12px 40px rgba(0, 0, 0, 0.25);
	}
}
@media (min-width: 1025px) {
	.askmeagent-panel {
		width: 380px;
		height: 600px;
		inset-inline-end: 20px;
		inset-block-end: 90px;
	}
	.askmeagent-widget {
		inset-inline-end: 20px;
		inset-block-end: calc(20px + env(safe-area-inset-bottom, 0px));
	}
}

.askmeagent-header {
	background: var(--askmeagent-primary);
	color: var(--askmeagent-primary-contrast);
	padding: 12px 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
}
.askmeagent-title {
	font-size: 16px;
	font-weight: 600;
	margin: 0;
	color: var(--askmeagent-primary-contrast);
}
.askmeagent-close {
	min-width: 44px;
	min-height: 44px;
	background: none;
	border: none;
	color: var(--askmeagent-primary-contrast);
	font-size: 28px;
	line-height: 1;
	cursor: pointer;
	padding: 0 8px;
}
.askmeagent-close:focus-visible {
	outline: 2px solid var(--askmeagent-primary-contrast);
	outline-offset: 2px;
}

.askmeagent-log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--askmeagent-surface-alt);
	font-size: 14px;
	line-height: 1.5;
}
.askmeagent-msg {
	max-width: 85%;
	padding: 10px 12px;
	border-radius: 12px;
	word-wrap: break-word;
}
.askmeagent-msg.user {
	background: var(--askmeagent-user-bubble);
	color: var(--askmeagent-text);
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}
.askmeagent-msg.assistant {
	background: var(--askmeagent-surface);
	color: var(--askmeagent-text);
	border: 1px solid var(--askmeagent-border);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}
.askmeagent-msg.system {
	background: var(--askmeagent-notice-bg);
	border: 1px solid var(--askmeagent-notice-border);
	color: var(--askmeagent-text);
	font-size: 13px;
	align-self: center;
	text-align: center;
	max-width: 100%;
}
.askmeagent-msg.error {
	background: var(--askmeagent-error-bg);
	color: var(--askmeagent-error-text);
	border: 1px solid #f4a8a8;
	align-self: center;
	text-align: center;
}
.askmeagent-sources {
	margin-top: 6px;
	font-size: 12px;
	color: var(--askmeagent-text-muted);
}
.askmeagent-sources a {
	color: var(--askmeagent-primary);
	text-decoration: underline;
}

.askmeagent-widget .askmeagent-form {
	display: flex;
	gap: 6px;
	padding: 10px;
	background: var(--askmeagent-surface);
	border-block-start: 1px solid var(--askmeagent-border);
}
.askmeagent-widget .askmeagent-form input[type="text"] {
	flex: 1;
	min-height: 44px;
	padding: 10px 12px;
	border: 1px solid var(--askmeagent-border);
	border-radius: 6px;
	font-size: 14px;
	color: var(--askmeagent-text);
	background: var(--askmeagent-surface);
}
.askmeagent-widget .askmeagent-form input[type="text"]:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 1px;
	border-color: transparent;
}
.askmeagent-widget .askmeagent-form button {
	min-width: 64px;
	min-height: 44px;
	padding: 10px 16px;
	background: var(--askmeagent-primary);
	color: var(--askmeagent-primary-contrast);
	border: none;
	border-radius: 6px;
	cursor: pointer;
	font-weight: 600;
}
.askmeagent-widget .askmeagent-form button:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 2px;
}
.askmeagent-widget .askmeagent-form button:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.askmeagent-typing {
	color: var(--askmeagent-text-muted);
	font-style: italic;
	align-self: flex-start;
}

.askmeagent-footer {
	padding: 6px 12px;
	font-size: 11px;
	color: var(--askmeagent-text-muted);
	background: var(--askmeagent-surface);
	border-block-start: 1px solid var(--askmeagent-border);
	text-align: center;
}
.askmeagent-footer a {
	color: var(--askmeagent-text-muted);
	text-decoration: underline;
}

.screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute !important;
	width: 1px;
	word-wrap: normal !important;
}

.askmeagent-widget[data-state="closed"] .askmeagent-panel { display: none; }

@media (prefers-color-scheme: dark) {
	.askmeagent-widget {
		--askmeagent-surface: #1a1d1f;
		--askmeagent-surface-alt: #131618;
		--askmeagent-text: #f1f3f4;
		--askmeagent-text-muted: #b0b4b6;
		--askmeagent-border: #2f3539;
		--askmeagent-user-bubble: #1f5f60;
		--askmeagent-error-bg: #5a1f1f;
		--askmeagent-error-text: #f8d7d7;
		--askmeagent-notice-bg: #4a3a14;
		--askmeagent-notice-border: #8a6a2e;
	}
}

@media (prefers-reduced-motion: reduce) {
	.askmeagent-toggle,
	.askmeagent-toggle:hover,
	.askmeagent-widget .askmeagent-form button,
	.askmeagent-panel,
	.askmeagent-msg {
		transition: none !important;
		animation: none !important;
		transform: none !important;
	}
}

@media print {
	.askmeagent-widget { display: none !important; }
}

/* ─── INLINE SHORTCODE (mode 2) ─────────────────────────── */
/* Inherits .chatbox_wrapper, .chat_box, .chat_pic, .chat_name, .chat_text from theme. */

.askmeagent-shortcode .askmeagent-input:focus-visible,
.askmeagent-shortcode .askmeagent-send:focus-visible,
.askmeagent-shortcode .askmeagent-refresh:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 2px;
}

/* Consent button — shared by floating widget + shortcode. Uses brand color so
   it reads as the same UI element wherever it appears. !important on bg/color/border
   to survive theme button resets (same reason as .askmeagent-starter-btn). */
.askmeagent-consent-btn {
	background: var(--askmeagent-primary) !important;
	background-color: var(--askmeagent-primary) !important;
	background-image: none !important;
	color: var(--askmeagent-primary-contrast) !important;
	border: 0 !important;
	border-radius: 4px;
	padding: 4px 12px;
	margin-left: 6px;
	cursor: pointer;
	font-family: inherit;
	font-weight: 500;
	transition: filter var(--askmeagent-transition);
}
.askmeagent-consent-btn:hover {
	filter: brightness(0.92);
}
.askmeagent-consent-btn[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}
.askmeagent-consent-btn:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 2px;
}

.askmeagent-shortcode .askmeagent-error-msg .chat_text {
	color: #ffb3b3;
}

@media (prefers-reduced-motion: reduce) {
	.askmeagent-shortcode .chat_text .dots span {
		animation: none !important;
		opacity: 1;
	}
}

/* ─── Inline action buttons (ticket flow Yes/No/Cancel + quick replies) ── */
.askmeagent-inline-actions {
	background: transparent !important;
}
.askmeagent-inline-btns {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 4px 0 6px;
}
.askmeagent-quick-btn {
	background: var(--askmeagent-primary) !important;
	background-color: var(--askmeagent-primary) !important;
	background-image: none !important;
	color: var(--askmeagent-primary-contrast) !important;
	border: 0 !important;
	border-radius: 16px;
	padding: 6px 14px;
	font-family: inherit;
	font-size: 13px;
	font-weight: 500;
	line-height: 1.2;
	cursor: pointer;
	transition: filter var(--askmeagent-transition, 0.15s ease);
}
.askmeagent-quick-btn:hover {
	filter: brightness(0.92);
}
.askmeagent-quick-btn[disabled] {
	opacity: 0.5;
	cursor: default;
}
.askmeagent-quick-btn:focus-visible {
	outline: 2px solid var(--askmeagent-primary);
	outline-offset: 2px;
}