/* RG Czat — okno Ady. Kolory z tokenów motywu (--rg-*), więc tryb ciemny działa sam. */
.rg-czat {
	--c-akcent: var(--rg-accent, #0f7450);
	--c-akcent-ink: var(--rg-accent-ink, #fff);
	--c-tlo: var(--rg-surface, #fff);
	--c-tlo-2: var(--rg-surface-2, #f8f9fb);
	--c-tlo-3: var(--rg-surface-3, #e6eaf0);
	--c-tekst: var(--rg-text, #111827);
	--c-tekst-2: var(--rg-text-2, #4b5563);
	--c-linia: var(--rg-line-strong, rgba(15, 23, 42, .18));
	--c-cien: var(--rg-shadow-lg, 0 40px 80px -40px rgba(15, 23, 42, .28));
	position: fixed;
	right: max(16px, env(safe-area-inset-right));
	bottom: max(16px, env(safe-area-inset-bottom));
	z-index: 980;
	font-family: var(--rg-font-body, system-ui, sans-serif);
	font-size: 15px;
	line-height: 1.5;
	color: var(--c-tekst);
}
.rg-czat[hidden], .rg-czat [hidden] { display: none !important; }
.rg-czat .screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; overflow: hidden;
	clip: rect(0 0 0 0); white-space: nowrap; margin: -1px; padding: 0; border: 0;
}
.rg-czat__pulapka { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; }

/* ── przycisk startowy: twarz Ady + napis ── */
.rg-czat__start {
	display: flex; align-items: center; gap: 10px;
	margin-left: auto; padding: 4px 18px 4px 4px;
	border: 1px solid var(--c-linia); border-radius: 999px;
	background: var(--c-tlo); color: var(--c-tekst);
	box-shadow: var(--c-cien); cursor: pointer;
	font: 600 15px/1 var(--rg-font-head, inherit);
	transition: transform .2s var(--rg-ease, ease), box-shadow .2s;
}
.rg-czat__start:hover { transform: translateY(-2px); }
.rg-czat__start:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 3px; }
.rg-czat__start img {
	width: 56px; height: 56px; border-radius: 50%; object-fit: cover;
	box-shadow: 0 0 0 2px var(--c-akcent);
}
.rg-czat__start { position: relative; }
.rg-czat__start::after { /* zielona kropka „dostępna” przy awatarze */
	content: ""; position: absolute; left: 46px; bottom: 6px;
	width: 12px; height: 12px; border-radius: 50%;
	background: var(--rg-pass, #0b7a43); border: 2px solid var(--c-tlo);
}
.rg-czat--otwarty .rg-czat__start { display: none; }

/* ── okno ── */
.rg-czat__okno {
	display: flex; flex-direction: column;
	width: min(390px, calc(100vw - 32px));
	height: min(620px, calc(100dvh - 32px));
	background: var(--c-tlo);
	border: 1px solid var(--c-linia); border-radius: var(--rg-r-lg, 24px);
	box-shadow: var(--c-cien); overflow: hidden;
}
.rg-czat__glowa {
	display: flex; align-items: center; gap: 12px;
	padding: 14px 14px 14px 16px; border-bottom: 1px solid var(--c-linia);
	background: var(--c-tlo-2);
}
.rg-czat__glowa img { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; }
.rg-czat__glowa div { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.rg-czat__glowa strong { font: 700 16px/1.2 var(--rg-font-head, inherit); }
.rg-czat__rola { font-size: 13px; color: var(--c-tekst-2); }
.rg-czat--live .rg-czat__rola::after { content: " · łączę z Robertem"; color: var(--c-akcent); }
.rg-czat__zamknij {
	width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: transparent; color: var(--c-tekst); font-size: 26px; line-height: 1; cursor: pointer;
}
.rg-czat__zamknij:hover { background: var(--c-tlo-3); }
.rg-czat__zamknij:focus-visible { outline: 3px solid var(--c-akcent); }

.rg-czat__wiadomosci {
	flex: 1; overflow-y: auto; overscroll-behavior: contain;
	padding: 16px; display: flex; flex-direction: column; gap: 10px;
}
.rg-czat__wiad {
	max-width: 86%; padding: 10px 14px; border-radius: 16px;
	overflow-wrap: anywhere;
}
.rg-czat__wiad p { margin: 0; }
.rg-czat__wiad p + p, .rg-czat__wiad p + ul, .rg-czat__wiad ul + p { margin-top: 6px; }
.rg-czat__wiad ul { margin: 4px 0 0; padding-left: 18px; }
.rg-czat__wiad--ada { align-self: flex-start; background: var(--c-tlo-3); border-bottom-left-radius: 4px; }
.rg-czat__wiad--ty { align-self: flex-end; background: var(--c-akcent); color: var(--c-akcent-ink); border-bottom-right-radius: 4px; }
.rg-czat__wiad--robert {
	align-self: flex-start; background: var(--c-tlo-2);
	border: 1px solid var(--c-akcent); border-bottom-left-radius: 4px;
}
.rg-czat__kto { display: block; font: 700 12px/1.4 var(--rg-font-head, inherit); color: var(--c-akcent); }
.rg-czat__wiad--system {
	align-self: center; max-width: 100%; text-align: center;
	background: none; padding: 2px 8px; font-size: 13px; color: var(--c-tekst-2);
}

.rg-czat__pisze { display: flex; gap: 4px; padding: 14px; }
.rg-czat__pisze span {
	width: 7px; height: 7px; border-radius: 50%; background: var(--c-tekst-2);
	animation: rg-czat-kropka 1.2s infinite ease-in-out;
}
.rg-czat__pisze span:nth-child(2) { animation-delay: .15s; }
.rg-czat__pisze span:nth-child(3) { animation-delay: .3s; }
@keyframes rg-czat-kropka { 0%, 60%, 100% { opacity: .3; transform: none; } 30% { opacity: 1; transform: translateY(-3px); } }

.rg-czat__podpowiedzi { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 4px; }
.rg-czat__chip {
	padding: 7px 12px; border: 1px solid var(--c-linia); border-radius: 999px;
	background: var(--c-tlo); color: var(--c-tekst); font: inherit; font-size: 14px; cursor: pointer;
}
.rg-czat__chip:hover { border-color: var(--c-akcent); color: var(--c-akcent); }

.rg-czat__akcje { display: flex; flex-wrap: wrap; gap: 8px; align-self: flex-start; }
.rg-czat__btn {
	display: inline-flex; align-items: center; justify-content: center;
	padding: 9px 16px; border: 1px solid var(--c-akcent); border-radius: 999px;
	background: var(--c-akcent); color: var(--c-akcent-ink);
	font: 600 14px/1.2 var(--rg-font-head, inherit); text-decoration: none; cursor: pointer;
}
.rg-czat__btn:hover { filter: brightness(1.08); }
.rg-czat__btn:disabled { opacity: .6; cursor: wait; }
.rg-czat__btn--drugi { background: transparent; color: var(--c-akcent); }
.rg-czat__btn:focus-visible, .rg-czat__chip:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 2px; }

/* ── formularz połączenia z Robertem ── */
.rg-czat__live {
	display: flex; flex-direction: column; gap: 10px;
	padding: 14px; border: 1px solid var(--c-linia); border-radius: var(--rg-r, 14px);
	background: var(--c-tlo-2);
}
.rg-czat__live p { margin: 0; }
.rg-czat__live-tytul { font: 700 15px/1.3 var(--rg-font-head, inherit); }
.rg-czat__live-opis { font-size: 13px; color: var(--c-tekst-2); }
.rg-czat__live label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; font-weight: 600; }
.rg-czat__live input[type=text], .rg-czat__live input[type=tel], .rg-czat__live input[type=email] {
	padding: 9px 12px; border: 1px solid var(--c-linia); border-radius: var(--rg-r-sm, 6px);
	background: var(--c-tlo); color: var(--c-tekst); font: inherit; font-size: 16px;
}
.rg-czat__live input:focus { outline: 2px solid var(--c-akcent); outline-offset: 0; }
.rg-czat__live .rg-czat__zgoda { flex-direction: row; align-items: flex-start; gap: 8px; font-weight: 400; font-size: 12px; color: var(--c-tekst-2); }
.rg-czat__zgoda input { margin-top: 2px; flex: none; accent-color: var(--c-akcent); }
.rg-czat__zgoda a, .rg-czat__stopka a { color: inherit; }
.rg-czat__live-blad { color: var(--rg-err-text, #b42318); font-size: 13px; }
.rg-czat__live-przyciski { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── pole wpisywania ── */
.rg-czat__pole {
	display: flex; align-items: flex-end; gap: 8px;
	padding: 10px 12px; border-top: 1px solid var(--c-linia); background: var(--c-tlo);
}
.rg-czat__pole textarea {
	flex: 1; resize: none; max-height: 120px; min-height: 42px; overflow-y: hidden;
	padding: 10px 12px; border: 1px solid var(--c-linia); border-radius: 12px;
	background: var(--c-tlo-2); color: var(--c-tekst);
	font: inherit; font-size: 16px; line-height: 1.4;
}
.rg-czat__pole textarea:focus { outline: 2px solid var(--c-akcent); outline-offset: 0; }
.rg-czat__pole button {
	flex: none; width: 42px; height: 42px; border: 0; border-radius: 50%;
	background: var(--c-akcent); color: var(--c-akcent-ink); cursor: pointer;
	display: grid; place-items: center;
}
.rg-czat__pole button:focus-visible { outline: 3px solid var(--c-akcent); outline-offset: 2px; }
.rg-czat__stopka { margin: 0; padding: 0 14px 10px; font-size: 11px; color: var(--c-tekst-2); background: var(--c-tlo); }

/* ── telefon: okno na cały ekran, przycisk sama twarz ── */
@media (max-width: 599px) {
	.rg-czat--otwarty { inset: 0; right: 0; bottom: 0; }
	.rg-czat--otwarty .rg-czat__okno { width: 100vw; height: 100dvh; border-radius: 0; border: 0; }
	.rg-czat__start { padding: 3px; }
	.rg-czat__start-tekst { display: none; }
	.rg-czat__start img { width: 54px; height: 54px; }
	.rg-czat__start::after { left: auto; right: 4px; bottom: 4px; }
}

/* Motywowy przycisk „Wróć na górę” (.rg-top) stoi w tym samym rogu (16/16 px) i był zasłonięty
   przez przycisk Ady (test 16.10.2026) — podnosimy go nad czat. Ten plik ładuje się tylko tam, gdzie jest czat. */
html body .rg-top { bottom: calc(max(16px, env(safe-area-inset-bottom)) + 76px); }

@media (prefers-reduced-motion: reduce) {
	.rg-czat__start, .rg-czat__pisze span { transition: none; animation: none; }
}
@media print { .rg-czat { display: none !important; } }