/* ==========================================================================
   Moduł Chat — wysuwany panel asystenta (klasy br-ki-*).
   Reguły przeniesione z makiety BAURAD (theme/baurad/js/ki.js, blok
   ensureStyles) — teraz należą do modułu, więc panel działa także bez
   skryptu motywu. Tokeny BAURAD (--color-*, --space-*, --radius-*, --text-*)
   mają wartości zapasowe, dzięki czemu panel wygląda poprawnie również
   w motywie bez tokenów.
   ========================================================================== */

.br-ki-overlay{position:fixed;inset:0;background:rgba(43,38,34,.18);z-index:60;animation:br-ki-fade .2s ease}
.br-ki-panel{position:fixed;top:0;right:0;bottom:0;width:26.5rem;max-width:92vw;background:var(--color-bg,#fff);border-left:1px solid var(--color-line,#e5e1dc);z-index:61;display:flex;flex-direction:column;box-shadow:-16px 0 40px rgba(43,38,34,.14);animation:br-ki-in .24s cubic-bezier(.22,1,.36,1);font-family:var(--font-ui,inherit);color:var(--color-ink,#2b2622)}
.br-ki-panel[hidden],.br-ki-overlay[hidden]{display:none!important}

.br-ki-panel__head{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2,1rem);padding:var(--space-25,1.25rem) var(--space-3,1.5rem);border-bottom:1px solid var(--color-line,#e5e1dc);flex-shrink:0}
.br-ki-panel__title{display:flex;align-items:center;gap:var(--space-15,.75rem);font-size:var(--text-body,1rem)}
.br-ki-panel__mark{width:2rem;height:2rem;border-radius:var(--radius-pill,999px);background:var(--color-action,#ff6d00);color:#fff;display:flex;align-items:center;justify-content:center;font-size:12px;line-height:1;flex-shrink:0}
.br-ki-panel__close{width:2rem;height:2rem;border:none;background:none;font-size:var(--text-h3,1.5rem);line-height:1;color:var(--color-ink-2,#6b645e);border-radius:var(--radius-pill,999px);cursor:pointer;transition:background .15s ease}
.br-ki-panel__close:hover{background:var(--color-surface,#f5f3f0)}
.br-ki-panel__close:focus-visible{outline:none;box-shadow:0 0 0 .125rem rgba(255,109,0,.55)}

.br-ki-panel__body{flex:1 1 0%;overflow-y:auto;padding:var(--space-3,1.5rem)}
.br-ki-panel__foot{border-top:1px solid var(--color-line,#e5e1dc);padding:var(--space-2,1rem) var(--space-25,1.25rem);flex-shrink:0}

.br-ki-bubble{align-self:flex-end;max-width:88%;background:var(--color-ink,#2b2622);color:var(--color-bg,#fff);border-radius:var(--radius-bubble,.75rem);padding:var(--space-15,.75rem) var(--space-2,1rem);font-size:var(--text-body-sm,.875rem);margin-bottom:var(--space-25,1.25rem)}

@keyframes br-ki-in{from{transform:translateX(24px);opacity:0}to{transform:translateX(0);opacity:1}}
@keyframes br-ki-fade{from{opacity:0}to{opacity:1}}

/* ==========================================================================
   Asystent AI — rozmowa w panelu (bąbelki pytań i odpowiedzi).
   Klasy br-ki-msg / br-ki-log / br-ki-src; kolory z tokenów motywu BAURAD
   (fallback = wartości z makiety). Bąbelki są tworzone przez js/chat.js.
   ========================================================================== */
.br-ki-log{display:flex;flex-direction:column;gap:var(--space-2,1rem);margin-bottom:var(--space-2,1rem)}
.br-ki-log:empty{margin-bottom:0}

.br-ki-msg{max-width:88%;padding:var(--space-15,.75rem) var(--space-2,1rem);border-radius:var(--radius-bubble,.75rem);font-size:var(--text-body-sm,.875rem);line-height:1.5;animation:br-ki-fade .2s ease}
.br-ki-msg__text{display:block;white-space:pre-line}

/* Pytanie użytkownika — ciemny bąbelek po prawej (jak .br-ki-bubble z motywu). */
.br-ki-msg--user{align-self:flex-end;background:var(--color-ink,#2b2622);color:var(--color-bg,#fff)}
/* Odpowiedź asystenta — jasny bąbelek po lewej. */
.br-ki-msg--bot{align-self:flex-start;background:var(--color-surface,#f5f3f0);color:var(--color-ink,#2b2622);border:1px solid var(--color-line,#e5e1dc)}
.br-ki-msg--unknown{background:var(--color-bg,#fff);border-style:dashed}
.br-ki-msg--error{background:var(--color-bg,#fff);border-color:var(--color-action,#ff6d00);color:var(--color-ink-2,#6b645e)}
.br-ki-msg--sources{background:none;border:none;padding:0 var(--space-1,.5rem);max-width:100%}

/* Wskaźnik „pisze…” — trzy pulsujące kropki. */
.br-ki-msg--loading .br-ki-msg__text{opacity:.6}
.br-ki-msg--loading .br-ki-msg__text::after{content:"";
	display:inline-block;width:.4em;height:.4em;margin-left:.35em;border-radius:50%;
	background:currentColor;animation:br-ki-dots 1s infinite ease-in-out}
@keyframes br-ki-dots{0%,100%{opacity:.2}50%{opacity:1}}

/* Link do kontaktu pod komunikatem „nie znam odpowiedzi”. */
.br-ki-msg__more{display:block;margin-top:var(--space-15,.75rem)}
.br-ki-msg__more .br-btn--sm{padding:.35rem .8rem;font-size:var(--text-body-sm,.875rem)}

/* Źródła odpowiedzi: etykieta + chipy z linkami do wpisów. */
.br-ki-msg__sources{display:flex;flex-wrap:wrap;gap:var(--space-1,.5rem);align-items:center}
.br-ki-msg__sources-label{font-size:var(--text-caption,.75rem);text-transform:uppercase;letter-spacing:.06em;color:var(--color-ink-2,#6b645e)}
.br-ki-src{display:inline-block;padding:.2rem .6rem;border:1px solid var(--color-line,#e5e1dc);border-radius:var(--radius-pill,999px);font-size:var(--text-body-sm,.875rem);color:var(--color-ink,#2b2622);text-decoration:none;background:var(--color-bg,#fff)}
a.br-ki-src:hover{border-color:var(--color-action,#ff6d00);color:var(--color-action,#ff6d00)}

/* Stan wysyłki: pole i przycisk nieaktywne, kursor postępu. */
.mod-chat.is-busy .br-ki-panel__foot{opacity:.75}
.mod-chat.is-busy [data-chat-input],.mod-chat.is-busy [data-chat-submit]{cursor:progress}

/* Wstęp panelu (opis + podpowiedzi) znika po pierwszym pytaniu (JS: hidden). */
.br-ki-intro[hidden]{display:none}

body.mod-chat-lock{overflow:hidden}

@media (max-width:480px){
	.br-ki-panel{width:100vw;max-width:100vw}
}

/* ==========================================================================
   Tryb "Panel" — sekcja "Frage stellen" (klasy br-home-ki).
   Wartości 1:1 z theme/baurad/css/home.css (sekcja "KI block"), żeby sekcja
   modułu wyglądała poprawnie także na stronach bez CSS strony głównej.
   ========================================================================== */
.br-home-ki {
	max-width: 56.5rem;
	margin: 0 auto;
	padding: 5.5rem var(--space-4, 2rem) 0;
	text-align: center;
}
/* Nagłówek sekcji „Panel”. Selektor celowo mocniejszy niż motywowy
   `.br-home-ki__title` (dodatkowo .mod-chat-block), żeby rozmiar nie zależał
   od kolejności arkuszy ani od tokenów motywu. Najpierw zapas (2.5rem = środek
   rampy), potem płynna rampa H1: 2rem przy 64rem → 3rem przy 116rem. */
.br-home-ki.mod-chat-block .br-home-ki__title {
	font-family: var(--font-ui, inherit);
	font-size: 2.5rem;
	font-size: clamp(2rem, calc(2rem + (100vw - 64rem) / 52), 3rem);
	font-weight: 700;
	line-height: var(--text-h1-lh, 1.15);
	margin: 0 0 var(--space-2, 1rem);
}
.br-home-ki.mod-chat-block .br-home-ki__sub {
	font-size: var(--text-body, 1rem);
	line-height: var(--text-body-lh, 1.55);
	color: var(--color-ink-2, #6b645e);
	margin: 0 0 var(--space-5, 2.5rem);
}
.br-home-ki__field-wrap { position: relative; z-index: 5; }
.br-home-ki__field {
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-line, #e5e1dc);
	border-radius: var(--radius-pill, 999px);
	box-shadow: 0 10px 24px rgba(43, 38, 34, .10);
	padding: var(--space-15, .75rem) var(--space-15, .75rem) var(--space-15, .75rem) var(--space-3, 1.5rem);
	display: flex;
	align-items: center;
	gap: var(--space-15, .75rem);
	transition: border-color .15s ease;
}
.br-home-ki__field.is-open { border-color: var(--color-action, #ff6d00); }
.br-home-ki__field input {
	flex: 1;
	min-width: 0;
	border: none;
	background: transparent;
	font-family: var(--font-ui, inherit);
	font-size: var(--text-body-lg, 1.125rem);
	color: var(--color-ink, #2b2622);
	padding: var(--space-15, .75rem) 0;
}
.br-home-ki__field input:focus-visible { outline: none; box-shadow: none; }
.br-home-ki__send {
	border: none;
	background: var(--color-action, #ff6d00);
	color: var(--color-bg, #fff);
	width: 3rem;
	height: 3rem;
	border-radius: var(--radius-pill, 999px);
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	flex-shrink: 0;
	transition: background .15s ease, transform .15s ease;
}
.br-home-ki__send:hover { background: var(--color-action-hover, #e65f00); transform: scale(1.05); }
.br-home-ki__suggest {
	display: none;
	position: absolute;
	left: 0;
	right: 0;
	top: calc(100% + 8px);
	background: var(--color-bg, #fff);
	border: 1px solid var(--color-line, #e5e1dc);
	border-radius: var(--radius-card-lg, 1rem);
	box-shadow: 0 14px 34px rgba(43, 38, 34, .14);
	overflow: hidden;
	text-align: left;
}
.br-home-ki__suggest.is-open { display: block; }
.br-home-ki__suggest button {
	display: flex;
	align-items: center;
	gap: var(--space-2, 1rem);
	width: 100%;
	border: none;
	border-top: 1px solid var(--color-surface, #f5f3f0);
	background: var(--color-bg, #fff);
	padding: var(--space-2, 1rem) var(--space-3, 1.5rem);
	font-family: var(--font-ui, inherit);
	font-size: var(--text-body, 1rem);
	color: var(--color-ink-2, #6b645e);
	cursor: pointer;
	text-align: left;
}
.br-home-ki__suggest button:hover { background: var(--color-surface, #f5f3f0); }
.br-home-ki__pills {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-15, .75rem);
	margin-top: var(--space-3, 1.5rem);
	flex-wrap: wrap;
}
/* Strona główna: moduł renderuje się wewnątrz sekcji `.br-home-ki` motywu
   (theme/baurad/home.html), więc oba kontenery dokładają własny padding
   (5.5rem + 2rem z każdej strony). Na wąskich ekranach pole pytania było
   przez to o 4rem węższe niż w makiecie BAURAD. Na mobile wewnętrzna
   sekcja oddaje padding nadrzędnej — szerokość i odstęp górny 1:1 z makietą.
   Reguła działa tylko przy zagnieżdżeniu w sekcji motywu; moduł użyty
   samodzielnie (bez `.br-home-ki` wokół) zachowuje swoje paddingi. */
@media (max-width: 640px) {
	.br-home-ki > .br-home-ki.mod-chat-block {
		padding: 0;
	}
}

/* ==========================================================================
   Tryb "Przycisk" — pływający przycisk asystenta (prawy dolny róg).
   ========================================================================== */
.br-ki-fab {
	position: fixed;
	right: 1.5rem;
	bottom: 1.5rem;
	z-index: 55;
	display: inline-flex;
	align-items: center;
	gap: .6rem;
	padding: .85rem 1.25rem;
	border: none;
	border-radius: var(--radius-pill, 999px);
	background: var(--color-action, #ff6d00);
	color: var(--color-bg, #fff);
	font-family: var(--font-ui, inherit);
	font-size: var(--text-body-sm, .875rem);
	font-weight: 600;
	cursor: pointer;
	box-shadow: 0 12px 28px rgba(43, 38, 34, .22);
	transition: transform .15s ease, background .15s ease;
}
.br-ki-fab:hover { transform: translateY(-2px); background: var(--color-action-hover, #e65f00); }
.br-ki-fab__icon {
	width: 1.1rem;
	height: 1.1rem;
	background: currentColor;
	-webkit-mask: var(--icon) center / contain no-repeat;
	mask: var(--icon) center / contain no-repeat;
}

/* ==========================================================================
   Kafle trybów w zakładce "Ustawienia" (admin/form.html).
   Układ kafla KPI z panelu (card-box + kółko z ikoną + nazwa/opis);
   moduł dokłada tylko wygląd linku i wyśrodkowanie ikony w kółku.
   ========================================================================== */
.mod-chat-mode {
	display: block;
	text-decoration: none;
	color: inherit;
	transition: box-shadow .2s ease, transform .2s ease;
}
.mod-chat-mode:hover,
.mod-chat-mode:focus-visible {
	text-decoration: none;
	color: inherit;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px rgba(0, 0, 0, .18);
	outline: none;
}
.mod-chat-mode__icon {
	display: grid;
	place-items: center;
	font-size: 1.35rem;
}
.mod-chat-mode h3 {
	font-size: 1.15rem;
	margin-bottom: .15rem;
}

/* ==========================================================================
   Wiersze klocków w formularzu (admin) + ikona Lucide z pickera (front).
   ========================================================================== */
.mod-chat-pill-row {
	border: 1px dashed var(--theme-border-color, rgba(229, 243, 255, .12));
	border-radius: 12px;
	padding: .85rem .85rem .35rem;
}
.mod-chat-lucide {
	display: block;
	flex: 0 0 auto;
	width: 17px;      /* jak .br-icon--17 w motywie BAURAD */
	height: 17px;
	color: inherit;   /* kolor klocka — także w :hover (ten sam co czcionka) */
	stroke: currentColor;
	transition: color .15s ease;
}
.mod-chat-sprite {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
}

/* ==========================================================================
   Rozmiar ikony Lucide w kafelku-przycisku pickera (tryb „sam przycisk").
   Ciemny motyw okna pickera (akordeon kategorii, kafle ikon, pole wartości)
   jest GLOBALNY: theme/assets/css/xcms-iconpicker.css, dołączany w
   theme/header.html na każdej stronie panelu.
   ========================================================================== */
.xcms-lucide-picker-host .dc-wf-lucide-icon,
.xcms-lucide-picker-host .ip-trigger-btn svg {
	width: 48px;
	height: 48px;
}

/* ==========================================================================
   Trigger pickera ikon w wierszu klocka (tryb "Panel"): o 50% mniejszy i do
   lewej strony. Arkusz komponentu robi z niego duży, wyśrodkowany kafel
   120×110 px z ikoną 48 px — tutaj skalujemy to do 60×55 px (ikona 24 px).
   Selektory są celowo zagnieżdżone w .mod-chat-pill-row, żeby nie zmieniać
   wyglądu pickera w innych formularzach.
   ========================================================================== */
.mod-chat-pill-row .xcms-lucide-picker-host {
	grid-column: auto;
	grid-row: auto;
	align-items: center;
	justify-content: flex-start;
}
.mod-chat-pill-row .xcms-lucide-picker-host .ip-standalone,
.mod-chat-pill-row .xcms-lucide-picker-host .ip-trigger-btn {
	width: 60px;
	min-width: 60px;
	min-height: 55px;
	height: 55px;
	border-radius: 10px !important;
}
.mod-chat-pill-row .xcms-lucide-picker-host .ip-trigger-btn:hover {
	border-style: solid !important;
	border-color: var(--theme-primary) !important;
}
.mod-chat-pill-row .xcms-lucide-picker-host .ip-trigger-btn svg,
.mod-chat-pill-row .xcms-lucide-picker-host .dc-wf-lucide-icon {
	width: 24px;
	height: 24px;
}
.mod-chat-pill-row .xcms-lucide-picker-host .ip-trigger-btn .ip-icon-preview {
	display: inline-flex;
	align-items: center;
	justify-content: center;
}