/**
 * Asystent AI — dymek + panel czatu (2026-09-02; lifting wizualny po
 * feedbacku usera z tego samego dnia).
 *
 * Tokeny: TYLKO kanoniczny zestaw silnika (surface / surface-alt / ink /
 * muted / border / accent / accent-ink / radius-*) — pierwsza wersja uzyla
 * wymyslonego --wct-soft, ktorego konfigurator nie definiuje, i na ciemnej
 * skorce dymek asystenta byl jasny z JASNYM tekstem (niewidoczny).
 *
 * Pozycja (decyzja po feedbacku): CZAT siedzi w naturalnym rogu (bottom:22px),
 * a przycisk "powrot na gore" — gdy sie pojawia — laduje NAD nim (override
 * nizej). Wczesniej bylo odwrotnie i przy schowanej strzalce czat wisial
 * dziwnie wysoko nad pustka.
 */

.wct-chat [hidden] { display: none !important; }

/* Strzalka "powrot na gore" przesuwa sie NA LEWO od czatu (feedback usera —
   iteracja 3 ukladu: jeden rzad zamiast kolumny). Otwarty panel konczy sie
   78px nad dolem, wiec niczego nie zaslania. Arkusz czatu laduje sie PO
   wct-backtotop.css (wygrana kolejnoscia); lancuch :not() powtorzony za baza
   z tamtego arkusza — lekcja v0.15.10. */
.wct-totop,
.wct-totop:not(:hover):not(:active) { right: 78px; }

/* ------------------------------------------------------------------ FAB -- */
.wct-chat__fab {
	position: fixed;
	right: 22px;
	bottom: 22px;
	z-index: 998;
	/* 44px = rozmiar przycisku "powrot na gore" (feedback usera: rowna para). */
	width: 44px;
	height: 44px;
	padding: 0;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 50%;
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	box-shadow: 0 8px 24px rgba(15, 23, 42, 0.30);
	cursor: pointer;
	overflow: hidden;
	transition: transform .16s ease, box-shadow .16s ease;
}
/* Delikatny polysk (gradientowa mgielka nad kolorem akcentu). */
.wct-chat__fab::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 50%;
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.30), rgba(255, 255, 255, 0) 55%);
	pointer-events: none;
}
.wct-chat__fab:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(15, 23, 42, 0.36); }
.wct-chat__fab svg { position: relative; display: block; }

/* ---------------------------------------------------------------- panel -- */
.wct-chat__panel {
	position: fixed;
	right: 22px;
	bottom: 78px;
	z-index: 999;
	display: flex;
	flex-direction: column;
	width: 372px;
	max-width: calc(100vw - 32px);
	height: 500px;
	max-height: calc(100vh - 120px);
	border: 1px solid var(--wct-border, #d6dbe3);
	border-radius: var(--wct-radius-card, 16px);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	box-shadow: 0 18px 48px rgba(15, 23, 42, 0.28);
	font-size: 14px;
	overflow: hidden;
	animation: wct-chat-in .18s ease-out;
}
@keyframes wct-chat-in {
	from { opacity: 0; transform: translateY(10px) scale(0.98); }
}

.wct-chat__head {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 12px 14px;
	border-bottom: 1px solid var(--wct-border, #e2e6eb);
	background: var(--wct-surface-alt, #f6f8fb);
}
.wct-chat__beta {
	font-size: 10px;
	font-weight: 800;
	letter-spacing: 0.04em;
	padding: 3px 7px;
	border-radius: 999px;
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
}
.wct-chat__close,
.wct-chat__clear {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border: 0;
	border-radius: 50%;
	background: none;
	color: var(--wct-muted, #5b6675);
	cursor: pointer;
	padding: 0;
}
.wct-chat__clear { margin-left: auto; }
.wct-chat__close:hover,
.wct-chat__clear:hover { background: var(--wct-border, #e2e6eb); color: var(--wct-ink, #1c2530); }

/* ------------------------------------------------------------ wiadomosci -- */
.wct-chat__msgs {
	flex: 1 1 auto;
	overflow-y: auto;
	padding: 14px;
	display: flex;
	flex-direction: column;
	gap: 10px;
	background: var(--wct-surface, #fff);
}
.wct-chat__msg {
	max-width: 86%;
	padding: 9px 13px;
	border-radius: var(--wct-radius-card, 16px);
	line-height: 1.5;
	overflow-wrap: break-word;
}
/* Para tokenow ZAWSZE z jednej rodziny (tlo+tekst) — patrz naglowek pliku. */
.wct-chat__msg--user {
	align-self: flex-end;
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	border-bottom-right-radius: 4px;
}
.wct-chat__msg--assistant {
	align-self: flex-start;
	background: var(--wct-surface-alt, #f1f4f8);
	color: var(--wct-ink, #1c2530);
	border: 1px solid var(--wct-border, #e2e6eb);
	border-bottom-left-radius: 4px;
}
.wct-chat__msg--assistant a { color: var(--wct-accent, #1769ff); }
.wct-chat__msg.is-error {
	background: var(--wct-surface-alt, #f1f4f8);
	color: var(--wct-danger, #d23b3b);
	border: 1px solid var(--wct-danger, #d23b3b);
}

.wct-chat__dots i {
	display: inline-block;
	width: 6px;
	height: 6px;
	margin: 0 2px;
	border-radius: 50%;
	background: var(--wct-muted, #5b6675);
	animation: wct-chat-blink 1.2s infinite;
}
.wct-chat__dots i:nth-child(2) { animation-delay: .2s; }
.wct-chat__dots i:nth-child(3) { animation-delay: .4s; }
@keyframes wct-chat-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* ------------------------------------------------------------- formularz -- */
.wct-chat__form {
	display: flex;
	gap: 8px;
	padding: 12px 14px;
	border-top: 1px solid var(--wct-border, #e2e6eb);
	background: var(--wct-surface-alt, #f6f8fb);
	margin: 0;
}
/* Lancuch klas (0,2,0): TT21/skorki celuja w input[type="text"] (0,1,1)
   i wygrywaly KOLOREM tekstu z sama klasa — ciemny tekst na ciemnym tle. */
.wct-chat__form .wct-chat__input {
	flex: 1 1 auto;
	min-width: 0;
	height: 40px;
	padding: 0 14px;
	border: 1px solid var(--wct-border, #cdd4dc);
	border-radius: 999px;
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	caret-color: var(--wct-ink, #1c2530);
	font-size: 14px;
}
.wct-chat__form .wct-chat__input::placeholder { color: var(--wct-muted, #5b6675); opacity: 1; }
/* Motyw styluje tez input[type="text"]:focus (0,2,1) — stan focus MUSI
   powtorzyc kolory, inaczej wpisywany tekst ciemnial wlasnie przy pisaniu
   (odwrotnosc lekcji v0.15.10: tu cudzy STAN bil nasza baze). */
.wct-chat__form .wct-chat__input:focus {
	outline: 2px solid var(--wct-accent, #1769ff);
	outline-offset: -1px;
	border-color: var(--wct-accent, #1769ff);
	background: var(--wct-surface, #fff);
	color: var(--wct-ink, #1c2530);
	caret-color: var(--wct-ink, #1c2530);
}
.wct-chat__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	flex: 0 0 auto;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wct-accent, #1769ff);
	color: var(--wct-accent-ink, #fff);
	cursor: pointer;
	transition: transform .12s ease;
}
.wct-chat__send:hover { transform: scale(1.06); }
.wct-chat__send:disabled { opacity: .55; cursor: default; transform: none; }

.wct-chat__foot {
	padding: 0 14px 10px;
	font-size: 11px;
	color: var(--wct-muted, #5b6675);
	background: var(--wct-surface-alt, #f6f8fb);
}

/* ---------------------------------------------------------------- mobile -- */
@media (max-width: 480px) {
	.wct-chat__panel {
		right: 8px;
		left: 8px;
		width: auto;
		max-width: none;
		bottom: 78px;
		height: 66vh;
	}
}
@media print {
	.wct-chat, .wct-totop { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wct-chat__panel { animation: none; }
	.wct-chat__dots i { animation: none; opacity: .6; }
	.wct-chat__fab, .wct-chat__send { transition: none; }
}