/* Doradca print.gg - wyglad strony /doradca: rozmowa jak w czacie, pole z mikrofonem w doku na dole.
 *
 * Kolory ODCZYTANE z motywu sklepu 3.10 (`themes/print/public/css/main.*.css`), nie wymyslone:
 * przycisk koszyka sklepu to gradient #0062c5 -> #009ee0, akcent zolty #fcc300, szarosci #f4f4f4 / #ddd / #999.
 * ⛔ Przyciski doradcy sa na PELNYM #0062c5, bez gradientu: bialy tekst ma na nim kontrast 5,9:1,
 *    a na srodku gradientu sklepu (#009ee0) tylko 3,0:1. Pierwsza wersja miala pomaranczowy #ff6a00
 *    (2,9:1, i nie byl to kolor sklepu) - zlapane na kontroli kontrastu.
 */
.pgg-doradca { --pgg-d-akcent: #0062c5; --pgg-d-akcent-ciemny: #004f9f; --pgg-d-tlo: #fff; --pgg-d-ramka: #ddd; --pgg-d-tekst: #000; --pgg-d-szary: #595959; --pgg-d-jasny: #f4f4f4;
  display: flex; flex-direction: column; width: 100%; max-width: 960px; margin: 0 auto 48px; padding: calc(var(--pgg-d-zaslona, 32px) + 24px) 16px 0; color: var(--pgg-d-tekst); font-size: 16px; line-height: 1.45; }
/* ⛔ `width: 100%` i gorny odstep sa z POMIARU w motywie sklepu (3.10, /doradca-test/): `main` jest tam
   kolumna flex, wiec blok z `margin: auto` kurczyl sie do 484 px, a przyklejony naglowek sklepu
   zaslania gore tresci: na komputerze 32 px (dol naglowka 161 px, tresc od 129 px), na telefonie 1 px
   (91 i 90 px). Te liczby mierzy skrypt (`zmierzGore`) i podaje jako --pgg-d-zaslona, --pgg-d-gora
   i --pgg-d-od-gory; wartosci po przecinku w var() to zapas na wypadek braku pomiaru.
   Motyw chowa tez tytul strony (h1.uk-hidden), dlatego doradca ma wlasny naglowek. */
/* ⛔ UKLAD CZATU (Art 3.10: "pasek wpisywania przenies na dol"): rozmowa plynie od gory do dolu,
   a dok z polem jest przyklejony do dolu ekranu (`position: sticky`). Motyw sklepu ma na `main`
   `overflow: hidden` (zmierzone 3.10), a to robi z `main` pojemnik przewijania i przyklejanie do
   ekranu przestaje dzialac. `overflow: clip` przycina tak samo, ale pojemnika nie tworzy. Regula
   dotyczy tylko strony z doradca. Stara przegladarka (bez `:has` albo bez `clip`) pominie ja i dok
   zostanie pod ostatnia odpowiedzia - nadal da sie rozmawiac, tylko pole nie jedzie za ekranem. */
main.main:has(.pgg-doradca) { overflow: clip; }
/* ⛔ Sam .pgg-doradca tez dostaje border-box. Motyw sklepu ustawia to globalnie, ale makieta nie -
   i `width: 100%` plus 2 x 16 px odstepu dawalo w niej strone szersza o 32 px niz ekran telefonu
   (zmierzone 3.10: okno 422 zamiast 390). Nie polegamy na cudzym stylu. */
.pgg-doradca, .pgg-doradca * { box-sizing: border-box; }
.pgg-d-naglowek h2 { font-size: 26px; line-height: 1.2; font-weight: 700; margin: 0 0 6px; color: var(--pgg-d-tekst); }
.pgg-d-naglowek p { margin: 0 0 14px; color: var(--pgg-d-szary); }
.pgg-d-dok { position: sticky; bottom: 0; z-index: 2; margin-top: auto; padding: 10px 0 calc(10px + env(safe-area-inset-bottom, 0px)); background: var(--pgg-d-tlo); }
/* Rozmowa wjezdza pod dok lagodnie, a nie jak uciete nozem. */
.pgg-d-dok::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 18px; background: linear-gradient(to bottom, rgba(255,255,255,0), var(--pgg-d-tlo)); pointer-events: none; }
.pgg-d-start { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 10px; }
.pgg-d-start[hidden] { display: none; }
.pgg-d-pole { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--pgg-d-ramka); border-radius: 14px; padding: 10px 10px 10px 14px; background: var(--pgg-d-tlo); box-shadow: 0 2px 10px rgba(0,0,0,.06); }
.pgg-d-pole:focus-within { border-color: var(--pgg-d-akcent); }
.pgg-d-pole textarea { flex: 1; border: 0; outline: 0; resize: none; min-height: 48px; max-height: 160px; font: inherit; color: inherit; background: transparent; padding: 0; }
/* Motyw sklepu rysuje tekst-podpowiedz w pustym polu NA CZARNO (zmierzone 3.10) - wyglada wtedy jak
   wpisane pytanie. Szary #595959 na bialym ma kontrast 7:1. */
.pgg-d-pole textarea::placeholder { color: var(--pgg-d-szary); opacity: 1; }
.pgg-d-mik, .pgg-d-wyslij { flex: 0 0 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; padding: 0; }
.pgg-d-mik { background: var(--pgg-d-jasny); color: #222; }
.pgg-d-mik:hover { background: #e7e7e7; }
.pgg-d-mik.pgg-d-nagrywa { background: #fde2de; color: #b3261e; animation: pgg-d-puls 1s infinite; }
.pgg-d-mik[hidden] { display: none; }
.pgg-d-wyslij { background: var(--pgg-d-akcent); color: #fff; }
.pgg-d-wyslij:hover { background: var(--pgg-d-akcent-ciemny); }
.pgg-d-wyslij:disabled { opacity: .5; cursor: default; }
.pgg-d-mik:focus-visible, .pgg-d-wyslij:focus-visible, .pgg-d-klik:focus-visible, .pgg-d-btn:focus-visible { outline: 2px solid var(--pgg-d-akcent); outline-offset: 2px; }
@keyframes pgg-d-puls { 0% { box-shadow: 0 0 0 0 rgba(179,38,30,.35); } 100% { box-shadow: 0 0 0 10px rgba(179,38,30,0); } }
@media (prefers-reduced-motion: reduce) { .pgg-d-mik.pgg-d-nagrywa { animation: none; } }
.pgg-d-pod-polem { display: flex; justify-content: space-between; gap: 12px; margin: 6px 4px 0; font-size: 13px; color: var(--pgg-d-szary); }
.pgg-d-status { margin: 0 0 10px; padding: 12px 16px; border-radius: 12px; background: var(--pgg-d-jasny); color: #333; }
.pgg-d-status[hidden] { display: none; }
.pgg-d-status.pgg-d-blad { background: #fdecea; color: #8c1d18; }
.pgg-d-wynik:empty { display: none; }
/* Tura = dymek klienta po prawej, pod nim odpowiedz doradcy na cala szerokosc (karty potrzebuja miejsca). */
.pgg-d-tura { margin: 0 0 26px; }
.pgg-d-pytanie-klienta { width: fit-content; max-width: 86%; margin: 0 0 12px auto; padding: 10px 16px; border-radius: 18px 18px 4px 18px; background: var(--pgg-d-jasny); font-weight: 500; white-space: pre-wrap; overflow-wrap: anywhere; }
.pgg-d-czeka { display: flex; align-items: center; gap: 10px; min-height: 28px; margin: 4px 0 8px; color: var(--pgg-d-szary); }
.pgg-d-kropki { display: inline-flex; gap: 4px; }
.pgg-d-kropki i { width: 7px; height: 7px; border-radius: 50%; background: var(--pgg-d-akcent); opacity: .25; animation: pgg-d-kropka 1.2s infinite; }
.pgg-d-kropki i:nth-child(2) { animation-delay: .2s; }
.pgg-d-kropki i:nth-child(3) { animation-delay: .4s; }
@keyframes pgg-d-kropka { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pgg-d-kropki i { animation: none; opacity: .6; } }
.pgg-d-wstep { margin: 8px 0 18px; font-size: 17px; }
.pgg-d-grupa { margin: 10px 0 22px; }
/* Motyw sklepu zeruje grubosc naglowkow (zmierzone: h3 mial 400), wiec grubosc podajemy wprost. */
.pgg-d-grupa h3 { font-size: 18px; font-weight: 700; line-height: 1.3; margin: 0 0 10px; color: var(--pgg-d-tekst); }
/* Po wyslaniu strona przewija sie do nowej tury tak, zeby pytanie klienta stalo tuz pod przyklejonym
   naglowkiem sklepu. Zapas liczy skrypt (`zmierzGore`), bo zalezy od naglowka I od zapasu przewijania,
   ktory motyw sam ustawia na <html>; bez pomiaru zostaje 14 px. */
.pgg-d-tura { scroll-margin-top: var(--pgg-d-zapas, 14px); }
/* ⛔ Ostatnia wiadomosc zajmuje co najmniej ekran pod naglowkiem sklepu - jak w czatach: pytanie u gory,
   odpowiedz pod nim, pole na dole. Bez tego KROTKA odpowiedz (same pytania doradcy) po przewinieciu konczyla
   sie w polowie ekranu, dok stawal zaraz pod nia, a nizej byla pusta przestrzen i stopka sklepu (zmierzone
   na produkcji 4.10 05:10: dol doku 744 px na ekranie 844 px). Rachunek: gora wiadomosci stoi na naglowek
   + 14 px, wiadomosc ma 26 px odstepu pod soba, wiec jej dol z odstepem wypada dokladnie na dole ekranu,
   a przyklejony dok zaslania pusty koniec. 100vh na telefonie = ekran ze schowanym paskiem adresu; przy
   widocznym pasku tresc jest troche dluzsza od ekranu, a dok i tak trzyma sie dolu. */
.pgg-d-tura:last-child { min-height: calc(100vh - var(--pgg-d-gora, 0px) - 40px); }
.pgg-d-karuzela { overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; padding-bottom: 6px; }
.pgg-d-tor { display: flex; gap: 12px; }
.pgg-d-karta { flex: 0 0 200px; scroll-snap-align: start; border: 1px solid var(--pgg-d-ramka); border-radius: 12px; padding: 10px; background: var(--pgg-d-tlo); display: flex; flex-direction: column; }
.pgg-d-foto { display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 8px; background: #fafafa; }
.pgg-d-foto img { width: 100%; height: 100%; object-fit: contain; display: block; }
.pgg-d-foto-brak { display: block; width: 100%; height: 100%; background: var(--pgg-d-jasny); }
.pgg-d-cena { font-size: 19px; font-weight: 700; margin: 10px 0 2px; line-height: 1.2; }
.pgg-d-kwota { white-space: nowrap; }
.pgg-d-netto { font-size: 12px; font-weight: 600; color: var(--pgg-d-szary); white-space: nowrap; }
.pgg-d-nazwa { font-size: 14px; margin: 0 0 6px; font-weight: 600; line-height: 1.3; }
.pgg-d-nazwa a { color: inherit; text-decoration: none; }
.pgg-d-nazwa a:hover { color: var(--pgg-d-akcent); }
/* ⛔ Bez `flex: 1` na obcinanym akapicie: rozciagniety akapit pokazywal piata linie POD wielokropkiem
   (zmierzone na zrzucie 3.10). Karte dopycha przycisk (`margin-top: auto`), nie akapit. */
.pgg-d-dlaczego { font-size: 13px; color: var(--pgg-d-szary); margin: 0 0 8px; display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; }
.pgg-d-proponowane { font-size: 13px; font-weight: 600; margin: 0 0 6px; }
/* Plakietka przy pozycji, ktora trafi do koszyka zestawu (panel: "w zestawie do koszyka"). */
.pgg-d-w-zestawie { align-self: flex-start; margin: auto 0 8px; font-size: 12px; font-weight: 600; color: #0b5c2e; background: #e3f4e8; border-radius: 999px; padding: 3px 9px; }
.pgg-d-karta > .pgg-d-w-zestawie + .pgg-d-btn { margin-top: 0; }
.pgg-d-link-zestawu { font-size: 14px; color: var(--pgg-d-szary); margin: -8px 0 18px; }
.pgg-d-link-zestawu a { color: var(--pgg-d-akcent); }
.pgg-d-prawo { display: inline-flex; align-items: center; gap: 12px; margin-left: auto; }
.pgg-d-nowa { border: 0; background: none; padding: 0; font: inherit; color: var(--pgg-d-akcent); cursor: pointer; text-decoration: underline; }
.pgg-d-nowa[hidden] { display: none; }
.pgg-d-nowa:focus-visible { outline: 2px solid var(--pgg-d-akcent); outline-offset: 2px; }
.pgg-d-btn { display: inline-block; text-align: center; padding: 10px 12px; border-radius: 8px; background: var(--pgg-d-jasny); color: #000; text-decoration: none; font-weight: 600; font-size: 14px; }
.pgg-d-btn:hover { background: #e7e7e7; }
.pgg-d-karta > .pgg-d-btn { margin-top: auto; }
.pgg-d-btn-koszyk, .pgg-d-btn-glowny { background: var(--pgg-d-akcent); color: #fff; }
.pgg-d-btn-koszyk:hover, .pgg-d-btn-glowny:hover { background: var(--pgg-d-akcent-ciemny); color: #fff; }
.pgg-d-dodaj-wszystko { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 22px; }
.pgg-d-btn-glowny { padding: 14px 22px; font-size: 16px; }
.pgg-d-dopisek { font-size: 13px; color: var(--pgg-d-szary); }
.pgg-d-naglowek-pytan { margin: 14px 0 6px; font-weight: 600; }
.pgg-d-pytania, .pgg-d-podpowiedzi { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 14px; }
.pgg-d-klik { border: 1px solid var(--pgg-d-ramka); background: var(--pgg-d-tlo); color: #000; border-radius: 999px; padding: 9px 14px; font: inherit; font-size: 14px; cursor: pointer; text-align: left; }
.pgg-d-pytania .pgg-d-klik { border-radius: 12px; background: #fafafa; }
.pgg-d-klik:hover { border-color: var(--pgg-d-akcent); color: var(--pgg-d-akcent); }
.pgg-d-alternatywy h3 { color: var(--pgg-d-szary); font-weight: 500; }
.pgg-d-pusty-koszyk { margin: 16px 0; }
/* ⛔ Na telefonie karta ma 44% szerokosci, nie sztywne 168 px. Przy 168 px dwie karty wypelnialy ekran
   CO DO PIKSELA i trzecia byla niewidoczna - klient nie wiedzial, ze karuzele da sie przesunac
   (zmierzone na zrzucie 390 px, 3.10). Przy 44% trzecia karta wystaje zza krawedzi. */
@media (max-width: 600px) { .pgg-doradca { font-size: 15px; } .pgg-d-karta { flex-basis: 44%; min-width: 140px; } .pgg-d-btn-glowny { width: 100%; } .pgg-d-pod-polem > span:first-child { display: none; } }
/* TELEFON: dok ma stac na dole ekranu takze przy PUSTEJ rozmowie, wiec doradca zajmuje co najmniej
   reszte pierwszego ekranu (`margin-top: auto` doku dopycha go do dolu). `svh` = wysokosc ekranu
   z widocznym paskiem adresu; `vh` przed nim jest dla przegladarek, ktore `svh` nie znaja.
   ⛔ Pole ma 16 px: iPhone przy mniejszej czcionce POWIEKSZA strone po dotknieciu pola. */
@media (max-width: 600px) {
  .pgg-doradca { margin-bottom: 0; min-height: calc(100vh - var(--pgg-d-od-gory, 90px)); min-height: calc(100svh - var(--pgg-d-od-gory, 90px)); }
  .pgg-d-naglowek h2 { font-size: 22px; }
  .pgg-d-pole textarea { font-size: 16px; }
  .pgg-d-start { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; margin-right: -16px; padding-right: 16px; }
  .pgg-d-start::-webkit-scrollbar { display: none; }
  .pgg-d-start .pgg-d-klik { flex: 0 0 auto; white-space: nowrap; }
}