/**
 * Chelure Assistant widget.
 *
 * Uses the theme's design tokens throughout, so it follows the light/dark
 * toggle without any extra work.
 *
 * @package Chelure_Enterprise
 */

.ce-bot {
	position: fixed;
	right: 24px;
	bottom: 24px;
	z-index: 940;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.ce-bot[hidden] { display: none; }

/* --- Launcher ------------------------------------------------------------ */
.ce-bot__toggle {
	width: 58px;
	height: 58px;
	border-radius: 50%;
	border: 0;
	background: var(--ce-gradient);
	color: #fff;
	display: grid;
	place-items: center;
	box-shadow: var(--ce-shadow-cta);
	transition: transform var(--ce-dur) var(--ce-ease), box-shadow var(--ce-dur) var(--ce-ease);
	order: 2;
}

.ce-bot__toggle:hover { transform: scale(1.06); }
.ce-bot__toggle > span { grid-area: 1 / 1; display: grid; place-items: center; }
.ce-bot__toggle-close { opacity: 0; transform: rotate(-90deg); transition: all var(--ce-dur) var(--ce-ease); }
.ce-bot__toggle-open  { opacity: 1; transition: all var(--ce-dur) var(--ce-ease); }
.ce-bot.is-open .ce-bot__toggle-open  { opacity: 0; transform: rotate(90deg); }
.ce-bot.is-open .ce-bot__toggle-close { opacity: 1; transform: none; }

/* --- Panel --------------------------------------------------------------- */
.ce-bot__panel {
	width: min(380px, calc(100vw - 40px));
	height: min(520px, calc(100vh - 140px));
	display: flex;
	flex-direction: column;
	background: var(--ce-bg);
	border: 1px solid var(--ce-border-3);
	border-radius: var(--ce-radius-lg);
	box-shadow: 0 24px 70px rgba(40, 20, 70, .22);
	overflow: hidden;
	opacity: 0;
	transform: translateY(12px) scale(.98);
	transform-origin: bottom right;
	transition: opacity var(--ce-dur) var(--ce-ease), transform var(--ce-dur) var(--ce-ease);
	order: 1;
}

[data-theme="dark"] .ce-bot__panel { box-shadow: 0 24px 70px rgba(0, 0, 0, .55); }
.ce-bot__panel[hidden] { display: none; }
.ce-bot.is-open .ce-bot__panel { opacity: 1; transform: none; }

.ce-bot__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 20px;
	background: var(--ce-gradient);
	color: #fff;
}

.ce-bot__dot {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: #4ade80;
	box-shadow: 0 0 0 3px rgba(255, 255, 255, .25);
	flex: 0 0 9px;
}

.ce-bot__name   { font-family: var(--ce-font-heading); font-weight: var(--ce-fw-bold); font-size: var(--ce-fs-body); }
.ce-bot__status { font-size: 12px; opacity: .85; }

/* --- Message log --------------------------------------------------------- */
.ce-bot__log {
	flex: 1;
	overflow-y: auto;
	padding: 20px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--ce-surface);
}

.ce-bot__msg {
	max-width: 85%;
	padding: 12px 16px;
	border-radius: 16px;
	font-size: var(--ce-fs-sm);
	line-height: 1.6;
	white-space: pre-wrap;
	word-break: break-word;
}

.ce-bot__msg--bot {
	align-self: flex-start;
	background: var(--ce-surface-3);
	border: 1px solid var(--ce-border);
	color: var(--ce-text);
	border-bottom-left-radius: 4px;
}

.ce-bot__msg--me {
	align-self: flex-end;
	background: var(--ce-gradient);
	color: #fff;
	border-bottom-right-radius: 4px;
}

.ce-bot__msg--pending {
	align-self: flex-start;
	background: var(--ce-surface-3);
	color: var(--ce-muted);
	font-style: italic;
	border-bottom-left-radius: 4px;
}

.ce-bot__cta {
	align-self: flex-start;
	font-size: var(--ce-fs-sm);
	font-weight: var(--ce-fw-semibold);
	color: var(--ce-accent);
}

/* --- Composer ------------------------------------------------------------ */
.ce-bot__form {
	display: flex;
	gap: 8px;
	padding: 14px;
	border-top: 1px solid var(--ce-line);
	background: var(--ce-bg);
}

.ce-bot__input {
	flex: 1;
	min-width: 0;
	padding: 12px 14px;
	border-radius: var(--ce-radius-pill);
	border: 1px solid var(--ce-border-3);
	background: var(--ce-surface-3);
	color: var(--ce-heading);
	font-size: var(--ce-fs-sm);
}

.ce-bot__input:focus {
	outline: none;
	border-color: var(--ce-magenta);
	box-shadow: 0 0 0 3px rgba(236, 30, 156, .15);
}

.ce-bot__send {
	width: 42px;
	height: 42px;
	flex: 0 0 42px;
	border: 0;
	border-radius: 50%;
	background: var(--ce-gradient);
	color: #fff;
	display: grid;
	place-items: center;
}

.ce-bot__note {
	margin: 0;
	padding: 0 16px 12px;
	font-size: 11px;
	color: var(--ce-muted-soft);
	text-align: center;
	background: var(--ce-bg);
}

@media (max-width: 680px) {
	.ce-bot { right: 16px; bottom: 16px; }
	.ce-bot__panel { height: min(70vh, 520px); }
}

@media (prefers-reduced-motion: reduce) {
	.ce-bot__panel,
	.ce-bot__toggle,
	.ce-bot__toggle-open,
	.ce-bot__toggle-close { transition: none; }
}