/* AI Agent Alex widget — scoped, theme-agnostic. */
#alex-widget-root {
	--alex-primary: #6d4aff;
	--alex-primary-dark: #4f32d6;
	--alex-user-bubble: #6d4aff;
	--alex-bot-bubble: #ffffff;
	--alex-launcher-size: 60px;
	--alex-chat-radius: 16px;
	--alex-icon-radius: 50%;
	--alex-icon-fit: cover;
	--alex-bg: #ffffff;
	--alex-text: #1f2430;
	--alex-muted: #6b7280;
	--alex-margin-x: 20px;
	--alex-margin-y: 20px;
	position: fixed;
	right: var(--alex-margin-x);
	bottom: var(--alex-margin-y);
	z-index: 2147483640;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	font-size: 14px;
	line-height: 1.45;
}

#alex-widget-root.alex-pos-left { right: auto; left: var(--alex-margin-x); }
#alex-widget-root.alex-pos-left .alex-panel-chat { right: auto; left: 0; }

#alex-widget-root * { box-sizing: border-box; }

#alex-widget-root .alex-launcher {
	width: var(--alex-launcher-size);
	height: var(--alex-launcher-size);
	padding: 0;
	border-radius: var(--alex-icon-radius);
	border: none;
	background: var(--alex-primary);
	color: #fff;
	font-weight: 700;
	font-size: 13px;
	cursor: pointer;
	overflow: hidden;
	box-shadow: 0 8px 24px rgba( 79, 50, 214, 0.35 );
	transition: transform 0.15s ease, box-shadow 0.15s ease;
}
#alex-widget-root .alex-launcher:hover { transform: scale( 1.06 ); box-shadow: 0 10px 28px rgba( 79, 50, 214, 0.45 ); }
#alex-widget-root .alex-launcher-img {
	width: 100%;
	height: 100%;
	object-fit: var(--alex-icon-fit);
	display: block;
	border-radius: var(--alex-icon-radius);
	background: #fff;
	image-rendering: -webkit-optimize-contrast;
}
/* In "contain" mode, give non-square logos a clean white pad so they don't
   float awkwardly on the colored launcher. */
#alex-widget-root[data-fit="contain"] .alex-launcher-img {
	padding: 14%;
	background: #fff;
}

#alex-widget-root .alex-panel-chat {
	position: absolute;
	right: 0;
	bottom: 74px;
	width: 360px;
	max-width: calc( 100vw - 40px );
	height: 520px;
	max-height: calc( 100vh - 120px );
	background: var(--alex-bg);
	border-radius: var(--alex-chat-radius);
	box-shadow: 0 20px 50px rgba( 0, 0, 0, 0.22 );
	display: flex;
	flex-direction: column;
	overflow: hidden;
}

#alex-widget-root .alex-header {
	background: var(--alex-primary);
	color: #fff;
	padding: 14px 16px;
	display: flex;
	align-items: center;
	gap: 10px;
}
#alex-widget-root .alex-header-avatar {
	width: 32px;
	height: 32px;
	border-radius: var(--alex-icon-radius);
	object-fit: var(--alex-icon-fit);
	border: 2px solid rgba( 255, 255, 255, 0.85 );
	flex: 0 0 auto;
}
#alex-widget-root .alex-header-title { font-weight: 700; flex: 1; }
#alex-widget-root .alex-close {
	background: none; border: none; color: #fff;
	font-size: 22px; line-height: 1; cursor: pointer;
}

#alex-widget-root .alex-body {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: #f7f7fb;
}

#alex-widget-root .alex-row {
	display: flex;
	align-items: flex-end;
	gap: 8px;
	max-width: 100%;
}
#alex-widget-root .alex-row-user { justify-content: flex-end; }
#alex-widget-root .alex-row-assistant { justify-content: flex-start; }
#alex-widget-root .alex-msg-avatar {
	width: 28px;
	height: 28px;
	border-radius: var(--alex-icon-radius);
	object-fit: var(--alex-icon-fit);
	flex: 0 0 auto;
	border: 1px solid #e7e7ef;
}

#alex-widget-root .alex-msg {
	max-width: 82%;
	padding: 9px 13px;
	border-radius: 14px;
	white-space: pre-wrap;
	word-wrap: break-word;
}
#alex-widget-root .alex-msg-user {
	background: var(--alex-user-bubble);
	color: #fff;
	border-bottom-right-radius: 4px;
}
#alex-widget-root .alex-msg-assistant {
	background: var(--alex-bot-bubble);
	color: var(--alex-text);
	border: 1px solid #e7e7ef;
	border-bottom-left-radius: 4px;
}
#alex-widget-root .alex-typing { opacity: 0.6; font-style: italic; }

#alex-widget-root .alex-composer {
	border-top: 1px solid #ececf3;
	padding: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fff;
}
#alex-widget-root .alex-input {
	width: 100%;
	border: 1px solid #d7d7e2;
	border-radius: 10px;
	padding: 9px 11px;
	font: inherit;
	resize: none;
	color: var(--alex-text);
	background: #fff;
}
#alex-widget-root .alex-input:focus { outline: 2px solid var(--alex-primary); border-color: transparent; }

#alex-widget-root .alex-controls { display: flex; align-items: center; gap: 8px; justify-content: flex-end; }
#alex-widget-root .alex-attach {
	cursor: pointer; font-size: 18px; padding: 4px 8px; border-radius: 8px;
	margin-right: auto;
}
#alex-widget-root .alex-attach.alex-attached { background: #e9e3ff; }
#alex-widget-root .alex-send {
	background: var(--alex-primary); color: #fff; border: none;
	border-radius: 10px; padding: 9px 18px; font-weight: 600; cursor: pointer;
}
#alex-widget-root .alex-send:hover { background: var(--alex-primary-dark); }
#alex-widget-root .alex-send:disabled { opacity: 0.6; cursor: default; }

#alex-widget-root .alex-offline { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
#alex-widget-root .alex-offline-msg { color: var(--alex-muted); margin: 0 0 4px; }
#alex-widget-root .alex-offline-status { color: var(--alex-primary-dark); font-weight: 600; margin: 4px 0 0; }

/* ---------- Product cards in chat ---------- */
#alex-widget-root .alex-cards-row {
	display: flex;
	flex-direction: column;
	gap: 8px;
	margin: 2px 0 6px 36px;
}
#alex-widget-root .alex-card-mini {
	display: flex;
	flex-direction: column;
	gap: 8px;
	background: #fff;
	border: 1px solid #e7e7ef;
	border-radius: 12px;
	padding: 10px;
	box-shadow: 0 2px 8px rgba( 0, 0, 0, 0.05 );
}
#alex-widget-root .alex-card-link {
	display: flex;
	align-items: center;
	gap: 10px;
	min-width: 0;
	text-decoration: none;
	color: var(--alex-text);
}
#alex-widget-root .alex-card-img {
	width: 48px;
	height: 48px;
	border-radius: 8px;
	object-fit: cover;
	flex: 0 0 auto;
	background: #f3f3f8;
}
#alex-widget-root .alex-card-info { min-width: 0; flex: 1; }
#alex-widget-root .alex-card-name {
	display: block;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.25;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	white-space: normal;
}
#alex-widget-root .alex-card-meta { display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
#alex-widget-root .alex-card-price { font-size: 13px; color: var(--alex-primary-dark); font-weight: 700; }
#alex-widget-root .alex-card-oos { font-size: 11px; color: #b23a48; }
#alex-widget-root .alex-card-btn {
	width: 100%;
	border: none;
	background: var(--alex-primary);
	color: #fff;
	border-radius: 8px;
	padding: 8px 12px;
	font-size: 12px;
	font-weight: 600;
	cursor: pointer;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}
#alex-widget-root .alex-card-btn:hover { background: var(--alex-primary-dark); }
#alex-widget-root .alex-card-btn:disabled { opacity: 0.7; }
#alex-widget-root .alex-card-btn-done { background: #1a8a5a; }