/* =========================================================================
   Czat na zywo - warstwa wygladu
   =========================================================================
   Osobny arkusz z rozmyslem: widget nie dopisuje sie do premium-2026.css,
   zeby dwie osoby mogly pracowac nad strona rownolegle bez konfliktow.

   Jezyk wizualny jest ten sam co reszta stramapanels.com: ostre naroza (zero
   zaokraglen), granat marki #11375f, akcent niebieski var(--blue) #1764c7,
   kremowe tlo rozmowy, nadkreslenia pisane wersalikami z rozstrzeleniem.
   Skorka natywnego widgetu Odoo (fiolet #875A7B) nie jest tu w ogole uzywana,
   bo widget rysujemy sami - Odoo dostarcza wylacznie tresc rozmowy.

   Wysokosc banera zgody na ciasteczka: patrz --strama-baner-wys nizej.
   ========================================================================= */

#czat{
  --czat-granat:#11375f;
  --czat-niebieski:var(--blue,#1764c7);
  --czat-krem:#f4f2ec;
  --czat-linia:#dcd8cf;
  --czat-tekst:var(--ink,#1f2224);
  --czat-szept:#676861;

  /* Odstep od dolu krawedzi. Baner zgody na ciasteczka (druga osoba pracuje
     nad nim rownolegle) ma ustawic --strama-baner-wys na swoja wysokosc w px,
     a przycisk i okno same odsuna sie do gory. Domyslnie 0, wiec brak banera
     niczego nie psuje. */
  --czat-dol:calc(24px + var(--strama-baner-wys, 0px));
  --czat-bok:24px;

  position:fixed; inset:auto var(--czat-bok) var(--czat-dol) auto;
  z-index:800;                       /* nad naglowkiem (50), pod lightboxem (1000+) */
  font-family:var(--sans,Roboto,Arial,sans-serif);
  font-size:15px; line-height:1.5; color:var(--czat-tekst);
}

/* ---------- przycisk wywolania ---------- */
.czat-fab{
  display:inline-flex; align-items:center; gap:10px;
  height:52px; padding:0 20px 0 17px;
  background:var(--czat-granat); color:#fff;
  border:1px solid var(--czat-granat); border-radius:0;
  font:inherit; font-size:13px; font-weight:700; letter-spacing:.01em;
  cursor:pointer; transition:background .18s, border-color .18s, transform .18s;
  box-shadow:0 10px 30px rgba(17,55,95,.24);
}
.czat-fab:hover{background:var(--czat-niebieski); border-color:var(--czat-niebieski)}
.czat-fab:focus-visible{outline:2px solid var(--czat-niebieski); outline-offset:3px}
.czat-fab svg{width:20px; height:20px; flex:none; stroke:currentColor; fill:none;
  stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round}
#czat[data-stan="otwarty"] .czat-fab{opacity:0; pointer-events:none; transform:translateY(8px)}

/* ---------- okno rozmowy ---------- */
.czat-panel{
  position:absolute; right:0; bottom:0;
  width:min(384px, calc(100vw - 2 * var(--czat-bok)));
  height:min(580px, calc(100vh - var(--czat-dol) - 110px));
  display:none; flex-direction:column;
  background:#fff; border:1px solid var(--czat-linia);
  box-shadow:0 24px 64px rgba(17,55,95,.22);
}
#czat[data-stan="otwarty"] .czat-panel{display:flex; animation:czat-wjazd .2s ease-out}

/* Atrybut hidden musi wygrac z display: flex/grid ustawionym wyzej. Bez tego
   ukryty formularz albo ukryty watek i tak by sie rysowal. */
#czat [hidden]{display:none !important}

/* tekst tylko dla czytnikow ekranu (etykiety pol, podpis przycisku na telefonie) */
.czat-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}
@keyframes czat-wjazd{from{opacity:0; transform:translateY(10px)} to{opacity:1; transform:none}}

/* ---------- naglowek okna ---------- */
.czat-head{
  flex:none; display:flex; align-items:flex-start; gap:12px;
  padding:18px 16px 16px 20px;
  background:var(--czat-granat); color:#fff;
}
.czat-head > div:first-child{flex:1; min-width:0}
.czat-eyebrow{
  margin:0 0 5px; color:#94bce9;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.09em;
}
.czat-tytul{display:block; font-size:19px; font-weight:400; letter-spacing:-.02em}
.czat-stan{
  display:flex; align-items:center; gap:7px; margin-top:7px;
  font-size:11px; font-weight:700; color:#b6c9dc;
}
.czat-stan i{width:7px; height:7px; flex:none; background:#8fa4bb; border-radius:50%}
#czat[data-online="1"] .czat-stan i{background:#3fbf7f; box-shadow:0 0 0 3px rgba(63,191,127,.22)}
.czat-koniec{
  flex:none; margin-top:2px; padding:6px 10px;
  background:transparent; border:1px solid rgba(255,255,255,.28); border-radius:0;
  color:#fff; font:inherit; font-size:10px; font-weight:800;
  text-transform:uppercase; letter-spacing:.07em; cursor:pointer;
  transition:background .18s, border-color .18s;
}
.czat-koniec:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5)}
.czat-koniec:focus-visible{outline:2px solid #fff; outline-offset:2px}

.czat-x{
  flex:none; width:32px; height:32px; margin:-4px -4px 0 0;
  display:grid; place-items:center;
  background:transparent; border:1px solid rgba(255,255,255,.28); color:#fff;
  cursor:pointer; transition:background .18s, border-color .18s;
}
.czat-x:hover{background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.5)}
.czat-x:focus-visible{outline:2px solid #fff; outline-offset:2px}
.czat-x svg{width:14px; height:14px; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round}

/* ---------- dymki rozmowy ---------- */
.czat-body{
  flex:1; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  background:var(--czat-krem); padding:18px 16px;
  display:flex; flex-direction:column; gap:12px;
}
.czat-msg{
  max-width:84%; padding:10px 13px 8px;
  font-size:14.5px; white-space:pre-wrap; overflow-wrap:anywhere;
}
.czat-msg.visitor{
  align-self:flex-end; background:var(--czat-niebieski); color:#fff;
  border:1px solid var(--czat-niebieski);
}
.czat-msg.operator{
  align-self:flex-start; background:#fff; border:1px solid var(--czat-linia);
}
.czat-nazwa{
  display:flex; align-items:center; gap:6px; margin-bottom:4px;
  font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.08em;
  color:var(--czat-niebieski);
}
.czat-ai{
  padding:1px 5px; background:var(--czat-granat); color:#fff;
  font-size:9px; letter-spacing:.06em;
}
.czat-czas{
  display:block; margin-top:5px; font-size:10px; letter-spacing:.04em;
  font-variant-numeric:tabular-nums; opacity:.55;
}
.czat-msg.visitor .czat-czas{text-align:right}

/* notatka systemowa (powitanie, informacja o przekazaniu) */
.czat-nota{
  margin:0; padding:9px 12px; align-self:stretch;
  background:#fff; border-left:2px solid var(--czat-niebieski);
  font-size:13px; color:var(--czat-szept);
}

/* "pisze..." */
.czat-pisze{display:flex; gap:4px; align-items:center; padding:12px 13px}
.czat-pisze i{width:6px; height:6px; background:#9aa0a6; border-radius:50%;
  animation:czat-kropka 1.1s infinite ease-in-out}
.czat-pisze i:nth-child(2){animation-delay:.15s}
.czat-pisze i:nth-child(3){animation-delay:.3s}
@keyframes czat-kropka{0%,60%,100%{opacity:.28; transform:translateY(0)} 30%{opacity:1; transform:translateY(-3px)}}

/* przycisk "porozmawiaj z czlowiekiem" */
.czat-czlowiek{
  align-self:flex-start; margin-top:-4px;
  background:transparent; border:1px solid var(--czat-niebieski); border-radius:0;
  color:var(--czat-niebieski); font:inherit; font-size:11px; font-weight:700;
  letter-spacing:.04em; padding:7px 12px; cursor:pointer;
  transition:background .18s, color .18s;
}
.czat-czlowiek:hover{background:var(--czat-niebieski); color:#fff}
.czat-czlowiek:focus-visible{outline:2px solid var(--czat-granat); outline-offset:2px}
.czat-czlowiek[disabled]{opacity:.5; cursor:default}

/* ---------- pole wpisywania ---------- */
.czat-form{
  flex:none; display:flex; align-items:flex-end; gap:0;
  border-top:1px solid var(--czat-linia); background:#fff;
}
.czat-form textarea{
  flex:1; min-height:52px; max-height:120px; resize:none;
  padding:16px 14px; border:0; border-radius:0; background:#fff;
  font:inherit; font-size:15px; color:var(--czat-tekst);
}
.czat-form textarea:focus{outline:none; box-shadow:inset 0 0 0 1px var(--czat-niebieski)}
.czat-form textarea::placeholder{color:#9b9a93}
.czat-slij{
  flex:none; width:56px; align-self:stretch;
  display:grid; place-items:center;
  background:var(--czat-granat); border:0; color:#fff; cursor:pointer;
  transition:background .18s;
}
.czat-slij:hover{background:var(--czat-niebieski)}
.czat-slij:focus-visible{outline:2px solid var(--czat-niebieski); outline-offset:-4px}
.czat-slij[disabled]{background:#8b99aa; cursor:default}
.czat-slij svg{width:18px; height:18px; stroke:currentColor; fill:none;
  stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round}

/* ---------- stan "nikogo nie ma" / zakonczono ---------- */
.czat-info{
  flex:1; min-height:0; overflow-y:auto;
  padding:26px 20px; background:var(--czat-krem);
}
.czat-info p{margin:0 0 14px; font-size:14.5px; color:var(--czat-szept)}
.czat-info p.czat-info-lead{color:var(--czat-tekst); font-size:16px}
.czat-info .czat-eyebrow{color:var(--czat-niebieski)}
.czat-kontakt{display:grid; gap:10px; margin-top:18px}
.czat-kontakt a{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:13px 15px; background:#fff; border:1px solid var(--czat-linia);
  font-size:14px; font-weight:700; color:var(--czat-tekst);
  transition:border-color .18s, color .18s;
}
.czat-kontakt a:hover{border-color:var(--czat-niebieski); color:var(--czat-niebieski)}
.czat-kontakt a span{color:var(--czat-niebieski)}
.czat-nowa{
  margin-top:18px; background:var(--czat-niebieski); color:#fff;
  border:1px solid var(--czat-niebieski); border-radius:0;
  font:inherit; font-size:12px; font-weight:700; padding:12px 18px; cursor:pointer;
}
.czat-nowa:hover{background:#0d519f; border-color:#0d519f}

.czat-blad{
  flex:none; margin:0; padding:9px 16px; background:#fdecec;
  border-top:1px solid #f2c5c5; color:#8f1c1c; font-size:12.5px;
}

/* ---------- 390 px: przycisk mniejszy, okno na caly ekran ---------- */
@media (max-width:640px){
  #czat{--czat-bok:14px; --czat-dol:calc(14px + var(--strama-baner-wys, 0px))}
  .czat-fab{height:46px; width:46px; padding:0; justify-content:center}
  .czat-fab-txt{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
  }
  .czat-fab svg{margin:0}
  .czat-panel{
    position:fixed; right:var(--czat-bok); left:var(--czat-bok); bottom:var(--czat-dol);
    width:auto; height:min(78vh, calc(100vh - var(--czat-dol) - 78px));
  }
  .czat-head{padding:15px 13px 14px 16px}
  .czat-tytul{font-size:17px}
  .czat-body{padding:15px 13px}
  .czat-msg{max-width:88%}
}

@media (prefers-reduced-motion:reduce){
  #czat *,#czat *::before,#czat *::after{animation:none !important; transition:none !important}
}