/*
 * The chat panel.
 *
 * Neutral and low specificity on purpose: the panel sits on somebody else's
 * site and has to look like it belongs there, so what a theme is likely to want
 * to change is exposed as custom properties rather than baked in.
 *
 *   .aia-widget { --aia-accent: #6E8B6E; --aia-radius: 1rem; }
 *
 * The embedded form is not styled from here at all. It lives in its own shadow
 * root and dresses itself; reaching into it would break the isolation that lets
 * the same component sit on a page and in this panel.
 */

/*
 * `hidden` has to actually hide.
 *
 * The attribute works through `[hidden] { display: none }` in the browser's own
 * stylesheet, and any author `display` outranks it — the panel is
 * `display: flex`. So the panel was marked hidden, reported itself hidden, and
 * was on screen the whole time: an empty chat box with a header and a Send
 * button, permanently open on every page of the site, above the launcher.
 *
 * The second symptom came from the same place. Clicking its × was the *first*
 * toggle, so the widget thought it was being opened and hid the launcher —
 * pressing close made "Parla con noi" disappear.
 *
 * Deliberately the first rule in the file. Everything here that is toggled with
 * `hidden` is also given a `display`, and each one is the same bug waiting to be
 * written again.
 */
.aia-widget[hidden],
.aia-widget [hidden] {
	display: none;
}

.aia-widget {
	--aia-accent: #1f2937;
	--aia-accent-text: #fff;
	--aia-surface: #fff;
	--aia-border: rgba( 0, 0, 0, 0.12 );
	--aia-radius: 0.9rem;

	/* The insets shrink with the window: on a short screen they are the
	   difference between a step fitting and a step needing a scroll. */
	--aia-inset: 1.25rem;

	position: fixed;
	right: var( --aia-inset );
	bottom: var( --aia-inset );
	z-index: 9999;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.75rem;
	font-size: 0.95rem;
}

.aia-launcher {
	padding: 0.8rem 1.4rem;
	border: 0;
	border-radius: 999px;
	background: var( --aia-accent );
	color: var( --aia-accent-text );
	font: inherit;
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba( 0, 0, 0, 0.18 );
}

.aia-panel {
	display: flex;
	flex-direction: column;
	width: min( 24rem, calc( 100vw - 2.5rem ) );
	/*
	 * Sized from the window, not from a fixed number.
	 *
	 * A step of a questionnaire has to fit, and how much room there is depends
	 * entirely on the screen it is being read on. `dvh` rather than `vh` because
	 * on a phone `vh` counts the space the browser's own chrome is occupying, so
	 * the bottom of the panel — where the buttons are — ends up underneath it.
	 */
	max-height: min( 38rem, calc( 100vh - 4 * var( --aia-inset ) ) );
	max-height: min( 38rem, calc( 100dvh - 4 * var( --aia-inset ) ) );
	transition: width 0.15s ease, max-height 0.15s ease;
	border: 1px solid var( --aia-border );
	border-radius: var( --aia-radius );
	background: var( --aia-surface );
	overflow: hidden;
	box-shadow: 0 12px 40px rgba( 0, 0, 0, 0.2 );
}

/*
 * Expanded.
 *
 * A questionnaire is a form, and a form in a 24rem column with 34rem of height
 * is technically present and practically unusable. The panel grows to most of
 * the window, and shrinks back for ordinary conversation.
 */
.aia-panel--expanded {
	width: min( 46rem, calc( 100vw - 2 * var( --aia-inset ) ) );
	max-height: calc( 100vh - 2 * var( --aia-inset ) );
	max-height: calc( 100dvh - 2 * var( --aia-inset ) );
}

/*
 * A short window has no room to spare, so it stops being spent on margins. The
 * panel also stops being a card floating above the page and becomes the page,
 * because on a screen this size there is nothing behind it worth seeing.
 */
@media ( max-height: 700px ) {
	.aia-widget {
		--aia-inset: 0.5rem;
	}
}

/* Narrow: the panel takes the width it needs, which is all of it. */
@media ( max-width: 30rem ) {
	.aia-widget {
		--aia-inset: 0.5rem;
		left: var( --aia-inset );
	}

	.aia-panel,
	.aia-panel--expanded {
		width: 100%;
	}
}

.aia-panel__actions {
	display: flex;
	align-items: center;
	gap: 0.25rem;
}

.aia-panel__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.75rem 1rem;
	background: var( --aia-accent );
	color: var( --aia-accent-text );
}

.aia-panel__expand,
.aia-panel__close,
.aia-embed__close {
	border: 0;
	background: none;
	color: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
}

/*
 * The history scrolls, the composer does not: the input stays reachable.
 *
 * A column flex box rather than a grid, and the difference is not cosmetic. As a
 * grid, the row holding the embedded form was sized from the form's content
 * contribution — and a custom element whose height comes from inside its own
 * shadow root contributed nothing, so the row collapsed to two pixels and hid a
 * six-hundred-pixel questionnaire. Flex sizes the item from its actual box,
 * which is the thing that is right here.
 */
.aia-history {
	flex: 1;
	overflow-y: auto;
	padding: 1rem;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;
}

/* Nothing in the history is allowed to be squashed to fit. */
.aia-history > * {
	flex-shrink: 0;
}

.aia-bubble {
	padding: 0.6rem 0.8rem;
	border-radius: 0.75rem;
	max-width: 85%;
}

.aia-bubble--bot {
	background: rgba( 0, 0, 0, 0.05 );
	align-self: flex-start;
}

/*
 * A person, not the assistant. Worth telling apart at a glance: somebody who
 * asked for a human wants to know when they have got one.
 */
.aia-bubble--operator {
	align-self: flex-start;
	background: var( --aia-surface );
	border: 1px solid var( --aia-accent );
}

.aia-bubble--operator::before {
	content: attr( data-who );
	display: block;
	font-size: 0.7rem;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	opacity: 0.6;
}

.aia-bubble--user {
	background: var( --aia-accent );
	color: var( --aia-accent-text );
	align-self: flex-end;
}

/*
 * The form's block, anchored at the end of the history: it sits inside the
 * conversation rather than replacing it, and the messages above stay scrollable
 * while it is open (§17.4).
 *
 * The two rules below are load-bearing, and their absence is what made the
 * questionnaire invisible: the block collapsed to the height of its own two
 * borders and `overflow: hidden` clipped six hundred pixels of form out of
 * existence. Nothing errored, because nothing was wrong — it was laid out
 * correctly and measured two pixels tall.
 */
.aia-embed {
	align-self: stretch;
	border: 1px solid var( --aia-border );
	border-radius: 0.75rem;
	/* The floor, not the ceiling: the block grows with the form. */
	min-height: var( --aia-embed-height, 26rem );
}

/*
 * A custom element is `display: inline` until something says otherwise, and the
 * something is a stylesheet inside its shadow root — which this container cannot
 * see and must not wait for. Laying out the surface is the container's job, so
 * the container states it rather than inheriting it from its guest.
 */
.aia-embed > :not( .aia-embed__header ) {
	display: block;
}

.aia-embed__header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0.4rem 0.6rem;
	background: rgba( 0, 0, 0, 0.04 );
	font-size: 0.8rem;
	text-transform: capitalize;
	opacity: 0.75;
}

.aia-progress {
	padding: 0 1rem 0.5rem;
	font-size: 0.8rem;
	opacity: 0.7;
}

.aia-options {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	padding: 0 1rem 0.75rem;
}

.aia-option {
	padding: 0.45rem 0.85rem;
	border: 1px solid var( --aia-accent );
	border-radius: 999px;
	background: transparent;
	color: inherit;
	font: inherit;
	font-size: 0.85rem;
	text-decoration: none;
	cursor: pointer;
}

.aia-option:hover,
.aia-option--primary {
	background: var( --aia-accent );
	color: var( --aia-accent-text );
}

.aia-result {
	align-self: stretch;
	display: grid;
	gap: 0.5rem;
	padding: 0.9rem;
	border: 1px solid var( --aia-border );
	border-radius: 0.75rem;
}

.aia-result__title {
	margin: 0;
	font-size: 1rem;
}

.aia-result__block,
.aia-result__product {
	display: grid;
	gap: 0.15rem;
	font-size: 0.9rem;
}

.aia-composer {
	display: flex;
	gap: 0.5rem;
	padding: 0.75rem 1rem;
	border-top: 1px solid var( --aia-border );
}

.aia-input {
	flex: 1;
	padding: 0.5rem 0.7rem;
	border: 1px solid var( --aia-border );
	border-radius: 0.5rem;
	font: inherit;
}

.aia-input:disabled {
	opacity: 0.6;
}

.aia-send {
	padding: 0.5rem 1rem;
	border: 0;
	border-radius: 0.5rem;
	background: var( --aia-accent );
	color: var( --aia-accent-text );
	font: inherit;
	cursor: pointer;
}

.aia-footer {
	margin: 0;
	padding: 0 1rem 0.75rem;
	font-size: 0.75rem;
	opacity: 0.6;
}

@media ( prefers-reduced-motion: no-preference ) {
	.aia-panel {
		animation: aia-rise 0.18s ease-out;
	}
}

@keyframes aia-rise {
	from {
		opacity: 0;
		transform: translateY( 8px );
	}
}