/**
 * Shop assistant panel.
 *
 * Colours and type inherit from the theme wherever they can. A panel that brings
 * its own palette into a merchant's storefront looks like somebody else's advert
 * bolted to the side of their shop, which is exactly what a shopper distrusts.
 *
 * Sidebar is the default and the focus: it docks to the edge, and on a wide
 * screen it pushes the page rather than covering it, so a shopper can read a
 * product and ask about it at the same time. Popup is the same panel, floated.
 */

.caidel-chat {
	--caidel-chat-width: 380px;
	position: fixed;
	z-index: 99999;
	right: 0;
	bottom: 0;
	font-size: 15px;
	line-height: 1.5;
}

.caidel-chat__launcher {
	position: fixed;
	right: 1.25rem;
	bottom: 1.25rem;
	z-index: 1;
	padding: 0.75em 1.35em;
	border: 0;
	border-radius: 999px;
	cursor: pointer;
	font: inherit;
	font-weight: 600;
	/* System colour pair, inverted: the launcher has to be legible on a theme this
	   plugin has never seen, in light mode and in dark. Using currentColor for the
	   background is the obvious move and makes the label invisible, because the
	   label is currentColor too. */
	background: CanvasText;
	color: Canvas;
	box-shadow: 0 6px 24px rgba( 0, 0, 0, 0.18 );
}

.caidel-chat.is-open .caidel-chat__launcher {
	display: none;
}

.caidel-chat__panel {
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	width: min( var( --caidel-chat-width ), 100vw );
	display: flex;
	flex-direction: column;
	background: Canvas;
	color: CanvasText;
	box-shadow: -8px 0 32px rgba( 0, 0, 0, 0.16 );
}

.caidel-chat--popup .caidel-chat__panel {
	top: auto;
	right: 1.25rem;
	bottom: 1.25rem;
	height: min( 620px, calc( 100vh - 2.5rem ) );
	border-radius: 14px;
	overflow: hidden;
}

/* Sidebar mode pushes the page on a wide screen rather than covering it: the
   shopper is usually asking *about* what they are looking at. */
@media ( min-width: 1100px ) {
	html.caidel-chat-open body {
		margin-right: var( --caidel-chat-width, 380px );
		transition: margin-right 0.18s ease;
	}

	.caidel-chat--popup + body,
	html.caidel-chat-open .caidel-chat--popup {
		margin-right: 0;
	}
}

.caidel-chat__header {
	display: flex;
	align-items: center;
	gap: 0.5em;
	padding: 0.9em 1em;
	border-bottom: 1px solid rgba( 128, 128, 128, 0.28 );
}

.caidel-chat__title {
	margin: 0;
	font-size: 1em;
	font-weight: 700;
	flex: 1 1 auto;
}

.caidel-chat__restart,
.caidel-chat__close {
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	font: inherit;
	opacity: 0.65;
	padding: 0.2em 0.4em;
}

.caidel-chat__restart {
	font-size: 0.85em;
	text-decoration: underline;
}

.caidel-chat__close {
	font-size: 1.5em;
	line-height: 1;
}

.caidel-chat__restart:hover,
.caidel-chat__close:hover {
	opacity: 1;
}

.caidel-chat__log {
	flex: 1 1 auto;
	overflow-y: auto;
	overscroll-behavior: contain;
	padding: 1em;
	display: flex;
	flex-direction: column;
	gap: 0.9em;
}

.caidel-chat__turn {
	max-width: 100%;
}

.caidel-chat__turn--user {
	align-self: flex-end;
	max-width: 85%;
}

.caidel-chat__turn--user .caidel-chat__text {
	background: rgba( 128, 128, 128, 0.16 );
	border-radius: 14px 14px 2px 14px;
	padding: 0.6em 0.85em;
}

.caidel-chat__text {
	margin: 0;
	white-space: pre-wrap;
}

.caidel-chat__turn.is-pending .caidel-chat__text {
	opacity: 0.6;
	font-style: italic;
}

.caidel-chat__cards {
	list-style: none;
	margin: 0.7em 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.7em;
}

.caidel-chat__card {
	display: flex;
	gap: 0.7em;
	padding: 0.6em;
	border: 1px solid rgba( 128, 128, 128, 0.28 );
	border-radius: 10px;
}

.caidel-chat__thumb {
	flex: 0 0 62px;
}

.caidel-chat__thumb img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 6px;
}

.caidel-chat__card-body {
	display: flex;
	flex-direction: column;
	gap: 0.2em;
	min-width: 0;
}

.caidel-chat__card-name {
	font-weight: 600;
	text-decoration: none;
	line-height: 1.3;
}

.caidel-chat__card-meta {
	display: flex;
	flex-wrap: wrap;
	gap: 0.6em;
	margin: 0;
	font-size: 0.85em;
}

.caidel-chat__stock {
	opacity: 0.7;
}

.caidel-chat__reason {
	margin: 0;
	font-size: 0.87em;
	opacity: 0.85;
}

/* The one thing here that is never muted. */
.caidel-chat__warning {
	margin: 0;
	font-size: 0.87em;
	font-weight: 600;
	color: var( --wp--preset--color--vivid-red, #a1260d );
}

.caidel-chat__sources {
	margin: 0.6em 0 0;
	font-size: 0.8em;
	opacity: 0.75;
}

.caidel-chat__sources-label {
	margin-right: 0.35em;
}

/* The shop's ranking preference changed the order of the cards above. */
.caidel-chat__steering {
	margin: 0.4em 0 0;
	font-size: 0.8em;
	opacity: 0.75;
}

.caidel-chat__form {
	display: flex;
	gap: 0.5em;
	align-items: flex-end;
	padding: 0.8em 1em 1em;
	border-top: 1px solid rgba( 128, 128, 128, 0.28 );
}

.caidel-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	resize: none;
	font: inherit;
	padding: 0.6em 0.7em;
	border: 1px solid rgba( 128, 128, 128, 0.4 );
	border-radius: 10px;
	background: transparent;
	color: inherit;
	max-height: 140px;
}

.caidel-chat__send {
	flex: 0 0 auto;
	cursor: pointer;
	font: inherit;
	padding: 0.65em 1.1em;
	border-radius: 10px;
}

/* A phone has no room to push anything: the panel is the screen while it is
   open, and the page is behind it. */
@media ( max-width: 600px ) {
	.caidel-chat__panel,
	.caidel-chat--popup .caidel-chat__panel {
		inset: 0;
		width: 100vw;
		height: 100%;
		border-radius: 0;
	}
}

@media ( prefers-reduced-motion: reduce ) {
	html.caidel-chat-open body {
		transition: none;
	}
}