/*
 * eMMa AI - style widgetu i animacje awatara Emmbotek.
 * Branding: baza #133B47 + ciepla zloc. Kontrast tekstu >= 4.5:1.
 * Wszystkie animacje wylaczaja sie przy prefers-reduced-motion.
 */

.emma {
  --emma-base: #133B47;
  --emma-base-strong: #0D2B34;
  --emma-accent: #D9A441;
  --emma-accent-strong: #B5822A;
  /* Roz pudrowy strony (src/index.css: "roz pudrowy #EAA1C6 - akcent, ceny").
     `deep` i `ink` to przyciemnienia do obramowan i tekstu - sam #EAA1C6 jest
     za jasny na napis. */
  --emma-pink: #EAA1C6;
  --emma-pink-soft: #F6C8DE;
  --emma-pink-deep: #C2537F;
  --emma-pink-ink: #4A1B31;
  --emma-surface: #FFFFFF;
  --emma-surface-alt: #F3F6F7;
  --emma-text: #16242A;
  --emma-text-soft: #4C5C63;
  --emma-on-dark: #F4F8F9;
  --emma-radius: 20px;
  --emma-shadow: 0 18px 48px rgba(6, 32, 40, .24);
  /*
     Powiekszenie panelu na komputerze. Skalujemy caly panel zamiast podnosic
     kilkadziesiat wartosci w pikselach - dzieki temu proporcje, ktore zostaly
     zmierzone i dopasowane (naglowek, miny oceny, chipsy), zostaja nienaruszone.
     Na telefonie panel i tak zajmuje caly ekran, wiec tam skala nie obowiazuje.
  */
  --emma-skala: 1.28;

  position: fixed;
  right: 20px;
  bottom: 20px;
  z-index: 2147483000;
  /*
     Stos krojow musi obsluzyc wszystkie dziewiec jezykow rozmowy. Segoe UI i Roboto
     pokrywaja lacinke z polskimi znakami oraz cyrylice (rosyjski, ukrainski), ale NIE
     maja hangulu - bez dalszych pozycji koreanski trafia na losowy kroj systemowy
     i miesza sie z reszta interfejsu w jednym zdaniu.
     Dokladamy wiec rodziny koreanskie kolejno dla Windows, macOS i Androida.
  */
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
    "Malgun Gothic", "Apple SD Gothic Neo", "Noto Sans KR", "Noto Sans",
    Arial, sans-serif;
  font-size: 15px;
  line-height: 1.5;
  color: var(--emma-text);
}

.emma *,
.emma *::before,
.emma *::after { box-sizing: border-box; }

/* ---------------------------------------------------------------- side tab */

/*
   Zakladka jako PRZYPINKA przy prawej krawedzi, a nie kolko w rogu.

   Powod jest praktyczny: w prawym dolnym rogu strony siedzi juz przycisk
   "przewin do gory" (`ScrollToTop`, fixed right-4 bottom-4). Dwa okragle przyciski
   jeden na drugim to najgorsze mozliwe miejsce - uzytkownik trafia w zly.
   Przypinka na wysokosci polowy ekranu omija ten konflikt i jest widoczna od razu
   po wejsciu, bez przewijania.

   Poza uzyciem zakladka jest przygaszona i mniejsza; pod kursorem wysuwa sie
   spod krawedzi i odzyskuje pelna sile koloru.
*/
.emma__tab {
  position: fixed;
  right: 0;
  top: 50%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  padding: 10px 8px 12px;
  border: 0;
  /* zaokraglone tylko od strony tresci - od prawej przylega do krawedzi ekranu */
  border-radius: 20px 0 0 20px;
  background: var(--emma-base);
  color: var(--emma-on-dark);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--emma-shadow);
  opacity: .82;
  transform: translateY(-50%) scale(.85);
  transform-origin: right center;
  transition: transform .2s ease, background-color .18s ease, opacity .2s ease;
}

.emma__tab:hover,
.emma__tab:focus-visible {
  background: var(--emma-base-strong);
  opacity: 1;
  transform: translateY(-50%) scale(.92) translateX(-4px);
}
.emma__tab:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 3px; }
.emma[data-open="true"] .emma__tab { opacity: 0; pointer-events: none; }

/* Napis czytany z dolu do gory - tak, jak na zakladkach w segregatorze. */
.emma__tab-label {
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  letter-spacing: .02em;
  white-space: nowrap;
}

/*
   Pulsowanie zakladki - zaproszenie do klikniecia.

   Trzy rzeczy, ktore odrozniaja to od nachalnego migania:
   - pulsuje sam pierscien wokol zakladki, nie ona sama; tresc sie nie rusza,
   - gasnie pod kursorem i przy fokusie, bo skoro ktos juz tu jest, nie trzeba go wolac,
   - znika na dobre, gdy uzytkownik raz otworzyl czat (atrybut data-poznany ustawia
     skrypt na podstawie pamieci przegladarki). Zaproszenie ma byc jednorazowe,
     a nie wiecznie migajacym banerem.
*/
.emma__tab::after {
  content: "";
  position: absolute;
  inset: -4px -2px -4px -6px;
  border-radius: inherit;
  border: 2px solid var(--emma-accent);
  opacity: 0;
  pointer-events: none;
  animation: emma-tab-puls 2.8s ease-out infinite;
}
.emma__tab:hover::after,
.emma__tab:focus-visible::after,
.emma[data-open="true"] .emma__tab::after,
.emma[data-poznany="true"] .emma__tab::after { animation: none; opacity: 0; }

@keyframes emma-tab-puls {
  0%   { opacity: .85; transform: scale(1); }
  70%  { opacity: 0;   transform: scale(1.35); }
  100% { opacity: 0;   transform: scale(1.35); }
}

/*
   Maskotka to najmocniejszy element marki asystenta, a w 44 px byla znaczkiem,
   na ktorym nie dalo sie rozpoznac miny. Podwojenie rozmiaru robi z niej
   rozpoznawalna postac - i to ona zaprasza do klikniecia, nie sam napis.
*/
.emma__tab-avatar {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--emma-surface-alt);
  overflow: hidden;
  flex: 0 0 auto;
}

/* ------------------------------------------------------------------- panel */

.emma__panel {
  position: absolute;
  right: 0;
  bottom: 64px;
  width: 380px;
  height: 560px;
  max-height: calc(100vh - 110px);
  display: flex;
  flex-direction: column;
  background: var(--emma-surface);
  border-radius: var(--emma-radius);
  /*
     Glebia budowana warstwami, a nie jednym duzym cieniem: waski cien kontaktowy
     tuz pod krawedzia, szeroki i miekki dalej, do tego jasny rant u gory i ciemny
     u dolu od srodka. Dzieki temu panel wyglada, jakby lezal NAD strona, a nie byl
     do niej doklejony.
  */
  box-shadow:
    0 1px 2px rgba(19, 59, 71, .16),
    0 8px 20px rgba(19, 59, 71, .18),
    0 28px 60px -12px rgba(19, 59, 71, .34),
    inset 0 1px 0 rgba(255, 255, 255, .55),
    inset 0 -1px 0 rgba(19, 59, 71, .12);
  overflow: hidden;
  animation: emma-panel-in .22s ease-out;
}

.emma__panel[hidden] { display: none; }

@keyframes emma-panel-in {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/*
   Wersja komputerowa: panel powiekszony o 28%. Rosnie w lewo i w gore od swojego
   prawego dolnego naroznika, wiec nie wychodzi poza krawedz ekranu ani nie
   przykrywa zakladki.

   `max-height` musi byc podzielone przez skale, bo przegladarka liczy je PRZED
   powiekszeniem - bez tego dzielenia panel na nizszym ekranie (np. 768 px)
   wystawalby ponad gorna krawedz.

   Animacja wejscia ma wlasny wariant, bo tamta konczyla sie na `transform: none`
   i skasowalaby powiekszenie w ostatniej klatce.
*/
@media (min-width: 641px) {
  .emma__panel {
    transform-origin: bottom right;
    transform: scale(var(--emma-skala));
    max-height: calc((100vh - 120px) / var(--emma-skala));
    animation-name: emma-panel-in-duzy;
  }
}

@keyframes emma-panel-in-duzy {
  from { opacity: 0; transform: scale(var(--emma-skala)) translateY(12px); }
  to   { opacity: 1; transform: scale(var(--emma-skala)); }
}

/* ------------------------------------------------------------------ naglowek */

.emma__header {
  display: flex;
  flex-wrap: wrap;                 /* podtytul schodzi do wlasnego wiersza */
  align-items: center;
  /* 10 px zamiast 14: w naglowku sa teraz cztery odstepy (awatar, tytul, jezyk,
     kosz, zamkniecie). Przy 14 px na tytul zostawalo 102 px przy potrzebnych
     109 i napis "Emmbotek" konczyl sie wielokropkiem. */
  gap: 10px;
  row-gap: 0;                      /* odstep wiersza ustawia margines podtytulu */
  padding: 12px 14px;
  background: var(--emma-base);
  color: var(--emma-on-dark);
}

/*
   Ten sam powod co przy zakladce: w naglowku maskotka ma byc widoczna, nie ikonkowa.

   80 px to wartosc PO wprowadzeniu skali panelu (--emma-skala). Na ekranie daje
   to ok. 102 px, czyli dokladnie tyle, ile maskotka miala wczesniej przy panelu
   bez skalowania. Zostawienie 104 px robiloby z niej 133 px i naglowek zjadalby
   prawie 30% okna - zmierzone: rozmowie zostawalo wtedy 25,9% wysokosci panelu.
*/
.emma__avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .1);
  flex: 0 0 auto;
  overflow: hidden;
}

/*
   Tekst naglowka przycina sie wielokropkiem zamiast zawijac.

   Bez tego rozsuniety kosz ("Na pewno?") zabieral szerokosc, a status zawijal sie
   na piec linijek i caly naglowek puchl. Przyciecie trzyma stala wysokosc niezaleznie
   od tego, co dzieje sie obok - i przy okazji ratuje waskie panele.
*/
/*
   Kroj naglowka: Lustria - ta sama, ktora tworzy logo eMMa Studio. Uzywamy jej
   WYLACZNIE tutaj, w tytule i podtytule panelu, zeby naglowek czytal sie jak
   podpis marki, a nie jak kolejny pasek interfejsu. Reszta widgetu zostaje przy
   kroju systemowym - jest go duzo wiecej i musi obsluzyc dziewiec jezykow.

   Wlasna kopia lezy obok arkusza, ale w stosie jest DRUGA. Gdy widget stoi na
   emmastudio.pl, strona ma juz zadeklarowana "Lustria" - przegladarka siega po
   nia i drugiego pliku nie pobiera. Poza strona rezerwowa kopia wchodzi do gry.

   Lustria pokrywa lacinke z polskimi znakami. Cyrylica i hangul (rosyjski,
   ukrainski, koreanski) spadaja na Lore i kroje systemowe - dobor kroju idzie
   znak po znaku, wiec taki podtytul po prostu wyglada jak reszta widgetu.
*/
@font-face {
  font-family: "EmmbotekLogo";
  src: url("lustria.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* `flex-basis: 0` jest tu istotne: przy `auto` blok tytulu rosl do swojej
   naturalnej szerokosci i wypychal przyciski do drugiego wiersza - naglowek
   puchl wtedy do 31% panelu. Z baza zerowa to tytul ustepuje miejsca. */
.emma__headtext { flex: 1 1 0; min-width: 0; }
.emma__title {
  margin: 0;
  font-family: "Lustria", "EmmbotekLogo", "Lora", Georgia, "Times New Roman", serif;
  font-size: 21px;
  font-weight: 400;                /* Lustria ma jedna grubosc - pogrubienie by ja zniekształcilo */
  letter-spacing: .01em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/*
   Podtytul zajmuje caly wiersz pod naglowkiem (`flex: 1 0 100%` w kontenerze
   z `flex-wrap`). Obok awatara zostawalo dla niego 130 px przy potrzebnych 272,
   wiec urywal sie na "Asystent eMMa S...". Wlasny wiersz daje pelne 348 px.
   Cienka kreska u gory oddziela go od tytulu, zeby naglowek nie zlal sie w blok.
*/
.emma__status {
  flex: 1 0 100%;
  margin: 8px 0 0;
  padding-top: 6px;
  border-top: 1px solid rgba(255, 255, 255, .14);
  font-family: "Lustria", "EmmbotekLogo", "Lora", Georgia, "Times New Roman", serif;
  font-size: 12.5px;
  line-height: 1.3;
  color: #CBDEE4;
  /* Dwie linijki zamiast jednej z wielokropkiem: podtytul dostaje dopisywana
     dygresje, ktora go wydluza. Przy `nowrap` stukanie na maszynie konczyloby
     sie od razu na wielokropku i nie bylo by go widac. Zacisk na dwoch
     wierszach trzyma wysokosc naglowka w ryzach niezaleznie od tlumaczenia. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  min-height: 2.6em;               /* miejsce na drugi wiersz z gory, zeby naglowek nie podskakiwal */
}

/*
   Ikony w naglowku wygladaly jak sam rysunek zawieszony w powietrzu - 34 px bez tla
   i bez obwodki, wiec nie bylo po nich widac, ze w ogole sa klikalne. Teraz to
   pelnoprawne przyciski: 38 px pola dotyku (minimum dla palca), widoczna obwodka
   i tlo, ktore reaguje na najechanie i wcisniecie.
*/
/*
   Przyciski naglowka: szklane krazki na ciemnym tle.

   Zamiast plaskiego kolka z obwodka - warstwa rozmytego tla (backdrop-filter),
   delikatny rant od srodka i cien pod spodem. Na ciemnym naglowku szklo czyta sie
   jako element uniesiony nad tlem, a nie naklejony na nie.

   `flex: 0 0 38px` jest konieczne, nie ozdobne: przyciski sa elementami nagłowka
   ustawionego na flex, a po powiekszeniu maskotki zabraklo w nim miejsca. Domyslne
   kurczenie sciskalo je do 26x38 px i `border-radius: 50%` robil elipse zamiast kola.
*/
.emma__icon-btn {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 38px;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, .22);
  border-radius: 999px;
  background: rgba(255, 255, 255, .12);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--emma-on-dark);
  cursor: pointer;
  overflow: hidden;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, .3),
    inset 0 1px 0 rgba(255, 255, 255, .34);
  transition: background-color .18s ease, border-color .18s ease, transform .14s ease,
              box-shadow .18s ease, flex-basis .22s ease, width .22s ease;
}
.emma__icon-btn:hover {
  background: rgba(255, 255, 255, .22);
  border-color: rgba(255, 255, 255, .45);
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, .34), inset 0 1px 0 rgba(255, 255, 255, .45);
}
.emma__icon-btn:active {
  transform: translateY(1px) scale(.96);
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3), inset 0 2px 5px rgba(0, 0, 0, .3);
}
.emma__icon-btn:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 3px; }
.emma__icon-btn svg { width: 19px; height: 19px; display: block; }

/* Etykieta wjezdza dopiero po uzbrojeniu kosza - poza tym nie zajmuje miejsca. */
.emma__btn-label {
  position: absolute;
  opacity: 0;
  font-size: 11.5px;
  font-weight: 700;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity .16s ease;
}

/* --- zamkniecie: krzyzyk obraca sie o cwierc obrotu --- */
.emma__icon-btn--zamknij svg { transition: transform .22s ease; }
.emma__icon-btn--zamknij:hover svg { transform: rotate(90deg); }

/* --- kosz: wieko unosi sie przy najechaniu --- */
.emma__kosz-wieko { transition: transform .2s ease; transform-origin: 12px 7px; }
.emma__icon-btn--kosz:hover .emma__kosz-wieko { transform: translateY(-2px) rotate(-14deg); }
.emma__icon-btn--kosz:hover {
  background: rgba(234, 161, 198, .3);
  border-color: rgba(234, 161, 198, .6);
}

/*
   Stan uzbrojony: przycisk rozsuwa sie w pastylke z pytaniem, ikona znika.
   Drugie klikniecie kasuje rozmowe. Rozbraja sie sam po czterech sekundach.
*/
.emma__icon-btn--kosz[data-uzbrojony="true"] {
  flex-basis: 104px;
  width: 104px;
  background: rgba(234, 161, 198, .92);
  border-color: rgba(234, 161, 198, 1);
  color: #4A1030;
  box-shadow: 0 4px 12px rgba(234, 161, 198, .45), inset 0 1px 0 rgba(255, 255, 255, .5);
}
.emma__icon-btn--kosz[data-uzbrojony="true"] svg { display: none; }
.emma__icon-btn--kosz[data-uzbrojony="true"] .emma__btn-label { opacity: 1; position: static; }

/* ------------------------------------------------------------ wybor jezyka */
/*
   Szkola uczy dziewieciu jezykow, wiec rozmowa z Emmbotkiem w kazdym z nich jest
   jednoczesnie pokazem oferty i darmowa praktyka dla kursanta. Pasek jest waski
   i stonowany - to opcja, nie glowna akcja.
*/
.emma__jezyki {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 14px;
  background: linear-gradient(180deg, #F3F8F0 0%, var(--emma-surface) 100%);
  border-bottom: 1px solid #E3EAEC;
  font-size: 11.5px;
}
.emma__jezyki-etykieta { color: var(--emma-text-soft); flex: 0 0 auto; }
.emma__jezyk-pole { position: relative; flex: 1 1 auto; min-width: 0; }

.emma__jezyk-przycisk {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 5px 10px;
  border: 1px solid #CFDBE0;
  border-radius: 999px;
  background: var(--emma-surface);
  font: inherit;
  font-size: 12px;
  color: var(--emma-text);
  cursor: url("kursor-lapka.svg") 12 8, pointer !important;
  transition: border-color .16s ease, box-shadow .16s ease;
}
.emma__jezyk-przycisk:hover { border-color: #AFC2C9; }
.emma__jezyk-przycisk:focus-visible {
  outline: none;
  border-color: var(--emma-base);
  box-shadow: 0 0 0 3px rgba(19, 59, 71, .14);
}
.emma__jezyk-nazwa { flex: 1 1 auto; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Strzalka rysowana obramowaniem - bez dodatkowego pliku i bez znaku, ktorego
   moglo by zabraknac w kroju. */
.emma__jezyk-strzalka {
  flex: 0 0 auto;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--emma-text-soft);
  transition: transform .18s ease;
}
.emma__jezyk-przycisk[aria-expanded="true"] .emma__jezyk-strzalka { transform: rotate(180deg); }

/* Flaga: male, ostre prostokaty z cienka obwodka, zeby biel flagi Polski
   nie zlewala sie z bialym tlem listy. */
.emma__flaga {
  flex: 0 0 auto;
  display: block;
  width: 20px;
  height: 14px;
  border-radius: 2px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(19, 59, 71, .18);
}
/* Rysunek zawsze wypelnia swoja ramke. Bez tego SVG bral rozmiar z viewBox
   (20x14) i przy wiekszej ramce zostawal 2-pikselowy goly pasek po prawej
   i u dolu - obwodka ramki nie pokrywala sie wtedy z krawedzia flagi. */
.emma__flaga svg { display: block; width: 100%; height: 100%; }

.emma__jezyk-lista {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 5px);
  z-index: 5;
  max-height: 236px;
  overflow-y: auto;
  padding: 5px;
  border: 1px solid #D8E4DA;
  border-radius: 14px;
  background: var(--emma-surface);
  box-shadow: 0 12px 28px rgba(19, 59, 71, .2);
}
.emma__jezyk-lista[hidden] { display: none; }

.emma__jezyk-opcja {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font: inherit;
  font-size: 12.5px;
  color: var(--emma-text);
  cursor: url("kursor-lapka.svg") 12 8, pointer !important;
  transition: background-color .14s ease;
}
.emma__jezyk-opcja:hover,
.emma__jezyk-opcja:focus-visible { background: #EEF4EC; outline: none; }
.emma__jezyk-opcja[aria-selected="true"] { background: var(--emma-base); color: var(--emma-on-dark); font-weight: 600; }
.emma__jezyk-opcja[aria-selected="true"] .emma__flaga { box-shadow: 0 0 0 1px rgba(255, 255, 255, .5); }

/* ---------------------------------------------------------------- rozmowa */

.emma__log {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 16px 14px 8px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: var(--emma-surface);
  scroll-behavior: smooth;
}
.emma__log:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: -3px; }

.emma__row { display: flex; flex-direction: column; max-width: 86%; }
.emma__row--user { align-self: flex-end; align-items: flex-end; }

/*
   Odpowiedzi Emmbotka maja miniature maskotki z lewej. Uklad siatkowy zamiast
   kolumny: maskotka siedzi w pierwszej kolumnie, a WSZYSTKO pozostale - dymek
   i przyciski CTA dokladane pozniej przez skrypt - laduje w drugiej, bez
   przebudowywania struktury w JS.
*/
.emma__row--emma {
  align-self: flex-start;
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 8px;
  align-items: start;
  max-width: 94%;
}
.emma__row--emma > *:not(.emma__msg-avatar) { grid-column: 2; }

.emma__msg-avatar {
  grid-column: 1;
  grid-row: 1;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--emma-surface-alt);
  object-fit: cover;
  flex: 0 0 auto;
  /* lekki cien odcina maskotke od tla rozmowy, nie robiac z niej przycisku */
  box-shadow: 0 1px 3px rgba(19, 59, 71, .14);
}
.emma__row--typing .emma__msg-avatar { opacity: .6; }

.emma__bubble {
  padding: 10px 14px;
  border-radius: 16px;
  background: var(--emma-surface-alt);
  animation: emma-bubble-in .2s ease-out;
}
.emma__row--user .emma__bubble {
  background: var(--emma-base);
  color: var(--emma-on-dark);
  border-bottom-right-radius: 6px;
}
.emma__row--emma .emma__bubble { border-bottom-left-radius: 6px; }
.emma__bubble p { margin: 0 0 6px; }
.emma__bubble p:last-child { margin-bottom: 0; }
.emma__list { margin: 4px 0 0; padding-left: 18px; }
.emma__list li { margin-bottom: 2px; }

@keyframes emma-bubble-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

.emma__bubble--typing { display: flex; gap: 4px; padding: 14px; }
.emma__bubble--typing span {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--emma-text-soft);
  animation: emma-typing 1.1s infinite ease-in-out;
}
.emma__bubble--typing span:nth-child(2) { animation-delay: .16s; }
.emma__bubble--typing span:nth-child(3) { animation-delay: .32s; }

@keyframes emma-typing {
  0%, 60%, 100% { opacity: .3; transform: translateY(0); }
  30%           { opacity: 1;  transform: translateY(-4px); }
}

/* -------------------------------------------------------------------- CTA */

.emma__ctas { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 8px; }

/*
   Przyciski w rozu pudrowym #EAA1C6 - tym samym, ktorym strona wyroznia ceny
   i akcenty. Roz jest jasny, wiec tekst musi byc ciemny: sliwka #4A1B31 daje
   na jasnym tle ponad 10:1, a na wypelnieniu rozem ok. 7:1. Zloty akcent
   zostaje reszcie widgetu (obramowania, podswietlenia) - CTA ma sie wybijac.

   Ikona siedzi we wlasnym kolku wypelnionym mocniejszym rozem. Dzieki temu
   przycisk czyta sie jako "ikona + etykieta", a nie jako napis z doklejonym
   znaczkiem, i ma ten sam rytm niezaleznie od dlugosci tlumaczenia.
*/
.emma__cta {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 7px 15px 7px 7px;
  border-radius: 999px;
  border: 1.5px solid var(--emma-pink);
  background: linear-gradient(180deg, #FFF6FA 0%, #FDEAF3 100%);
  color: var(--emma-pink-ink);
  text-decoration: none;
  font-weight: 600;
  font-size: 14px;
  box-shadow: 0 1px 2px rgba(122, 40, 74, .08);
  animation: emma-cta-in .34s cubic-bezier(.2, .9, .3, 1.2) backwards;
  animation-delay: var(--emma-cta-delay, 0ms);
  transition: transform .16s ease, background-color .16s ease, border-color .16s ease,
              box-shadow .16s ease;
}
.emma__cta:hover {
  background: linear-gradient(180deg, var(--emma-pink-soft) 0%, var(--emma-pink) 100%);
  border-color: var(--emma-pink-deep);
  transform: translateY(-1px);
  box-shadow: 0 8px 18px rgba(194, 83, 127, .30);
}
.emma__cta:active { transform: translateY(0); box-shadow: 0 2px 6px rgba(194, 83, 127, .26); }
.emma__cta:focus-visible { outline: 3px solid var(--emma-pink-deep); outline-offset: 2px; }

.emma__cta-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 26px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--emma-pink-soft);
  color: var(--emma-pink-deep);
  transition: transform .2s cubic-bezier(.2, 1.3, .5, 1), background-color .16s ease,
              color .16s ease;
}
.emma__cta-icon svg { width: 16px; height: 16px; display: block; }
.emma__cta:hover .emma__cta-icon {
  background: var(--emma-surface);
  color: var(--emma-pink-deep);
  transform: scale(1.12);
}

@keyframes emma-cta-in {
  from { opacity: 0; transform: translateY(8px) scale(.96); }
  60%  { transform: translateY(-2px) scale(1.02); }
  to   { opacity: 1; transform: none; }
}

/* ----------------------------------------------------------------- chipsy */

/*
   Pas chipsow ma byc dodatkiem, nie druga trescia okna. Przy trzech dluzszych
   podpowiedziach zawijal sie na trzy wiersze i zabieral polowe wysokosci panelu,
   spychajac sama rozmowe. Stad trzy ograniczenia naraz:
   - drobniejsze chipsy (11.5 px zamiast 13, ciasniejsze wypelnienie),
   - `max-height` na dwa wiersze z wlasnym przewijaniem, gdy podpowiedzi sa dlugie,
   - przyciecie zbyt dlugiej etykiety wielokropkiem zamiast lamania jej w srodku.
*/
.emma__chips {
  display: flex;
  /* `flex: 0 0 auto` jest konieczne: panel to kolumna flex o stalej wysokosci,
     wiec bez tego pasek chipsow byl sciskany do 40 px i drugi chips chowal sie
     pod krawedzia. Kurczyc ma sie rozmowa (`.emma__log`), nie pasek podpowiedzi. */
  flex: 0 0 auto;
  flex-wrap: wrap;
  gap: 5px;
  padding: 4px 14px 8px;
  /* Bezpiecznik: chipsy nie zawijaja sie w srodku (nowrap + wielokropek),
     a kontekstowe sa najwyzej dwa, wiec dwa wiersze to gorna granica. */
  max-height: 80px;
  overflow-y: auto;
  scrollbar-width: thin;
}

.emma__chip {
  max-width: 100%;
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid #CFDBE0;
  background: var(--emma-surface);
  color: var(--emma-text-soft);
  font: inherit;
  font-size: 9.5px;
  line-height: 1.35;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: pointer;
  transition: border-color .16s ease, color .16s ease, background-color .16s ease;
}
.emma__chip:hover { border-color: var(--emma-base); color: var(--emma-base); background: var(--emma-surface-alt); }
.emma__chip:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 2px; }

/*
   Chipsy kontekstowe - pytania, ktore Emmbotek podsuwa PO odpowiedzi, wyprowadzone
   z tego, co wlasnie powiedzial. Odrozniamy je od chipsow startowych rozowym
   zabarwieniem i strzalka, bo pelnia inna role: nie otwieraja rozmowy, tylko
   ciagna biezacy watek. Bez tego rozroznienia wygladaly identycznie i nie bylo
   widac, ze tresc paska sie zmienila.
*/
.emma__chip--dalej {
  border-color: var(--emma-pink);
  background: linear-gradient(180deg, #FFF8FB 0%, #FDEFF6 100%);
  color: var(--emma-pink-ink);
  animation: emma-chip-in .3s cubic-bezier(.2, .9, .3, 1.2) backwards;
}
.emma__chip--dalej::before {
  content: "\2192";                /* strzalka w prawo - "ciagnij dalej" */
  margin-right: 6px;
  color: var(--emma-pink-deep);
  font-weight: 700;
}
.emma__chip--dalej:hover {
  border-color: var(--emma-pink-deep);
  background: linear-gradient(180deg, var(--emma-pink-soft) 0%, var(--emma-pink) 100%);
  color: var(--emma-pink-ink);
}
.emma__chip--dalej:focus-visible { outline-color: var(--emma-pink-deep); }
.emma__chips[data-kontekstowe="true"] .emma__chip--dalej:nth-child(2) { animation-delay: .07s; }
.emma__chips[data-kontekstowe="true"] .emma__chip--dalej:nth-child(3) { animation-delay: .14s; }

@keyframes emma-chip-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: none; }
}

/* ---------------------------------------------------------------- formularz */

/* Ciasniej niz wczesniej (bylo 10/12): pole pisania to jeden wiersz tekstu,
   a otaczalo je tyle powietrza, ze zabieralo prawie tyle miejsca co rozmowa. */
.emma__form {
  padding: 7px 14px 8px;
  border-top: 1px solid #E3EAEC;
}

/*
   Jedno pudelko, ktore rosnie razem z tekstem.

   Wczesniej pole i przycisk byly osobnymi klockami stojacymi obok siebie: przy
   dluzszej wiadomosci pole wyciagalo sie w gore, a przycisk zostawal przy dolnej
   krawedzi i calosc rozjezdzala sie na dwie czesci. Teraz przycisk siedzi w srodku,
   a obwodka i stan skupienia naleza do calego pudelka - rosnie jako jedna rzecz.

   `align-items: end` trzyma przycisk przy dolnej krawedzi, gdy tekst ma kilka linijek -
   tak, jak w kazdym komunikatorze.
*/
.emma__field {
  position: relative;
  display: flex;
  /* Wysrodkowanie w pionie: przy jednym wierszu tekst stoi na osi pola, a nie
     przy jego dolnej krawedzi. Przy dluzszej wiadomosci pole rosnie w gore
     i przycisk plynie razem z nim, zamiast zostawac przyklejony do dolu. */
  align-items: center;
  gap: 6px;
  padding: 3px 3px 3px 12px;
  border: 1.5px solid #CFDBE0;
  border-radius: 20px;
  background: #F7FAF9;
  transition: border-color .16s ease, box-shadow .16s ease, background-color .16s ease;
}
.emma__field:hover { border-color: #AFC2C9; }
/* Obwodka skupienia na PUDELKU, nie na samym polu tekstowym - inaczej ramka
   obrysowywalaby tylko czesc tego, co uzytkownik widzi jako jedna calosc. */
.emma__field:focus-within {
  background: var(--emma-surface);
  border-color: var(--emma-base);
  box-shadow: 0 0 0 3px rgba(19, 59, 71, .14);
}

.emma__input {
  flex: 1 1 auto;
  width: 100%;
  /* 26 px to dokladnie jeden wiersz przy line-height 1.45 - pole zaczyna sie
     od jednego wiersza i rosnie dopiero wtedy, gdy tekst tego wymaga. */
  /* 22 px to jeden wiersz przy line-height 1.4 - pole zaczyna sie od jednego
     wiersza i rosnie dopiero wtedy, kiedy tekst tego wymaga. Wysokosc calego
     pudelka wyznacza i tak przycisk wysylki, wiec to on decyduje o minimum. */
  min-height: 22px;
  max-height: 116px;
  padding: 2px 0;
  border: 0;
  background: transparent;
  font: inherit;
  line-height: 1.4;
  color: var(--emma-text);
  resize: none;
  overflow-y: hidden;
}
.emma__input:focus { outline: none; }
.emma__input::placeholder { color: #8A9AA1; }
/* Zablokowane pole pisania. `:has()` szarzy CALA ramke pola, ale nie ma go
   w Firefoksie starszym niz 121, dlatego samo pole dostaje szare tlo osobna
   regula nizej. Tam, gdzie `:has()` dziala, efekt jest pelniejszy; gdzie nie
   dziala, uzytkownik i tak widzi, ze pole jest nieczynne. */
.emma__input:disabled { color: #8A9AA1; cursor: not-allowed !important; }
.emma__field:has(.emma__input:disabled) { background: #F0F3F2; }

/*
   Licznik znakow byl widoczny zawsze i przy pustym polu pokazywal "0/600" -
   informacja bez zadnej wartosci, ktora tylko zabierala miejsce tekstowi.
   Teraz pojawia sie dopiero, gdy naprawde zaczyna byc ciasno, i siedzi nad
   przyciskiem, zeby nie wchodzil na nia tekst.
*/
.emma__counter {
  position: absolute;
  right: 58px;
  bottom: 12px;
  padding: 1px 6px;
  border-radius: 8px;
  background: rgba(255, 255, 255, .92);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: #7B8B92;
  opacity: 0;
  transition: opacity .18s ease;
  pointer-events: none;
}
.emma__counter[data-widoczny="true"] { opacity: 1; }
.emma__counter[data-warn="true"] { color: #A8321E; font-weight: 700; }

/* Okragly, bo siedzi w zaokraglonym polu - kwadrat z promieniem 14 px wygladal
   w nim jak wciety klocek. */
.emma__send {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  /* 36 zamiast 40: przycisk wyznaczal minimalna wysokosc calego pola pisania,
     wiec kazdy jego piksel kosztowal piksel wysokosci pudelka. Na komputerze
     panel jest skalowany, wiec na ekranie wychodzi i tak okolo 46 px. */
  width: 36px;
  height: 36px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: linear-gradient(180deg, #1D5566 0%, var(--emma-base) 62%, #0E2E38 100%);
  color: var(--emma-on-dark);
  cursor: pointer;
  box-shadow:
    0 2px 5px rgba(19, 59, 71, .32),
    inset 0 1px 0 rgba(255, 255, 255, .28),
    inset 0 -2px 3px rgba(0, 0, 0, .22);
  transition: filter .16s ease, transform .12s ease, box-shadow .16s ease;
}
.emma__send:hover:not(:disabled) { filter: brightness(1.12); transform: translateY(-1px); }
/* Wcisniecie: guzik siada, cien zewnetrzny znika, wewnetrzny sie poglebia. */
.emma__send:active:not(:disabled) {
  transform: translateY(1px);
  box-shadow:
    0 1px 2px rgba(19, 59, 71, .28),
    inset 0 2px 4px rgba(0, 0, 0, .3);
}
.emma__send:disabled { opacity: .45; cursor: not-allowed !important; transform: none; box-shadow: none; }
.emma__send[data-pusty="true"] { opacity: .45; box-shadow: 0 1px 3px rgba(19, 59, 71, .18); }
.emma__send:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 2px; }
.emma__send svg { width: 19px; height: 19px; display: block; margin-left: 1px; }

/* ------------------------------------------------------------- nota RODO */

/* ------------------------------------------------------------- ocena rozmowy */
/*
   Ocena minami maskotki zamiast gwiazdek. Emmbotek ma czternascie stanow
   emocjonalnych - uzycie ich tutaj jest spojne z reszta i czytelne bez tlumaczenia
   w kazdym z dziewieciu jezykow.
*/
/* Weższe marginesy i boczne wypelnienie niz w reszcie widgetu - piec min po 70 px
   potrzebuje 350 px, a panel ma 380 px. Inaczej ostatnia mina wychodzilaby poza
   ramke albo trzeba by je zmniejszyc ponizej zamowionego rozmiaru. */
.emma__ocena {
  margin: 0 8px 8px;
  padding: 10px 6px 12px;
  border: 1px solid #D8E4DA;
  border-radius: 14px;
  background: linear-gradient(180deg, #F3F8F0 0%, #FBFDFA 100%);
  text-align: center;
}
.emma__ocena[hidden] { display: none; }
.emma__ocena-tytul { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; color: var(--emma-text); }
/* Gorny odstep robi miejsce na podpis, ktory wysuwa sie ponad miny. Bez niego
   ramka podpisu wychodzilaby poza panel oceny i zostawala przycieta. */
.emma__ocena-miny {
  display: flex;
  justify-content: center;
  gap: 0;                          /* odstep robi wewnetrzne wypelnienie min */
  padding-top: 30px;
}

.emma__ocena-mina {
  position: relative;              /* uklad odniesienia dla podpisu */
  /* Bazowo 70 px - bylo 46, czyli o 52% wiecej. `flex: 0 1` pozwala minom zejsc
     nizej na waskim telefonie (panel na calą szerokosc), zamiast wypychac
     ostatnia poza ekran. */
  flex: 0 1 70px;
  width: 70px;
  min-width: 0;
  /* `height` jest zapasem dla przegladarek bez `aspect-ratio` (m.in. Safari
     do wersji 14, wciaz spotykane na starszych iPhone'ach). Bez niej mina
     mialaby tam zerowa wysokosc. Gdzie `aspect-ratio` dziala, nadpisuje ja
     i mina zostaje kolem takze po scisnieciu na waskim ekranie. */
  height: 70px;
  aspect-ratio: 1 / 1;
  padding: 3px;
  border: 2px solid transparent;
  border-radius: 50%;
  background: transparent;
  cursor: url("kursor-lapka.svg") 12 8, pointer !important;
  /* Miny sa domyslnie przygaszone i szare - dopiero najechanie wydobywa kolor
     i powieksza wybor. Dzieki temu widac, ktora mine sie wskazuje. */
  filter: grayscale(.55);
  opacity: .75;
  transition: transform .2s cubic-bezier(.2, 1.3, .5, 1), filter .16s ease,
              opacity .16s ease, border-color .16s ease;
}
.emma__ocena-mina:hover,
.emma__ocena-mina:focus-visible {
  transform: scale(1.28);
  filter: none;
  opacity: 1;
  border-color: var(--emma-pink);
  outline: none;
  z-index: 2;                      /* powiekszona mina nad sasiadkami */
}
.emma__ocena-obrazek { width: 100%; height: 100%; border-radius: 50%; display: block; }
.emma__ocena-cyfra { font-weight: 700; font-size: 18px; color: var(--emma-text-soft); }

/*
   Podpis emocji we wlasnej ramce nad mina. Zastapil systemowa podpowiedz, ktora
   pokazywala robocza nazwe pozy z manifestu - wygladalo to jak nazwa pliku.
   Wlasna ramka pojawia sie od razu (dymek systemowy czeka ok. sekundy), trzyma
   sie stylu widgetu i - co najwazniejsze - idzie przez tabele tlumaczen, wiec
   mowi jezykiem wybranej rozmowy.
*/
.emma__ocena-podpis {
  position: absolute;
  left: 50%;
  bottom: calc(100% + 8px);
  transform: translateX(-50%) translateY(4px) scale(.96);
  transform-origin: bottom center;
  white-space: nowrap;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--emma-pink);
  background: var(--emma-surface);
  color: var(--emma-pink-ink);
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.35;
  box-shadow: 0 6px 14px rgba(74, 27, 49, .16);
  opacity: 0;
  pointer-events: none;            /* podpis nie moze przechwycic kliniecia w mine */
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, 1.3, .5, 1);
}
/* dziobek ramki */
.emma__ocena-podpis::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 7px;
  height: 7px;
  margin-left: -4px;
  margin-top: -4px;
  transform: rotate(45deg);
  background: var(--emma-surface);
  border-right: 1px solid var(--emma-pink);
  border-bottom: 1px solid var(--emma-pink);
}
.emma__ocena-mina:hover .emma__ocena-podpis,
.emma__ocena-mina:focus-visible .emma__ocena-podpis {
  opacity: 1;
  transform: translateX(-50%) translateY(0) scale(1);
}
/* Skrajne miny: podpis trzyma sie krawedzi panelu, zamiast z niej wystawac. */
.emma__ocena-mina:first-child .emma__ocena-podpis { left: 0; transform: translateY(4px) scale(.96); }
.emma__ocena-mina:first-child:hover .emma__ocena-podpis,
.emma__ocena-mina:first-child:focus-visible .emma__ocena-podpis { transform: translateY(0) scale(1); }
.emma__ocena-mina:first-child .emma__ocena-podpis::after { left: 33px; }
.emma__ocena-mina:last-child .emma__ocena-podpis { left: auto; right: 0; transform: translateY(4px) scale(.96); }
.emma__ocena-mina:last-child:hover .emma__ocena-podpis,
.emma__ocena-mina:last-child:focus-visible .emma__ocena-podpis { transform: translateY(0) scale(1); }
.emma__ocena-mina:last-child .emma__ocena-podpis::after { left: auto; right: 29px; }

/* ------------------------------------------------------------- zgoda na zasady */
/*
   Bramka nad polem wpisywania. Znika po potwierdzeniu i nie wraca, dopoki nie
   zmieni sie wersja zasad (numer w kluczu pamieci przegladarki).

   Pole wyboru jest celowo NIEzaznaczone na starcie - zgoda ma byc czynnoscia,
   a nie przeoczeniem.
*/
.emma__zgoda {
  display: flex;
  flex-wrap: wrap;                 /* odnosnik do zasad schodzi do wlasnego wiersza */
  align-items: flex-start;
  gap: 9px;
  row-gap: 0;
  margin: 0 14px 2px;
  padding: 10px 12px;
  border: 1px solid #D8E4DA;
  border-radius: 12px;
  background: linear-gradient(180deg, #F3F8F0 0%, #FBFDFA 100%);
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--emma-text);
}
/* Znikanie po potwierdzeniu: ptaszek zdazy sie pokazac, a dopiero potem bramka
   zwija sie i gasnie. Bez tego pole wyboru przepadalo, zanim uzytkownik zobaczyl,
   ze cokolwiek zaznaczyl. */
.emma__zgoda[data-znika="true"] {
  opacity: 0;
  transform: translateY(-4px);
  max-height: 0;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  border-width: 0;
  overflow: hidden;
  transition: opacity .32s ease, transform .32s ease, max-height .32s ease .06s,
              padding .32s ease .06s, margin .32s ease .06s, border-width .32s ease .06s;
}
/* Zapas na drugi wiersz z odnosnikiem do zasad oraz na dluzsze tlumaczenia. */
.emma__zgoda { max-height: 180px; transition: max-height .32s ease; }
.emma__zgoda[hidden] { display: none; }

/* Krotkie podswietlenie, gdy ktos probuje wyslac wiadomosc bez zgody -
   zamiast komunikatu bledu, ktory w tak malym oknie tylko by przeszkadzal. */
.emma__zgoda[data-uwaga="true"] {
  border-color: var(--emma-accent);
  box-shadow: 0 0 0 3px rgba(234, 161, 198, .35);
}

/*
   Wlasne pole wyboru zamiast systemowego.

   Systemowy checkbox rysuje przegladarka i ani kursor, ani wyglad zaznaczenia nie
   zawsze sie do niego stosuja - stad brak lapki na jego powierzchni. Ukrywamy go
   wiec (zostaje dla klawiatury i czytnikow ekranu), a widoczny kwadracik rysujemy
   sami przez ::before etykiety.
*/
/*
   Bramka zgody celowo NIE ma lapki - tu obowiazuje zwykly kursor systemowy.
   To jedyne miejsce w widgecie, gdzie uzytkownik podejmuje formalna decyzje,
   i ozdobny kursor tylko rozprasza. `!important` jest potrzebne, bo strona
   narzuca wlasny kursor regula `label[for], a[href], input[type=checkbox]`
   o wyzszej specyficznosci niz same klasy.

   Selektor jest celowo poprzedzony `.emma`: bez tego ma taka sama specyficznosc
   co ogolna regula lapki dla `.emma__link`, a ta stoi nizej w pliku i wygrywala
   remis - odnosnik do zasad dostawal lapke mimo tej reguly.
*/
.emma .emma__zgoda,
.emma .emma__zgoda * { cursor: pointer !important; }

/*
   Odnosnik do zasad w osobnym wierszu, POZA etykieta pola wyboru.
   Dopoki siedzial w srodku zdania, zabieral 171 z 361 px klikalnego paska
   i klikniecie w niego niczego nie zaznaczalo - przegladarka nie aktywuje
   etykiety przez zagniezdzona tresc interaktywna. Teraz sa to dwa osobne,
   jednoznaczne cele.
*/
.emma__zgoda-zasady {
  flex: 1 0 100%;
  margin-left: 26px;               /* rowno pod tekstem, nie pod kwadracikiem */
  margin-top: 4px;
  font-size: 11px;
  font-weight: 600;
  width: -webkit-fit-content;      /* starsze Safari */
  width: fit-content;
}

.emma__zgoda-pole {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  margin: 0;
}

.emma__zgoda-tekst {
  position: relative;
  display: block;
  padding-left: 26px;
}

/* kwadracik */
.emma__zgoda-tekst::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 18px;
  height: 18px;
  border: 1.5px solid #A9BFB2;
  border-radius: 5px;
  background: #fff;
  transition: background-color .18s ease, border-color .18s ease;
}

/* ptaszek: rysowany dwoma bokami obroconego prostokata, bez zadnego pliku */
.emma__zgoda-tekst::after {
  content: "";
  position: absolute;
  left: 6px;
  top: 3px;
  width: 5px;
  height: 10px;
  border: solid #fff;
  border-width: 0 2.5px 2.5px 0;
  transform: rotate(45deg) scale(.4);
  opacity: 0;
  transition: opacity .16s ease, transform .18s cubic-bezier(.2, 1.4, .5, 1);
}

.emma__zgoda-pole:checked + .emma__zgoda-tekst::before {
  background: var(--emma-base);
  border-color: var(--emma-base);
}
.emma__zgoda-pole:checked + .emma__zgoda-tekst::after {
  opacity: 1;
  transform: rotate(45deg) scale(1);
}
.emma__zgoda-pole:focus-visible + .emma__zgoda-tekst::before {
  outline: 3px solid var(--emma-accent);
  outline-offset: 2px;
}

/* Zablokowane pole i chipsy przed wyrazeniem zgody - widoczne, ale wyraznie nieczynne. */
.emma__input:disabled { background: #F0F3F2; color: #8A9AA1; cursor: not-allowed !important; }
.emma__chips[data-zablokowane="true"] .emma__chip { opacity: .5; cursor: not-allowed !important; }

/*
   Stopka informacyjna RODO.

   `text-align: justify` wyrownuje pelne wiersze do obu marginesow, a
   `text-align-last: center` srodkuje ostatni - bez tego drugiego ostatnia linijka
   zostawalaby przyklejona do lewej i caly blok wygladalby na przypadkowo urwany.

   Tlo to delikatny gradient od kremu szalwiowego marki do bieli panelu: oddziela
   note od pola wpisywania, nie robiac z niej osobnego, ciezkiego pasa.
*/
.emma__note {
  padding: 7px 14px 8px;
  text-align: center;
}

/* Jeden wiersz: dwa znaczki i odnosnik. Cala stopka zwinieta ma okolo 20 px
   zamiast ponad stu, ktore zajmowaly trzy bloki tekstu jeden pod drugim. */
.emma__note-pasek {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  flex-wrap: wrap;
}

/* Okragly znaczek: "i" dla noty o zapisie rozmowy, "AI" dla noty o modelu. */
.emma__znak {
  flex: 0 0 auto;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  border: 1px solid #C3D2D7;
  background: var(--emma-surface);
  color: #7C8D95;
  font: inherit;
  font-size: 8.5px;
  font-weight: 700;
  letter-spacing: .03em;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.emma__znak:hover { color: var(--emma-base); border-color: var(--emma-base); background: var(--emma-surface-alt); }
.emma__znak:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 2px; }
.emma__znak[aria-expanded="true"] { color: var(--emma-base); border-color: var(--emma-base); background: var(--emma-surface-alt); }

.emma__note-link { font-size: 10px; }

/* Tresc rozwija sie wysokoscia. Przy rozwijaniu szerokoscia tekst zawijal sie
   w pionowa kolumne o zerowej szerokosci i rozpychal stopke, choc byl niewidoczny. */
.emma__znak-tresc {
  margin: 0;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  font-size: 9.5px;
  line-height: 1.4;
  color: #6B7B83;
  transition: max-height .3s ease, opacity .24s ease, margin-top .3s ease;
}
.emma__znak-tresc[data-otwarte="true"] {
  max-height: 6em;
  margin-top: 5px;
  opacity: 1;
}

/* Separator: wlosowa kreska, ktora gasnie po bokach - twarda linia na cala
   szerokosc dzielilaby panel na dwie czesci, a to ma byc tylko delikatne odciecie. */
.emma__note::before {
  content: "";
  position: absolute;
  top: 0;
  left: 14px;
  right: 14px;
  height: 1px;
  background: linear-gradient(90deg, transparent, #C6D6C3 22%, #C6D6C3 78%, transparent);
}

.emma__link {
  padding: 0;
  border: 0;
  background: none;
  color: var(--emma-base);
  font: inherit;
  font-size: 11.5px;
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}
.emma__link:focus-visible { outline: 3px solid var(--emma-accent); outline-offset: 2px; }

.emma__sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* ================================================================ AWATAR */

.emmbotek { position: relative; }
.emmbotek--unavailable { display: none; }

/* w kolistych kadrach (naglowek, side tab) maskotka jest przyblizona na twarz */
.emmbotek--header .emmbotek__frame,
.emmbotek--tab .emmbotek__frame { width: 122%; height: 122%; }

.emmbotek__stage {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  overflow: hidden;
}

.emmbotek__frame {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center bottom;
  transform-origin: 50% 88%;
  will-change: transform;
}

/* --- warstwa ruchu: jedna animacja na typ emocji (sekcja 16 i 31 briefu) --- */

.emmbotek[data-motion="breathe"] .emmbotek__frame { animation: emmbotek-breathe 4.4s ease-in-out infinite; }
.emmbotek[data-motion="bob"]     .emmbotek__frame { animation: emmbotek-bob 2.6s ease-in-out infinite; }
.emmbotek[data-motion="wave"]    .emmbotek__frame { animation: emmbotek-wave 1.1s ease-in-out infinite; }
.emmbotek[data-motion="ponder"]  .emmbotek__frame { animation: emmbotek-ponder 2.2s ease-in-out infinite; }
.emmbotek[data-motion="hop"]     .emmbotek__frame { animation: emmbotek-hop .78s cubic-bezier(.3, .9, .4, 1.3) infinite; }
.emmbotek[data-motion="tilt"]    .emmbotek__frame { animation: emmbotek-tilt 2.8s ease-in-out infinite; }
.emmbotek[data-motion="lean"]    .emmbotek__frame { animation: emmbotek-lean 3.6s ease-in-out infinite; }
.emmbotek[data-motion="pop"]     .emmbotek__frame { animation: emmbotek-pop .5s cubic-bezier(.2, .8, .3, 1.5); }
.emmbotek[data-motion="puff"]    .emmbotek__frame { animation: emmbotek-puff 3s ease-in-out infinite; }
.emmbotek[data-motion="sway"]    .emmbotek__frame { animation: emmbotek-sway 3.2s ease-in-out infinite; }
.emmbotek[data-motion="still"]   .emmbotek__frame { animation: none; }

@keyframes emmbotek-breathe {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.035); }
}
@keyframes emmbotek-bob {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-4%) rotate(-1.2deg); }
}
@keyframes emmbotek-wave {
  0%, 100% { transform: rotate(-3deg) translateY(0); }
  50%      { transform: rotate(3deg) translateY(-3%); }
}
@keyframes emmbotek-ponder {
  0%, 100% { transform: rotate(-2.5deg) translateX(-1%); }
  50%      { transform: rotate(1.5deg) translateX(1%); }
}
@keyframes emmbotek-hop {
  0%, 100% { transform: translateY(0) scaleY(1); }
  30%      { transform: translateY(-9%) scaleY(1.04); }
  70%      { transform: translateY(0) scaleY(.97); }
}
@keyframes emmbotek-tilt {
  0%, 100% { transform: rotate(0deg); }
  35%      { transform: rotate(-6deg); }
  65%      { transform: rotate(3deg); }
}
@keyframes emmbotek-lean {
  0%, 100% { transform: rotate(0deg) translateY(0); }
  50%      { transform: rotate(4deg) translateY(2%); }
}
@keyframes emmbotek-pop {
  0%   { transform: scale(.86); }
  55%  { transform: scale(1.09); }
  100% { transform: scale(1); }
}
@keyframes emmbotek-puff {
  0%, 100% { transform: scale(1) translateY(0); }
  50%      { transform: scale(1.05) translateY(-2%); }
}
@keyframes emmbotek-sway {
  0%, 100% { transform: translateX(-2%) rotate(-2deg); }
  50%      { transform: translateX(2%) rotate(2deg); }
}

/* ------------------------------------------------------------- mobile < 640 */

@media (max-width: 640px) {
  .emma { right: 12px; bottom: 12px; }
  .emma__panel {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-height: none;
    border-radius: 0;
  }
  .emma__tab-label { display: none; }
  .emma__tab { padding: 7px 5px; border-radius: 18px 0 0 18px; }
  /* Bez etykiety zakladka jest samym kolkiem - troche mniejszym, zeby nie zajadala
     rogu ekranu, ale nadal wyraznie wiekszym niz dotychczasowe 44 px. */
  .emma__tab-avatar { width: 72px; height: 72px; }
  .emma__avatar { width: 84px; height: 84px; }
  .emma__row { max-width: 92%; }

  /*
     Na telefonie zakladka usuwa sie mocniej w tlo: jest bardziej przezroczysta
     i wsunieta czescia poza krawedz ekranu. Powod jest praktyczny - ekran ma
     kilka razy mniej miejsca niz monitor, a zakladka wisi na nim caly czas,
     takze wtedy, gdy ktos po prostu czyta strone.

     Wsuwamy ja o 12 px z 62 px szerokosci, wiec zostaje na widoku ponad
     cztery piate - palec ma w co trafic, a maskotka nadal jest rozpoznawalna.
     Dotkniecie, najechanie i fokus przywracaja pelna widocznosc i wysuwaja
     zakladke z powrotem.
  */
  .emma__tab {
    opacity: .55;
    transform: translateY(-50%) scale(.85) translateX(12px);
  }
  .emma__tab:hover,
  .emma__tab:focus-visible,
  .emma__tab:active {
    opacity: 1;
    transform: translateY(-50%) scale(.92) translateX(0);
  }
}

html.emma-locked, html.emma-locked body { overflow: hidden; }

/* ---------------------------------------------------------- reduced motion */

@media (prefers-reduced-motion: reduce) {
  .emma *,
  .emma *::before,
  .emma *::after,
  .emmbotek__frame {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}

/* ------------------------------------------------------------ high contrast */

@media (forced-colors: active) {
  .emma__cta, .emma__chip, .emma__bubble { border: 1px solid CanvasText; }
}

/* ------------------------------------------------------------ kursor lapka */
/*
   Adres jest wzgledny wobec TEGO pliku, nie wobec strony - dziala niezaleznie od
   tego, czy widget lezy w /emmbotek/, czy gdzie indziej.
   Punkt aktywny 12 8 to czubek gornego lewego palca.
   `pointer` na koncu to zapas dla przegladarek, ktore odrzuca plik SVG.

   `!important` NIE jest tu skrotem - jest konieczne. Widget jest goscem na cudzej
   stronie, a emmastudio.pl ustawia wlasny kursor (koniczyne) regula o wysokiej
   specyficznosci: `a[href], label[for], input[type="checkbox"]:not(:disabled), ...`.
   Selektor `.emma__zgoda *` ma specyficznosc (0,1,0) i przegrywa z `label[for]`
   (0,1,1) - zmierzone na zywej stronie: etykieta zgody, ukryty checkbox i odnosniki
   dostawaly koniczyne zamiast lapki. Podbijanie specyficznosci gonilo by tylko
   biezaca wersje arkusza strony; `!important` wygrywa z kazda.
   Dlatego stany "nieczynne" (`not-allowed`) tez sa `!important` - inaczej lapka
   pojawilaby sie na zablokowanym polu pisania i chipsach.
*/
.emma__tab,
.emma__send:not(:disabled),
.emma__cta,
.emma__chip,
.emma__icon-btn,
.emma__link,
.emma button:not(:disabled),
.emma [role="button"] {
  cursor: url("kursor-lapka.svg") 12 8, pointer !important;
}

/* ----------------------------------------------------- reakcja na ocene */
/*
   Warstwa swietowania po ocenie rozmowy. Lezy nad cala strona, a nie w panelu
   czatu - stad wlasny prefiks `emma-swieto` zamiast `emma__`: to jedyny element
   widgetu, ktory celowo zyje poza jego korzeniem.

   `pointer-events: none` jest tu warunkiem koniecznym, nie ozdoba. Warstwa
   przykrywa cala strone, wiec bez tego przez siedem sekund nie dalo by sie
   kliknac w zaden odnosnik pod spodem.
*/
.emma-swieto {
  position: fixed;
  inset: 0;
  z-index: 2147483100;             /* nad panelem czatu (2147483000) */
  overflow: hidden;
  pointer-events: none;
  opacity: 1;
  transition: opacity .85s ease;
}
.emma-swieto[data-gasnie="true"] { opacity: 0; }

/* Pojedynczy kawalek konfetti. Trasa i tempo przychodza ze zmiennych ustawianych
   w JS przy tworzeniu, zeby kazdy kawalek lecial inaczej. */
.emma-swieto__kawalek {
  position: absolute;
  top: -6vh;
  display: block;
  will-change: transform, opacity;
  animation: emma-konfetti var(--emma-lot, 4s) linear var(--emma-zwloka, 0s) forwards;
}

@keyframes emma-konfetti {
  from {
    opacity: 1;
    transform: translate3d(0, 0, 0) rotate(0deg);
  }
  85% { opacity: 1; }
  to {
    opacity: 0;
    transform: translate3d(var(--emma-znos, 0), 106vh, 0) rotate(var(--emma-obrot, 360deg));
  }
}

/*
   Pozegnalna lapka przy ocenie 1-2. Ten sam rysunek, co kursor widgetu - macha
   z punktu obrotu u dolu, wiec rusza sie "nadgarstkiem", a nie caly obrazek.
*/
.emma-swieto__lapka {
  position: absolute;
  left: 50%;
  bottom: 12vh;
  width: 132px;
  height: 132px;
  margin-left: -66px;
  transform-origin: 50% 85%;
  filter: drop-shadow(0 10px 22px rgba(19, 59, 71, .28));
  animation: emma-lapka-wejscie .42s cubic-bezier(.2, 1.3, .5, 1) backwards,
             emma-lapka-macha 1.05s ease-in-out .42s 2;
}

@keyframes emma-lapka-wejscie {
  from { opacity: 0; transform: translateY(28px) scale(.8); }
  to   { opacity: 1; transform: none; }
}
@keyframes emma-lapka-macha {
  0%, 100% { transform: rotate(-16deg); }
  50%      { transform: rotate(16deg); }
}

@media (prefers-reduced-motion: reduce) {
  /* Zabezpieczenie na wypadek, gdyby warstwa jednak powstala - JS sprawdza to
     samo i zwykle w ogole jej nie tworzy. */
  .emma-swieto { display: none; }
}

/* ------------------------------------------- wybor jezyka w naglowku */
/*
   Przycisk jezyka przeniesiony z wlasnego paska do naglowka.

   Powod jest arytmetyczny: pasek zabieral 8,1% wysokosci panelu, a sama rozmowa
   dostawala 30,3%. Siedem blokow interfejsu na jeden blok tresci to zla
   proporcja - jezyk wybiera sie raz na rozmowe, wiec nie potrzebuje stalego
   wiersza. Zostaje okragly przycisk z flaga, w jednym rzedzie z koszem
   i zamknieciem; nazwa jezyka zyje w etykiecie dostepnosci i w rozwinietej liscie.
*/
.emma__jezyk-pole--naglowek {
  flex: 0 0 38px;
  width: 38px;
}

.emma__jezyk-pole--naglowek .emma__jezyk-przycisk {
  width: 38px;
  height: 38px;
  padding: 0;
  justify-content: center;
  gap: 0;
  border-color: rgba(255, 255, 255, .22);
  background: rgba(255, 255, 255, .12);
  /* Ten sam material co pozostale ikony naglowka - inaczej wygladalby
     jak wklejony z innego interfejsu. */
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  box-shadow:
    0 2px 5px rgba(19, 59, 71, .32),
    inset 0 1px 0 rgba(255, 255, 255, .28);
}
.emma__jezyk-pole--naglowek .emma__jezyk-przycisk:hover {
  border-color: rgba(255, 255, 255, .45);
  background: rgba(255, 255, 255, .2);
}
.emma__jezyk-pole--naglowek .emma__jezyk-przycisk:focus-visible {
  border-color: var(--emma-accent);
  box-shadow: 0 0 0 3px rgba(217, 164, 65, .45);
}
/* Powiekszenie dotyczy WYLACZNIE flagi na przycisku w naglowku. Bez wskazania
   przycisku regula siegala takze flag w rozwinietej liscie - lista jest
   dzieckiem tego samego kontenera - i tam ramki rosly do 22x16, podczas gdy
   rysunki zostawaly przy 20x14. */
.emma__jezyk-pole--naglowek .emma__jezyk-przycisk .emma__flaga {
  width: 22px;
  height: 16px;
}

/* Lista rozwija sie pod przyciskiem i wyrownuje do jego prawej krawedzi -
   przy szerokosci 38 px rozciagniecie jej do szerokosci pola dawaloby pasek
   na 38 px, w ktorym nie miescilaby sie zadna nazwa jezyka. */
.emma__jezyk-pole--naglowek .emma__jezyk-lista {
  left: auto;
  right: 0;
  width: 208px;
  color: var(--emma-text);
}

/* Nota RODO drobniejsza: 11.5 -> 10.5 px i ciasniejsze wypelnienie. Zmierzone
   76 px z 717 px panelu (10,6%) jak na przypis to bylo za duzo. */
.emma__note {
  padding: 8px 16px 9px;
  font-size: 10.5px;
  line-height: 1.45;
}

/* --------------------------------------- przelacznik podpowiedzi i nota AI */
/*
   Drobny przycisk na koncu paska podpowiedzi. Przy widocznych podpowiedziach
   jest samym krzyzykiem; po wylaczeniu zostaje jedynym elementem paska i nosi
   slowo "Podpowiedzi", zeby bylo wiadomo, co przywraca. Calkowite zniknięcie
   paska oznaczaloby, ze nie ma jak wrocic do ustawienia.
*/

/* ------------------------------------- przelacznik podpowiedzi (spojny z reszta) */
/*
   Przycisk nalezy do tej samej rodziny co chipsy: ten sam promien, ta sama
   obwodka i ten sam kroj. Rozni go tylko brak wypelnienia i ikona zamiast
   napisu - ma byc rozpoznawalny jako sterowanie, a nie jako kolejna
   podpowiedz do klkniecia. Ikona pochodzi z Phosphor Icons, czyli z tego
   samego zestawu co ikony przyciskow CTA.
*/
.emma__chip-przelacznik {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  flex: 0 0 auto;
  height: 23px;
  padding: 0 8px;
  border-radius: 999px;
  border: 1px solid #DCE5E8;
  background: var(--emma-surface);
  color: #93A5AD;
  font: inherit;
  font-size: 9.5px;
  line-height: 1;
  cursor: pointer;
  transition: color .16s ease, border-color .16s ease, background-color .16s ease;
}
.emma__chip-przelacznik:hover {
  color: var(--emma-pink-deep);
  border-color: var(--emma-pink);
  background: #FFF8FB;
}
.emma__chip-przelacznik:focus-visible { outline: 3px solid var(--emma-pink-deep); outline-offset: 2px; }
.emma__chip-ikona { display: inline-flex; }
.emma__chip-ikona svg { width: 12px; height: 12px; display: block; }
/* Po wylaczeniu przycisk jest jedyna trescia paska, wiec dostaje pelne
   wypelnienie i napis - inaczej wygladalby jak zapomniany szczatek. */
.emma__chip-przelacznik[data-wylaczone="true"] {
  color: var(--emma-text-soft);
  border-color: #CFDBE0;
  background: var(--emma-surface-alt);
}

/* ------------------------------------------------ znaczek systemu AI */
/*
   Informacja o generowaniu odpowiedzi przez model jezykowy, zwinieta do
   okraglego znaczka "AI". Rozwija sie na klikniecie, najechanie i fokus.

   Sam znaczek juz spelnia wymog przejrzystosci - mowi, ze po drugiej stronie
   jest system AI. Pelne zdanie jest o jedno klikniecie dalej, zamiast zajmowac
   na stale dwa wiersze stopki. Niezwinieta wersja stoi w stopce strony
   i w polityce prywatnosci.
*/
/* --------------------------------------------- glebia okienka maskotki */
/*
   Okragle okienko z maskotka dostaje poswiate i cien, zeby czytalo sie jako
   wypukly medalion, a nie plaska dziura w tle. Trzy warstwy naraz:
   miekka aureola na zewnatrz, waski jasny rant u gory od srodka (swiatlo pada
   z gory) i ciemniejsze przyciemnienie u dolu od srodka. Ta sama zasada,
   co przy cieniu calego panelu.
*/
.emma__avatar {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .16),
    0 0 18px 2px rgba(217, 164, 65, .28),
    0 6px 14px rgba(6, 32, 40, .38),
    inset 0 2px 4px rgba(255, 255, 255, .30),
    inset 0 -3px 6px rgba(6, 32, 40, .34);
}

/* Na zakladce tlo jest jasne, wiec aureola musi byc ciemniejsza, a nie zlota -
   zlota poswiata na bieli po prostu znika. */
.emma__tab-avatar {
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, .35),
    0 4px 12px rgba(6, 32, 40, .30),
    inset 0 2px 4px rgba(255, 255, 255, .55),
    inset 0 -3px 6px rgba(6, 32, 40, .16);
}

/* Dygresja w podtytule gasnie po wyslaniu pierwszego pytania. Wlasny element
   jest tu konieczny: przy wspolnym wezle z nazwa asystenta gaslby caly podtytul. */
.emma__status-dygresja {
  opacity: 1;
  transition: opacity .6s ease;
}
.emma__status-dygresja[data-znika="true"] { opacity: 0; }