/*
 * Site assistant widget.
 *
 * Inherits the theme's design tokens where they exist and falls back to
 * literal values, so the widget still looks right if the plugin is used
 * with a different theme.
 */

.cs-chat {
	--c-ink: var(--ink, #0a0c12);
	--c-accent: var(--accent, #2f5bff);
	--c-border: var(--border, #e3e7ec);
	--c-muted: var(--text-muted, #5b6472);
	--c-paper: var(--paper, #fff);
	--c-paper-2: var(--paper-2, #f7f8fa);
	--c-radius: var(--radius, 14px);

	position: fixed;
	right: clamp(1rem, 3vw, 1.75rem);
	bottom: clamp(1rem, 3vw, 1.75rem);
	z-index: 900;
	font-family: var(--font-sans, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
}

/* ---------- launcher ---------- */

.cs-chat__launcher {
	display: inline-flex;
	align-items: center;
	gap: .55rem;
	padding: .8rem 1.2rem;
	border: 0;
	border-radius: 100px;
	background: var(--c-ink);
	color: #fff;
	font: inherit;
	font-size: .95rem;
	font-weight: 560;
	cursor: pointer;
	box-shadow: 0 12px 30px -12px rgba(10, 12, 18, .5);
	transition: transform .16s ease, background-color .16s ease;
}

.cs-chat__launcher:hover { background: #161a24; transform: translateY(-1px); }
.cs-chat__launcher:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }
.cs-chat__launcher svg { width: 18px; height: 18px; }
.cs-chat.is-open .cs-chat__launcher { display: none; }

/* ---------- panel ---------- */

.cs-chat__panel {
	display: none;
	flex-direction: column;
	width: min(400px, calc(100vw - 2rem));
	height: min(560px, calc(100vh - 3rem));
	background: var(--c-paper);
	border: 1px solid var(--c-border);
	border-radius: var(--c-radius);
	overflow: hidden;
	box-shadow: 0 30px 70px -30px rgba(10, 12, 18, .5);
}

.cs-chat.is-open .cs-chat__panel { display: flex; }

.cs-chat__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	padding: .95rem 1.1rem;
	background: var(--c-ink);
	color: #fff;
	flex-shrink: 0;
}

.cs-chat__head strong { font-size: .97rem; font-weight: 600; letter-spacing: -.01em; }
.cs-chat__head small { display: block; font-size: .74rem; color: #a3adbd; margin-top: .1rem; font-weight: 400; }

.cs-chat__close {
	background: none;
	border: 0;
	color: #a3adbd;
	cursor: pointer;
	padding: .3rem;
	line-height: 1;
	font-size: 1.35rem;
	border-radius: 6px;
	flex-shrink: 0;
}
.cs-chat__close:hover { color: #fff; }
.cs-chat__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }

/* ---------- log ---------- */

.cs-chat__log {
	flex: 1;
	overflow-y: auto;
	padding: 1.1rem;
	display: flex;
	flex-direction: column;
	gap: .85rem;
	background: var(--c-paper-2);
}

.cs-chat__msg {
	max-width: 88%;
	padding: .7rem .9rem;
	border-radius: 12px;
	font-size: .92rem;
	line-height: 1.55;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
}

.cs-chat__msg--bot {
	background: var(--c-paper);
	border: 1px solid var(--c-border);
	color: var(--ink, #14171f);
	align-self: flex-start;
	border-bottom-left-radius: 4px;
}

.cs-chat__msg--user {
	background: var(--c-accent);
	color: #fff;
	align-self: flex-end;
	border-bottom-right-radius: 4px;
}

.cs-chat__msg--thinking { color: var(--c-muted); font-style: italic; }

.cs-chat__sources {
	display: flex;
	flex-wrap: wrap;
	gap: .35rem;
	margin-top: .55rem;
	padding-top: .55rem;
	border-top: 1px solid var(--c-border);
}

.cs-chat__sources a {
	font-size: .76rem;
	padding: .2rem .55rem;
	border: 1px solid var(--c-border);
	border-radius: 100px;
	text-decoration: none;
	color: var(--c-accent);
	background: var(--c-paper-2);
}
.cs-chat__sources a:hover { border-color: var(--c-accent); }

/* ---------- suggestions ---------- */

.cs-chat__chips { display: flex; flex-wrap: wrap; gap: .4rem; align-self: flex-start; max-width: 100%; }

.cs-chat__chip {
	font: inherit;
	font-size: .8rem;
	padding: .38rem .7rem;
	border: 1px solid var(--c-border);
	background: var(--c-paper);
	border-radius: 100px;
	cursor: pointer;
	color: var(--ink, #14171f);
	text-align: left;
}
.cs-chat__chip:hover { border-color: var(--c-accent); color: var(--c-accent); }
.cs-chat__chip:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 1px; }

/* ---------- handoff ---------- */

.cs-chat__handoff { display: flex; gap: .45rem; flex-wrap: wrap; margin-top: .6rem; }

.cs-chat__handoff a {
	font-size: .8rem;
	font-weight: 550;
	padding: .4rem .75rem;
	border-radius: 8px;
	text-decoration: none;
	background: var(--c-ink);
	color: #fff;
}
.cs-chat__handoff a.is-alt { background: #25d366; color: #05301a; }

/* ---------- composer ---------- */

.cs-chat__form {
	display: flex;
	gap: .5rem;
	padding: .8rem;
	border-top: 1px solid var(--c-border);
	background: var(--c-paper);
	flex-shrink: 0;
}

.cs-chat__form input {
	flex: 1;
	min-width: 0;
	font: inherit;
	font-size: .92rem;
	padding: .6rem .75rem;
	border: 1px solid var(--c-border);
	border-radius: 8px;
	color: inherit;
	background: var(--c-paper);
}
.cs-chat__form input:focus { outline: none; border-color: var(--c-accent); box-shadow: 0 0 0 3px rgba(47, 91, 255, .2); }

.cs-chat__form button {
	font: inherit;
	font-size: .9rem;
	font-weight: 560;
	padding: .6rem 1rem;
	border: 0;
	border-radius: 8px;
	background: var(--c-accent);
	color: #fff;
	cursor: pointer;
	flex-shrink: 0;
}
.cs-chat__form button:disabled { opacity: .5; cursor: not-allowed; }

.cs-chat__note {
	font-size: .7rem;
	color: var(--c-muted);
	text-align: center;
	padding: 0 .8rem .6rem;
	background: var(--c-paper);
	flex-shrink: 0;
}

@media (max-width: 480px) {
	.cs-chat { right: .75rem; bottom: .75rem; left: .75rem; }
	.cs-chat__panel { width: 100%; height: min(76vh, 560px); }
	.cs-chat__launcher { width: 100%; justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
	.cs-chat__launcher { transition: none; }
}

@media print { .cs-chat { display: none !important; } }