/* ===========================================================================
   WIDGET CZATU POMOCY TECHNICZNEJ — strona główna (pakiet 25, docs/14 §11)

   ⚠ KOLORY WYŁĄCZNIE ZE ZMIENNYCH STRONY (--pine, --ink, --paper, --line…).
      Landing ma własną paletę, świadomie osobną od theme.css aplikacji — ale
      widget stoi NA landingu, więc bierze jego zmienne, a nie swoje. Pierwsza
      wpisana wartość rozjedzie się z marką przy pierwszej korekcie odcienia.

   ⚠ WŁASNY PLIK, a nie dopisek do styles.css. Powód jest praktyczny: strony
      językowe i ich arkusz powstają z szablonu i bywają odtwarzane w całości,
      a widget ma to przeżyć. Wstawka w HTML-u to dwie linijki i jest w każdym
      z szesnastu plików IDENTYCZNA — pilnuje tego test architektoniczny.
   =========================================================================== */

/* ⚠ TO NIE JEST OZDOBA, A POPRAWKA BŁĘDU ZNALEZIONEGO POMIAREM W PRZEGLĄDARCE:
   atrybut `hidden` znaczy `display:none` z arkusza PRZEGLĄDARKI, a reguła klasy
   ma wyższą ważność — więc `display:flex` na oknie WYGRYWA z `hidden` i okno
   stało otwarte od pierwszej sekundy, puste, nad treścią strony. Objaw wyglądał
   jak błąd w skrypcie, a skrypt robił dokładnie to, co miał. */
.kwc-launch[hidden],.kwc-panel[hidden]{display:none}

/* ---------- przycisk w rogu ---------- */

/* ⚠ PRAWY DOLNY RÓG I OBSZAR BEZPIECZNY. `env(safe-area-inset-*)` liczy się na
   telefonach z zaokrąglonym ekranem: bez tego przycisk wchodzi pod pasek
   gestów iOS-a, czyli w miejsce, w którego dotknięcie robi co innego. */
.kwc-launch{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px;border:none;border-radius:999px;cursor:pointer;
  background:var(--pine);color:#fff;
  font-family:var(--fb);font-weight:700;font-size:15.5px;line-height:1;
  box-shadow:0 10px 30px rgba(20,112,107,.34);
  transition:transform .15s ease,box-shadow .15s ease;
}
.kwc-launch:hover{transform:translateY(-2px);box-shadow:0 14px 34px rgba(20,112,107,.42)}
.kwc-launch svg{width:20px;height:20px;flex:none}

/* Poniżej 420 px zostaje sama ikona: napis i okno czatu nie mieszczą się
   w jednym wierszu, a przycisk z ikoną dymka jest rozpoznawalny sam. */
@media(max-width:420px){
  .kwc-launch{padding:14px;gap:0}
  .kwc-launch .kwc-launch__label{display:none}
}

/* ---------- okno ---------- */

.kwc-panel{
  position:fixed;
  right:calc(18px + env(safe-area-inset-right));
  bottom:calc(18px + env(safe-area-inset-bottom));
  z-index:61;
  width:min(384px,calc(100vw - 24px));
  max-height:min(620px,calc(100vh - 36px));
  display:flex;flex-direction:column;
  background:var(--card);color:var(--ink);
  border:1px solid var(--line);border-radius:16px;
  box-shadow:0 24px 60px rgba(14,38,43,.22);
  font-family:var(--fb);font-size:15px;line-height:1.55;
  overflow:hidden;
}

/* ⚠ NA TELEFONIE OKNO ZAJMUJE CAŁY EKRAN. Okno 384 px na szerokości 360 px
   z marginesem po obu stronach zostawia na dymek 300 px — czyli cztery słowa
   w wierszu. Tu nie chodzi o estetykę: transkrypcja przestaje być czytelna. */
@media(max-width:520px){
  .kwc-panel{
    right:0;bottom:0;left:0;top:0;
    width:auto;max-height:none;border:none;border-radius:0;
  }
}

.kwc-head{
  display:flex;align-items:center;gap:12px;
  padding:14px 16px;border-bottom:1px solid var(--line);
  background:var(--paper);
}
.kwc-head__title{font-family:var(--fd);font-weight:800;font-size:17px;line-height:1.15}
.kwc-head__sub{font-size:12.5px;color:var(--ink-soft);line-height:1.3}
.kwc-x{
  margin-left:auto;flex:none;
  width:36px;height:36px;border:none;border-radius:10px;cursor:pointer;
  background:transparent;color:var(--ink-soft);font-size:20px;line-height:1;
}
.kwc-x:hover{background:var(--mist);color:var(--ink)}

/* ---------- transkrypcja ---------- */

.kwc-log{
  flex:1 1 auto;min-height:120px;overflow-y:auto;
  padding:16px;display:flex;flex-direction:column;gap:12px;
  background:var(--card);
}
.kwc-row{display:flex}
.kwc-row--me{justify-content:flex-end}
.kwc-bubble{
  max-width:86%;padding:10px 13px;border-radius:14px;
  border:1px solid var(--line);background:var(--paper);
}
.kwc-bubble--me{background:var(--mist);border-color:var(--mist)}
.kwc-bubble--staff{background:var(--card);border-color:var(--amber)}

/* ⚠ ROLA JEST NAPISANA SŁOWEM, a kolor i strona okna są drugim nośnikiem, nie
   pierwszym (ADR-020). To okno bywa czytane na zrzucie wklejonym do zgłoszenia,
   a w skali szarości różnica tła prawie znika — a „kto to powiedział" jest tu
   najważniejszą informacją w akapicie: za jednym stoi człowiek, za drugim model. */
.kwc-who{
  font-family:var(--fm);font-size:11px;font-weight:600;
  letter-spacing:.1em;text-transform:uppercase;color:var(--pine);
  margin-bottom:3px;
}
.kwc-bubble--me .kwc-who{color:var(--pine-deep)}
.kwc-bubble--staff .kwc-who{color:var(--amber-deep)}
.kwc-text{white-space:pre-wrap;overflow-wrap:anywhere}
.kwc-hint{font-size:13px;color:var(--ink-soft);padding:0 4px}

/* ---------- zdania i odmowy ---------- */

.kwc-note{
  margin:0 16px 12px;padding:11px 13px;
  border:1px solid var(--line);border-left:4px solid var(--amber);
  border-radius:10px;background:var(--paper);
  font-size:14px;
}
/* ⚠ JEDYNA WŁASNA WARTOŚĆ KOLORU W TYM PLIKU — i jest tu, bo landing NIE MA
   koloru odmowy: jego paleta to marka, tło i linie. Odmowa pomalowana bursztynem
   marki czyta się jak podpowiedź, a nie jak „nie wyszło". Zmienna stoi na oknie,
   więc jest jedno miejsce do poprawienia, gdy strona taki kolor kiedyś dostanie. */
.kwc-panel{--kwc-bad:#b0463a}
.kwc-note--bad{border-left-color:var(--kwc-bad)}

/* ---------- pole i klawisze ---------- */

.kwc-foot{
  flex:none;padding:12px 16px calc(14px + env(safe-area-inset-bottom));
  border-top:1px solid var(--line);background:var(--paper);
}
.kwc-foot label{display:block;font-size:12.5px;color:var(--ink-soft);margin-bottom:5px}
.kwc-foot textarea,.kwc-foot input{
  width:100%;padding:10px 12px;
  border:1px solid var(--line);border-radius:10px;background:var(--card);color:var(--ink);
  font-family:var(--fb);font-size:15px;line-height:1.5;resize:vertical;
}
.kwc-foot textarea:disabled,.kwc-foot input:disabled{background:var(--mist);color:var(--ink-soft)}
.kwc-count{font-family:var(--fm);font-size:12px;color:var(--ink-soft);margin-top:5px}

.kwc-actions{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:10px}
.kwc-btn{
  padding:11px 18px;border:1px solid var(--pine);border-radius:10px;cursor:pointer;
  background:var(--pine);color:#fff;
  font-family:var(--fb);font-weight:700;font-size:15px;line-height:1;
}
.kwc-btn:hover:not(:disabled){background:var(--pine-deep);border-color:var(--pine-deep)}
.kwc-btn:disabled{opacity:.55;cursor:default}
.kwc-btn--quiet{background:transparent;color:var(--ink-soft);border-color:var(--line);font-weight:600}
.kwc-btn--quiet:hover:not(:disabled){background:var(--mist);color:var(--ink);border-color:var(--line)}

/* ⚠ RUCH WYŁĄCZAMY, GDY UŻYTKOWNIK O TO POPROSIŁ. Landing robi to samo dla
   swoich wejść kart — a tu chodzi o okno, które wyskakuje nad treścią. */
@media(prefers-reduced-motion:reduce){
  .kwc-launch,.kwc-launch:hover{transition:none;transform:none}
}