/*
 * swpl-ask-ai-panel.css - storefront slide-out chat panel.
 *
 * Self-contained and theme-aware: a clean light panel by default with a
 * dark-mode variant via prefers-color-scheme, so it sits naturally on any
 * store. All classes are prefixed .swpl-aai- and scoped to the panel root so
 * nothing leaks into the theme. No emojis; glyphs are inline SVG.
 */

#swpl-ask-ai-root {
	--aai-accent:      #2563eb;
	--aai-accent-2:    #1d4ed8;
	--aai-bg:          #ffffff;
	--aai-surface:     #f5f6f8;
	--aai-surface-2:   #eceef1;
	--aai-text:        #1f2430;
	--aai-text-soft:   #5b6472;
	--aai-border:      rgba(0,0,0,0.10);
	--aai-user-bg:     #2563eb;
	--aai-user-text:   #ffffff;
	--aai-shadow:      0 18px 50px rgba(15,23,42,0.28);
	--aai-radius:      16px;
	font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

@media (prefers-color-scheme: dark) {
	#swpl-ask-ai-root {
		--aai-bg:        #14161c;
		--aai-surface:   #1c1f27;
		--aai-surface-2: #242833;
		--aai-text:      #eef0f5;
		--aai-text-soft: #9aa3b2;
		--aai-border:    rgba(255,255,255,0.12);
		--aai-accent:    #4a8cff;
		--aai-accent-2:  #6aa3ff;
		--aai-user-bg:   #3b6fd4;
	}
}

/* ---- Launcher button ---- */
.swpl-aai-launcher {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483000;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 12px 18px;
	border: none;
	border-radius: 999px;
	background: var(--aai-accent);
	color: #fff;
	font-size: 15px;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 8px 24px rgba(37,99,235,0.35);
	transition: transform .15s ease, background .15s ease;
}
.swpl-aai-launcher:hover { background: var(--aai-accent-2); transform: translateY(-1px); }
.swpl-aai-launcher svg { width: 20px; height: 20px; }
.swpl-aai-launcher.is-hidden { display: none; }

/* ---- Hint bubble ---- */
.swpl-aai-hint {
	position: fixed;
	right: 20px;
	bottom: 80px;
	z-index: 2147483000;
	max-width: 240px;
	padding: 12px 14px;
	background: var(--aai-bg);
	color: var(--aai-text);
	border: 1px solid var(--aai-border);
	border-radius: 14px;
	box-shadow: var(--aai-shadow);
	font-size: 14px;
	line-height: 1.4;
	cursor: pointer;
	animation: swpl-aai-pop .25s ease;
}
.swpl-aai-hint__close {
	position: absolute;
	top: -8px; right: -8px;
	width: 22px; height: 22px;
	border-radius: 50%;
	border: 1px solid var(--aai-border);
	background: var(--aai-bg);
	color: var(--aai-text-soft);
	cursor: pointer;
	font-size: 14px;
	line-height: 1;
}
.swpl-aai-hint.is-hidden { display: none; }

@keyframes swpl-aai-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* ---- Panel ---- */
.swpl-aai-panel {
	position: fixed;
	right: 20px;
	bottom: 20px;
	z-index: 2147483001;
	width: 380px;
	max-width: calc(100vw - 40px);
	height: 600px;
	max-height: calc(100vh - 40px);
	display: flex;
	flex-direction: column;
	background: var(--aai-bg);
	color: var(--aai-text);
	border: 1px solid var(--aai-border);
	border-radius: var(--aai-radius);
	box-shadow: var(--aai-shadow);
	overflow: hidden;
	transform: translateY(12px);
	opacity: 0;
	pointer-events: none;
	transition: transform .2s ease, opacity .2s ease;
}
.swpl-aai-panel.is-open { transform: none; opacity: 1; pointer-events: auto; }

/* ---- Header ---- */
.swpl-aai-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 14px 16px;
	background: var(--aai-accent);
	color: #fff;
}
.swpl-aai-header__title { font-size: 16px; font-weight: 700; }
.swpl-aai-header__close {
	border: none;
	background: transparent;
	color: #fff;
	cursor: pointer;
	font-size: 22px;
	line-height: 1;
	padding: 2px 6px;
	border-radius: 6px;
}
.swpl-aai-header__close:hover { background: rgba(255,255,255,0.18); }

/* ---- Messages ---- */
.swpl-aai-messages {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 12px;
	background: var(--aai-surface);
}
.swpl-aai-msg { display: flex; }
.swpl-aai-msg__bubble {
	max-width: 82%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: 14.5px;
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
}
.swpl-aai-msg--assistant { justify-content: flex-start; }
.swpl-aai-msg--assistant .swpl-aai-msg__bubble {
	background: var(--aai-bg);
	color: var(--aai-text);
	border: 1px solid var(--aai-border);
	border-bottom-left-radius: 4px;
}
.swpl-aai-msg--user { justify-content: flex-end; }
.swpl-aai-msg--user .swpl-aai-msg__bubble {
	background: var(--aai-user-bg);
	color: var(--aai-user-text);
	border-bottom-right-radius: 4px;
}

/* ---- Citations ---- */
.swpl-aai-sources {
	margin-top: 8px;
	padding-top: 8px;
	border-top: 1px dashed var(--aai-border);
	font-size: 12.5px;
	color: var(--aai-text-soft);
}
.swpl-aai-sources__label { font-weight: 600; display: block; margin-bottom: 3px; }
.swpl-aai-sources a { color: var(--aai-accent); text-decoration: none; }
.swpl-aai-sources a:hover { text-decoration: underline; }
.swpl-aai-sources li { margin: 2px 0; }

/* ---- Typing indicator ---- */
.swpl-aai-typing { display: inline-flex; gap: 4px; align-items: center; padding: 4px 2px; }
.swpl-aai-typing span {
	width: 7px; height: 7px; border-radius: 50%;
	background: var(--aai-text-soft);
	animation: swpl-aai-blink 1.2s infinite both;
}
.swpl-aai-typing span:nth-child(2) { animation-delay: .2s; }
.swpl-aai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes swpl-aai-blink { 0%,80%,100% { opacity: .25; } 40% { opacity: 1; } }

/* ---- Hand-off form ---- */
.swpl-aai-handoff {
	margin-top: 10px;
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.swpl-aai-handoff__channels { display: flex; gap: 8px; }
.swpl-aai-chip {
	flex: 1;
	padding: 8px;
	border: 1px solid var(--aai-border);
	border-radius: 10px;
	background: var(--aai-bg);
	color: var(--aai-text);
	cursor: pointer;
	font-size: 13.5px;
	font-weight: 600;
}
.swpl-aai-chip.is-active { border-color: var(--aai-accent); color: var(--aai-accent); }
.swpl-aai-handoff input {
	width: 100%;
	padding: 9px 11px;
	border: 1px solid var(--aai-border);
	border-radius: 10px;
	background: var(--aai-bg);
	color: var(--aai-text);
	font-size: 14px;
}
.swpl-aai-handoff__submit {
	padding: 9px 12px;
	border: none;
	border-radius: 10px;
	background: var(--aai-accent);
	color: #fff;
	font-weight: 600;
	cursor: pointer;
}
.swpl-aai-handoff__submit:hover { background: var(--aai-accent-2); }

/* ---- Composer ---- */
.swpl-aai-composer {
	display: flex;
	gap: 8px;
	padding: 12px;
	border-top: 1px solid var(--aai-border);
	background: var(--aai-bg);
}
.swpl-aai-composer textarea {
	flex: 1;
	resize: none;
	max-height: 96px;
	padding: 10px 12px;
	border: 1px solid var(--aai-border);
	border-radius: 12px;
	background: var(--aai-surface);
	color: var(--aai-text);
	font-size: 14.5px;
	font-family: inherit;
	line-height: 1.4;
}
.swpl-aai-composer textarea:focus { outline: 2px solid var(--aai-accent); outline-offset: 0; }
.swpl-aai-composer__send {
	flex: 0 0 auto;
	width: 44px;
	border: none;
	border-radius: 12px;
	background: var(--aai-accent);
	color: #fff;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}
.swpl-aai-composer__send:hover { background: var(--aai-accent-2); }
.swpl-aai-composer__send svg { width: 20px; height: 20px; }
.swpl-aai-composer__send:disabled { opacity: .5; cursor: default; }

/* ---- Disclaimer ---- */
.swpl-aai-disclaimer {
	padding: 8px 14px;
	font-size: 11.5px;
	line-height: 1.4;
	color: var(--aai-text-soft);
	background: var(--aai-surface-2);
	text-align: center;
}

/* ---- Mobile fullscreen takeover ---- */
@media (max-width: 640px) {
	.swpl-aai-panel {
		right: 0; bottom: 0; top: 0; left: 0;
		width: 100vw; height: 100vh;
		max-width: 100vw; max-height: 100vh;
		border-radius: 0;
		border: none;
	}
	.swpl-aai-hint { bottom: 78px; }
}

@media (prefers-reduced-motion: reduce) {
	.swpl-aai-panel, .swpl-aai-launcher, .swpl-aai-hint { transition: none; animation: none; }
}