/* ==========================================================================
   Front-end widgets — cookie consent, floating WhatsApp button, AI assistant.
   Loaded only when at least one of these features is enabled. Theming follows
   the same tokens as main.css so nothing looks bolted on.
   ========================================================================== */

/* ------------------------------------------------------- cookie banner */
.cookie {
	position: fixed;
	left: 50%;
	bottom: 20px;
	z-index: 90;
	width: min(680px, calc(100% - 32px));
	transform: translate(-50%, 140%);
	opacity: 0;
	transition: transform .45s var(--ease), opacity .45s var(--ease);
}
.cookie.is-in { transform: translate(-50%, 0); opacity: 1; }

.cookie__inner {
	display: flex;
	align-items: center;
	gap: 18px;
	padding: 16px 18px;
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: var(--radius);
	box-shadow: 0 18px 50px rgba(0, 0, 0, .45);
}
.cookie__text { margin: 0; color: var(--muted); font-size: var(--step--1); line-height: 1.5; }
.cookie__link { color: var(--accent-2); text-decoration: underline; text-underline-offset: 2px; }
.cookie__actions { display: flex; gap: 10px; flex: none; }
.cookie__btn {
	appearance: none;
	cursor: pointer;
	border-radius: 10px;
	padding: 10px 18px;
	font: inherit;
	font-size: var(--step--1);
	font-weight: 600;
	transition: transform .2s var(--ease), background .25s var(--ease), border-color .25s var(--ease), color .25s var(--ease);
}
.cookie__btn--reject { background: transparent; border: 1px solid var(--line-strong); color: var(--text); }
.cookie__btn--reject:hover { border-color: var(--accent-2); color: var(--accent-2); }
.cookie__btn--accept { border: 1px solid transparent; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #05060a; }
.cookie__btn--accept:hover { transform: translateY(-2px); }

/* ------------------------------------------------- floating action stack */
.fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 95;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 14px;
}

.fab__btn {
	position: relative;
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: 50%;
	border: 0;
	cursor: pointer;
	color: #fff;
	box-shadow: 0 10px 28px rgba(0, 0, 0, .4);
	transition: transform .25s var(--ease), box-shadow .25s var(--ease);
}
.fab__btn:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(0, 0, 0, .5); }
.fab__btn svg { width: 28px; height: 28px; }

.fab__btn--wa { background: #25d366; }
.fab__btn--wa svg { width: 30px; height: 30px; }

.fab__btn--ai { background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #05060a; }

/* The AI button swaps its chat glyph for a close glyph when the panel is open. */
.fab__btn--ai svg:last-child { display: none; }
.fab.is-open .fab__btn--ai svg:first-child { display: none; }
.fab.is-open .fab__btn--ai svg:last-child { display: block; }

/* ------------------------------------------------------------- chat panel */
.fab__panel {
	width: min(360px, calc(100vw - 44px));
	transform-origin: bottom right;
	animation: tfi-pop .28s var(--ease);
}
@keyframes tfi-pop {
	from { opacity: 0; transform: translateY(12px) scale(.96); }
	to   { opacity: 1; transform: translateY(0) scale(1); }
}

.chat {
	display: flex;
	flex-direction: column;
	max-height: min(560px, 72vh);
	background: var(--surface-2);
	border: 1px solid var(--line);
	border-radius: 18px;
	overflow: hidden;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .5);
}

.chat__head {
	display: flex; align-items: center; gap: 10px;
	padding: 14px 16px;
	background: var(--surface-3);
	border-bottom: 1px solid var(--line);
}
.chat__avatar {
	width: 30px; height: 30px; flex: none;
	display: grid; place-items: center;
	border-radius: 9px;
	background: linear-gradient(140deg, var(--accent), var(--accent-2));
	color: #05060a;
}
.chat__avatar svg { width: 18px; height: 18px; }
.chat__title { font-family: var(--font-display); font-weight: 600; font-size: var(--step--1); color: var(--text); flex: 1; }
.chat__close {
	appearance: none; border: 0; background: transparent; cursor: pointer;
	width: 30px; height: 30px; display: grid; place-items: center;
	border-radius: 8px; color: var(--muted);
	transition: background .2s var(--ease), color .2s var(--ease);
}
.chat__close:hover { background: rgba(255, 255, 255, .06); color: var(--text); }
.chat__close svg { width: 18px; height: 18px; }

.chat__log {
	flex: 1;
	overflow-y: auto;
	padding: 16px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	scrollbar-width: thin;
}
.chat__msg {
	max-width: 85%;
	padding: 10px 13px;
	border-radius: 14px;
	font-size: var(--step--1);
	line-height: 1.5;
	white-space: pre-wrap;
	word-wrap: break-word;
	overflow-wrap: anywhere;
}
.chat__msg--bot { align-self: flex-start; background: var(--surface-3); border: 1px solid var(--line); color: var(--text); border-bottom-left-radius: 5px; }
.chat__msg--user { align-self: flex-end; background: linear-gradient(140deg, var(--accent), var(--accent-2)); color: #05060a; border-bottom-right-radius: 5px; }

.chat__msg.is-typing { color: var(--muted); letter-spacing: .15em; }

.chat__form {
	display: flex; gap: 8px; align-items: center;
	padding: 12px;
	border-top: 1px solid var(--line);
	background: var(--surface-2);
}
.chat__input {
	flex: 1;
	padding: 11px 14px;
	border-radius: 12px;
	border: 1px solid var(--line-strong);
	background: var(--surface);
	color: var(--text);
	font: inherit;
	font-size: var(--step--1);
}
.chat__input:focus { outline: 2px solid var(--accent-2); outline-offset: 1px; }
.chat__send {
	flex: none;
	width: 42px; height: 42px;
	display: grid; place-items: center;
	border: 0; border-radius: 12px;
	cursor: pointer;
	background: linear-gradient(140deg, var(--accent), var(--accent-2));
	color: #05060a;
	transition: transform .2s var(--ease);
}
.chat__send:hover { transform: translateY(-2px); }
.chat__send svg { width: 19px; height: 19px; }

.chat__note {
	margin: 0;
	padding: 0 16px 12px;
	background: var(--surface-2);
	color: var(--muted);
	font-size: 11px;
	line-height: 1.4;
}

/* ------------------------------------------------------------- responsive */
@media (max-width: 600px) {
	.cookie { bottom: 12px; width: calc(100% - 20px); }
	.cookie__inner { flex-direction: column; align-items: stretch; gap: 12px; }
	.cookie__actions { justify-content: stretch; }
	.cookie__btn { flex: 1; }

	.fab { right: 16px; bottom: 16px; }
	.fab__btn { width: 52px; height: 52px; }

	/* Lift the buttons above the cookie banner while it is on screen. */
	body.tfi-cookie-open .fab { bottom: 150px; }

	.fab__panel { width: calc(100vw - 32px); }
}

@media (prefers-reduced-motion: reduce) {
	.cookie, .cookie__btn, .fab__btn, .chat__send { transition: none; }
	.fab__panel { animation: none; }
}