/*
 * Wygląd uruchamiacza i panelu czatu OCH. Wyłącznie pod dwoma naszymi identyfikatorami —
 * na stronie marki jesteśmy GOŚCIEM i nie zmieniamy zachowania cudzych elementów.
 */

:root {
	/* Pokrętła zamiast pól w ustawieniach. Prawy dolny róg to najbardziej zatłoczone miejsce
	   w WordPressie: baner zgód, „wróć na górę”, lepki koszyk WooCommerce, widget kuriera.
	   Kolizji nie da się przewidzieć z góry, więc wdrażający przesuwa czat jedną regułą
	   w Kastomizatorze albo w motywie potomnym, bez dotykania wtyczki i bez jej aktualizacji. */
	--och-czat-prawo: 20px;
	--och-czat-dol: 20px;
	--och-czat-kolor: #0E7C66;   /* ta sama zieleń, co nagłówek panelu czatu */
	--och-czat-tekst: #FFFFFF;
}

/*
 * TA REGUŁA JEST BLIZNĄ, NIE KOSMETYKĄ. Zmierzone w tym repozytorium 22.08: atrybut `hidden`
 * przestaje chować element, gdy jakakolwiek reguła nada mu `display` — a motyw WordPressa nadaje
 * `display` przyciskom praktycznie zawsze. Skutek jest cichy: atrybut siedzi w kodzie strony,
 * a panel czatu stoi otwarty na środku sklepu i nie da się go zamknąć.
 * Reguła globalna `[hidden]` naprawiłaby to samo, ale zmieniłaby też zachowanie elementów motywu
 * i cudzych wtyczek — stąd zawężenie do naszych dwóch identyfikatorów.
 */
#och-czat-guzik[hidden],
#och-czat-panel[hidden] {
	display: none !important;
}

/* OKRĄGŁY BĄBEL 60 px — domyślny wzorzec wszystkich liderów kategorii (research 28.08);
   poprzednia pigułka z napisem była opcją, nie standardem, i wyglądała obco obok tego,
   co klienci znają z każdego innego sklepu. Etykieta tekstowa ZOSTAJE w przycisku
   (czytniki ekranu, tytuł ramki) — chowa ją font-size:0, nie usunięcie.
   Ikona jest wpisana w arkusz jako data:, w bieli — jak domyślne --och-czat-tekst; sklep
   zmieniający --och-czat-kolor na jasny musi podmienić także ikonę, o czym mówi README. */
#och-czat-guzik {
	position: fixed;
	right: var(--och-czat-prawo);
	bottom: var(--och-czat-dol);
	/* Wysoko, ale ŚWIADOMIE NIE MAKSYMALNIE: nad nami zostaje miejsce dla banera zgód, który
	   zwykle siada na 2147483647. Przykrycie go blokowałoby czynność wymaganą prawem, i to
	   akurat w tym rogu, w którym ten baner najczęściej stoi. */
	z-index: 2147483000;
	margin: 0;
	width: 60px;
	height: 60px;              /* cel dotykowy z zapasem */
	padding: 0;
	border: 0;
	border-radius: 50%;
	background-color: var(--och-czat-kolor);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M6 8h20v12H14l-6 5v-5H6z' fill='%23fff'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: center;
	background-size: 28px 28px;
	color: var(--och-czat-tekst);
	font-size: 0;              /* etykieta niewidoczna, ale wciąż JEST nazwą przycisku */
	line-height: 0;
	cursor: pointer;
	box-shadow: 0 6px 20px rgba(26, 35, 48, .25);
}

/* Otwarty czat = ikona zamknięcia — domyślne zachowanie bąbla u liderów. */
#och-czat-guzik[aria-expanded="true"] {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Cpath d='M10 10l12 12M22 10L10 22' stroke='%23fff' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
	background-size: 24px 24px;
}

/* Widoczny obrys fokusu. Usunięcie go („bo brzydki”) odbiera nawigację klawiaturą. */
#och-czat-guzik:focus-visible {
	outline: 3px solid #1A2330;
	outline-offset: 2px;
}

#och-czat-panel {
	position: fixed;
	right: var(--och-czat-prawo);
	/* Panel siada NAD przyciskiem i nigdy go nie zakrywa — ten przycisk jest jedynym wyjściem
	   z czatu, bo strona widgetu nie ma własnego zamknięcia. Zakrycie go byłoby awarią
	   dostępności, nie kosmetyką: klient zostaje w pułapce i wychodzi ze sklepu. */
	bottom: calc(var(--och-czat-dol) + 60px);
	z-index: 2147483000;
	width: min(380px, calc(100vw - 2 * var(--och-czat-prawo)));
	height: min(560px, calc(100vh - var(--och-czat-dol) - 90px));
	height: min(560px, calc(100dvh - var(--och-czat-dol) - 90px));  /* pasek adresu na telefonie */
	border-radius: 16px;
	overflow: hidden;
	background: #FFFFFF;
	box-shadow: 0 16px 48px rgba(26, 35, 48, .28);
}

#och-czat-ramka {
	display: block;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Wąski ekran: panel rozpycha się na boki, ale NADAL nie sięga dołu — patrz wyżej.
   `inset: 0` zakryłoby przycisk zamykający czat, czyli jedyne wyjście. */
@media (max-width: 480px) {
	#och-czat-panel {
		left: 8px;
		right: 8px;
		width: auto;
		height: calc(100vh - var(--och-czat-dol) - 76px);
		height: calc(100dvh - var(--och-czat-dol) - 76px);
	}
}

/* Ruch DOKŁADANY przy zgodzie systemu, nie wyłączany łatką. Przy odwrotnej kolejności każde
   niedopatrzenie kończy się animacją u kogoś, kto poprosił o jej brak — a to problem zdrowotny,
   nie estetyczny. */
@media (prefers-reduced-motion: no-preference) {
	#och-czat-guzik {
		transition: transform .12s ease, box-shadow .12s ease;
	}

	#och-czat-guzik:hover {
		transform: translateY(-1px);
		box-shadow: 0 10px 26px rgba(26, 35, 48, .3);
	}
}

/* Komunikat zastępczy — pokazywany, gdy ramka nie dała znaku życia w 8 sekund.
   NAD ramką (pozycja bezwzględna w panelu), bo pusta ramka i tak zajmuje całe pole,
   a usuwanie jej odebrałoby czatowi szansę na spóźnione wczytanie. */
#och-czat-panel #och-czat-zastepcze{
  position:absolute; inset:0; z-index:1;
  display:flex; align-items:center; text-align:center;
  padding:24px; margin:0;
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:#3b3b3b; background:#fff;
  border-radius:inherit;
}

/* Znacznik nowych odpowiedzi: LICZNIK z atrybutu, nie kropka — „3" mówi, ile zdań czeka.
   Bez migotania: ruch wpada pod `prefers-reduced-motion`, a znacznik ma być widoczny także
   dla kogoś, kto ruch wyłączył. Kolor NIE jest jedynym nośnikiem — etykieta przycisku też
   się zmienia, bo dla czytnika ekranu plakietka nie istnieje. Czerwień #B3261E: 6,5:1
   z bielą cyfr; biały pierścień oddziela od zieleni bąbla. Jawny font-size, bo przycisk
   ma font-size:0 i plakietka by go odziedziczyła. */
#och-czat-guzik.och-czat-nowa::after{
  content:attr(data-och-nowe); position:absolute; top:-4px; right:-4px;
  min-width:20px; height:20px; padding:0 5px; box-sizing:border-box;
  border-radius:10px; background:#B3261E; border:2px solid #fff;
  color:#fff; font:700 11px/16px system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-align:center;
}

/* ZACZEPKA — dymek zachęty nad bąblem (granice pokazywania: czat.js). Kolory wpisane
   dosłownie ŚWIADOMIE: dymek żyje na stronie marki, w bieli niezależnej od motywu sklepu —
   #1A2330 na #fff to 14,7:1, „×" #5C6B7E na bieli 4,7:1. */
#och-czat-zaczepka{
  position:fixed;
  right:var(--och-czat-prawo);
  bottom:calc(var(--och-czat-dol) + 72px);
  z-index:2147483000;
  display:flex; align-items:stretch;
  max-width:300px;
  background:#fff; color:#1A2330;
  border-radius:14px;
  box-shadow:0 10px 32px rgba(26,35,48,.28);
}
#och-czat-zaczepka-tekst{
  border:0; background:transparent; color:inherit;
  font:13.5px/1.45 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  text-align:left; padding:12px 2px 12px 14px; cursor:pointer;
}
#och-czat-zaczepka-zamknij{
  border:0; background:transparent; color:#5C6B7E;
  font:18px/1 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  width:44px; min-height:44px; flex:none; cursor:pointer;
}
#och-czat-zaczepka-tekst:focus-visible,
#och-czat-zaczepka-zamknij:focus-visible{
  outline:3px solid #1A2330;
  outline-offset:-3px;
}