/*
  Panel Aktywacyjny — style.

  Wszystkie kolory pochodzą z theme.css (jasny i ciemny wariant tej samej
  palety). W tym pliku nie ma surowych kolorów marki — tylko wyliczane rgba()
  na cienie, poświaty i przezroczystości.

  Układ ekranu:
    belka (logo · kropki sekcji · przycisk panelu)
    scena (jeden widok naraz)
*/

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

/*
  Atrybut `hidden` ma znaczyć „nie ma tego na ekranie”, kropka.

  Reguła przeglądarki `[hidden] { display: none }` przegrywa z każdą naszą
  deklaracją `display` — a takie mamy (np. kontener na embed asystenta jest
  `display: flex`). Bez tej reguły ukryty, pusty kontener dalej zajmował
  miejsce we flexie i zjadał górną połowę ekranu telefonu.
*/
[hidden] {
  display: none !important;
}

/*
  Wymiary powiązane ze sobą przez układ, nie przez kolor — dlatego siedzą
  tutaj, a nie w theme.css.

  Rząd ikon w belce ma być dokładnie tak szeroki jak ramka telefonu pod nim,
  więc odstęp jest liczony, a nie wpisany: (szerokość telefonu − ikony) /
  liczba przerw. Zmiana szerokości telefonu automatycznie przestawia belkę.

  `--ile-kropek` trzeba podbić przy dodaniu zakładki — CSS nie policzy
  rodzeństwa sam.
*/
:root {
  --szerokosc-telefonu: 340px;
  --rozmiar-kropki: 40px;
  --ile-kropek: 6;
}

html,
body {
  margin: 0;
  padding: 0;
}

/*
  Okno centrujemy w pionie. Wszystko poza <main> jest wyjęte z przepływu
  (tło, belka, panel, edytor — same `position: fixed`), więc `justify-content`
  ustawia dokładnie jedną rzecz: okno. Wypełnienie u góry robi miejsce na
  belkę, żeby środek liczył się od jej dolnej krawędzi, a nie od krawędzi
  ekranu.
*/
body {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-top: 73px;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

h1,
h2,
h3 {
  margin: 0;
  line-height: 1.25;
  letter-spacing: -0.015em;
}

p {
  margin: 0;
}

button {
  font: inherit;
  cursor: pointer;
}

a {
  color: var(--color-primary);
}

/* ------------------------------------------------------- ciemne tło -- */

/* ---------------------------------------------------------------- logo -- */

.logo {
  display: inline-flex;
  align-items: flex-end;
  font-weight: 900;
  font-size: 20px;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--color-text);
  flex-shrink: 0;
}

/*
  Kropka jako osobny element, nie znak „.” — w krojach groteskowych kropka
  bywa kwadratowa, a tu ma być idealnie okrągła i skalować się razem
  z tekstem (rozmiar w em).

  MIEJSCE NA LOGO: żeby wstawić prawdziwy plik, podmień zawartość .logo
  w index.html na <img src="logo.svg" alt="ARKANIP"> i dorzuć plik do paczki.
*/
.logo__dot {
  width: 0.22em;
  height: 0.22em;
  margin-left: 0.08em;
  margin-bottom: 0.03em;
  border-radius: 999px;
  background: var(--color-primary);
  flex-shrink: 0;
}

/* ---------------------------------------------------------------- belka -- */

.belka {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--space-4);
  padding: var(--space-4) var(--space-5);
  /* Włos zamiast błękitnej linii: ramka okna zniknęła (pełny kadr), więc
     belka nie ma już z czym się rymować — ma tylko delikatnie odcinać się
     od tła. */
  border-bottom: 1px solid rgba(22, 35, 59, 0.06);

  /* Fallback dla przeglądarek bez color-mix — pełne tło zamiast mlecznego. */
  background: var(--color-surface);
}

@supports (background: color-mix(in srgb, red 50%, transparent)) {
  .belka {
    background: color-mix(in srgb, var(--color-surface) 78%, transparent);
    backdrop-filter: blur(14px);
  }
}

/* Prawa strona belki: kontakt do opiekuna i eksport raportu. */
.belka__akcje {
  justify-self: end;
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

/* Cztery kropki — przycisk, spod którego wyskakuje kontakt do opiekuna. */
.belka__menu {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border-radius: 12px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.belka__menu:hover,
.belka__menu[aria-expanded="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Dymek z kontaktem — wisi pod kropkami, przy prawej krawędzi belki. */
.csm {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--space-5);
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 12px 16px;
  border-radius: var(--radius);
  border: 1px solid rgba(39, 99, 197, 0.35);
  background: var(--color-surface);
  box-shadow: var(--shadow);
}

.csm__etykieta {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.csm__dane {
  font-size: 14px;
  font-weight: 650;
  color: var(--color-text);
  white-space: nowrap;
}

/* Separator między nazwiskiem a numerem — błękit marki. */
.csm__kropka {
  color: var(--color-primary);
  font-weight: 700;
}

/* Blok zakończenia w dymku opiekuna: włos, opis i przycisk na całą szerokość. */
.csm {
  max-width: 320px;
}

.csm__separator {
  height: 1px;
  margin: 10px 0 8px;
  background: rgba(22, 35, 59, 0.1);
}

.csm__separator[hidden] {
  display: none;
}

.csm__opis {
  margin: 2px 0 10px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.csm__zakoncz {
  width: 100%;
  justify-content: center;
}

/*
  Status eksportu — dymek pod belką, pod przyciskiem. Pokazuje się tylko,
  gdy jest co powiedzieć.
*/
.eksport-status {
  position: absolute;
  top: calc(100% + 8px);
  right: var(--space-5);
  max-width: 340px;
  padding: 8px 14px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  box-shadow: var(--shadow);
  font-size: 12.5px;
  color: var(--color-text-muted);
}

.eksport-status:empty {
  display: none;
}

.eksport-status[data-typ="ok"] { color: var(--color-success); }
.eksport-status[data-typ="blad"] { color: var(--color-danger); }
.eksport-status[data-typ="uwaga"] { color: var(--color-warning); }

/* --------------------------------------------------------------- kropki -- */

.kropki {
  justify-self: center;
  display: flex;
  align-items: center;
  /* Rząd ikon = szerokość ramki telefonu. Patrz zmienne na górze pliku. */
  gap: calc(
    (var(--szerokosc-telefonu) - var(--ile-kropek) * var(--rozmiar-kropki)) /
      (var(--ile-kropek) - 1)
  );
}

/*
  Okrągły przycisk z ikoną sekcji. Ikona (SVG w currentColor) wjeżdża tu
  z app.js, więc stany kolorystyczne załatwia sam `color` przycisku.
*/
.kropka {
  position: relative;
  display: grid;
  place-items: center;
  width: var(--rozmiar-kropki);
  height: var(--rozmiar-kropki);
  padding: 0;
  border: 1px solid transparent;
  background: none;
  border-radius: 999px;
  color: var(--color-text-muted);
  transition: color 0.18s var(--ease), background 0.18s var(--ease),
    border-color 0.18s var(--ease), box-shadow 0.18s var(--ease);
}

.kropka__ikona {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
}

.kropka:hover {
  color: var(--color-primary);
  background: var(--color-surface-alt);
  border-color: var(--color-border);
}

.kropka[aria-selected="true"] {
  color: var(--color-text-inverse);
  background: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 4px 14px rgba(39, 99, 197, 0.35);
}

/*
  Sekcja z zapisaną uwagą — kropka w rogu, ta sama logika co licznik przy
  przycisku panelu. Obwódka wokół całego przycisku gryzłaby się ze stanem
  aktywnym, znacznik w rogu czyta się niezależnie od niego.
*/
.kropka[data-ma-uwage="tak"]::after {
  content: "";
  position: absolute;
  top: 3px;
  right: 3px;
  width: 9px;
  height: 9px;
  border-radius: 999px;
  background: var(--color-accent);
  border: 2px solid var(--color-surface);
}

.kropka[aria-selected="true"][data-ma-uwage="tak"]::after {
  border-color: var(--color-primary);
}

/*
  Nazwa sekcji tylko przy najechaniu i przy fokusie z klawiatury — belka ma
  zostać pusta, ale cztery nieopisane kropki bez tego byłyby zgadywanką.
*/
.kropka__nazwa {
  position: absolute;
  top: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(-3px);
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  background: var(--color-text);
  color: var(--color-bg);
  font-size: 12px;
  font-weight: 650;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.kropka:hover .kropka__nazwa,
.kropka:focus-visible .kropka__nazwa {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* --------------------------------------------------- paski przewijania -- */

/*
  Systemowy scrollbar Windowsa (szare bloki ze strzałkami) rozbijał okno
  środowiska. Wszystkie przewijania — pasek etapów, karty, czaty, listy —
  noszą jeden cichy pasek w błękicie marki: cienki, zaokrąglony, bez
  strzałek, z przezroczystym torem; wyraźnieje dopiero pod kursorem.
*/
/*
  UWAGA: standardowe `scrollbar-width`/`scrollbar-color` wyłącznie dla
  Firefoksa (@supports łapie tylko jego). Chromium po ich ustawieniu
  IGNORUJE style ::-webkit-scrollbar-* — wracał systemowy pasek ze
  strzałkami, mimo że niżej są jawnie wyłączone.
*/
@supports (-moz-appearance: none) {
  * {
    scrollbar-width: thin;
    scrollbar-color: rgba(39, 99, 197, 0.3) transparent;
  }
}

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

/* Przezroczysta obwódka odsuwa uchwyt od treści — pasek robi się cieńszy
   optycznie, a strefa łapania myszą zostaje pełna. */
::-webkit-scrollbar-thumb {
  background: rgba(39, 99, 197, 0.3);
  border: 2px solid transparent;
  background-clip: padding-box;
  border-radius: 999px;
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(39, 99, 197, 0.55);
}

/* Koniec ze strzałkami. */
::-webkit-scrollbar-button {
  display: none;
  width: 0;
  height: 0;
}

::-webkit-scrollbar-corner {
  background: transparent;
}

/*
  Wątki czatu (asystent tekstowy i asystent opinii) przewijają się BEZ
  widocznego paska — jak w prawdziwym komunikatorze: kółko myszy i gest
  działają, a rozmowy nic nie okleja.
*/
.rozmowa__watek {
  scrollbar-width: none; /* Firefox */
}

.rozmowa__watek::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

/* ---------------------------------------------------------------- scena -- */

/*
  Treść siedzi w OKNIE: ta sama subtelna błękitna ramka co wokół notatnika,
  tylko bez sygnatury. Dzięki niej środowisko czyta się jak aplikacja
  postawiona na tle, a nie jak treść rozlana po całej stronie.

  Odstęp od belki przeszedł z wypełnienia na margines — inaczej ramka
  zaczynałaby się pod belką, ale jej górna krawędź chowałaby się za nią.
*/
.scena {
  position: relative;
  z-index: 1;
  /*
    PEŁNY KADR, jak w platformie sprzedażowej: scena bierze całą wysokość
    pod belką, bez obwódki i bez zaokrąglenia. Treść pływa w otwartej
    przestrzeni, a o głębi mówi tło (patrz .tlo), nie ramka.

    Wcześniej scena była sztywnym oknem z błękitną obwódką 2 px
    i wysokością liczoną od szerokości ekranu (clamp 520–760 px). Uchylone:
    to właśnie ramka najmocniej odróżniała środowisko od platformy.
    Nie przywracaj — dashboard tnie przeciąganą kartę regułą overflow
    niżej, a nie linią ramki, więc niczego nie potrzebuje.

    Wysokość nadal jest SZTYWNA, nie minimalna: dłuższa treść (czat, lista
    FAQ) przewija się wewnątrz sekcji, a nie rozpycha strony.
  */
  height: calc(100vh - 73px);
  width: min(1760px, 100%);
  margin: 0 auto;
  padding: 26px 44px 22px;
  display: flex;
}

/*
  Treść sekcji stoi na środku ekranu — w pionie i w poziomie.

  Centrujemy `margin: auto`, a nie `place-items: center`: gdy treść jest
  wyższa niż okno (telefon 700 px na niskim laptopie, długa lista SMS-ów),
  automatyczny margines zwija się do zera i wszystko zostaje dostępne przez
  przewijanie. Wyśrodkowanie przez `justify-content`/`place-items` ucięłoby
  w takiej sytuacji górę treści.
*/
.widok {
  margin: auto;
  width: 100%;
  /* Sekcja wyższa niż okno przewija się w sobie zamiast rozpychać ramkę. */
  max-height: 100%;
  overflow-y: auto;
}

.widok[hidden] {
  display: none;
}

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: var(--space-5);
}

.card__title {
  font-size: 16px;
  font-weight: 700;
  margin-bottom: var(--space-2);
}

/* ------------------------------------------------------- baza wiedzy -- */

/*
  Jedna karta w kroju karty SMS-a (te same klasy nagłówka), w niej
  przełącznik trzech części i jedna lista naraz. Wpis = podgląd z jednym
  pisakiem, po kliknięciu formularz całego wpisu w tym samym miejscu.

  Uchylone: dwie kolumny (FAQ obok cennika) z pisakiem przy każdym polu
  i bez miejsca na trzecią część.
*/
.wiedza {
  display: flex;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 0;
}

#widok-wiedza {
  height: 100%;
}

.wiedza__karta {
  display: flex;
  flex-direction: column;
  gap: 18px;
  width: 100%;
  max-width: 900px;
  height: min(100%, 700px);
  margin: auto 0;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 64px -24px rgba(16, 35, 66, 0.22),
    0 2px 8px rgba(16, 35, 66, 0.05);
}

/* Przełącznik części: pigułka ze szkła, aktywna zakładka pełnym błękitem. */
.wiedza__przelacznik {
  display: flex;
  gap: 4px;
  padding: 4px;
  border-radius: 999px;
  border: 1px solid rgba(22, 35, 59, 0.08);
  background: rgba(255, 255, 255, 0.6);
  align-self: flex-start;
}

.wiedza__zakladka {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), color 0.18s var(--ease);
}

.wiedza__zakladka:hover {
  color: var(--color-primary);
}

.wiedza__zakladka[aria-selected="true"] {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 6px 16px -6px rgba(39, 99, 197, 0.6);
}

.wiedza__zakladka i {
  display: inline-grid;
  place-items: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: rgba(22, 35, 59, 0.08);
  font-size: 11px;
  font-style: normal;
  font-weight: 700;
}

.wiedza__zakladka[aria-selected="true"] i {
  background: rgba(255, 255, 255, 0.22);
}

.wiedza__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-height: 0;
  overflow-y: auto;
  padding-right: 4px;
}

/* Wpis: podgląd, znacznik, jeden pisak; w edycji formularz w tym samym miejscu. */
.wpis {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px 12px 16px;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.72);
  transition: border-color 0.2s var(--ease), background-color 0.2s var(--ease);
}

.wpis:hover {
  border-color: rgba(39, 99, 197, 0.3);
}

.wpis[data-zmieniony="tak"],
.wpis[data-dodany="tak"] {
  border-color: var(--color-primary);
}

.wpis[data-tryb="edycja"] {
  flex-direction: column;
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.wpis__podglad {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.wpis__podglad[hidden] {
  display: none;
}

.wpis__glowne {
  font-size: 14.5px;
  font-weight: 700;
}

.wpis__drugie {
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* Cennik: usługa po lewej, kwota po prawej w jednym wierszu. */
.wpis[data-rodzaj="cennik"] .wpis__podglad {
  flex-direction: row;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
}

.wpis__kwota {
  flex-shrink: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--color-primary);
  white-space: nowrap;
}

.wpis__znacznik {
  flex-shrink: 0;
  align-self: center;
}

.wpis[data-dodany="tak"] .wpis__znacznik {
  color: var(--color-success);
  background: rgba(46, 158, 91, 0.12);
}

.wpis__znacznik[hidden] {
  display: none;
}

.wpis__pisak {
  flex-shrink: 0;
  align-self: center;
}

.wpis__pisak[hidden] {
  display: none;
}

/* Formularz wpisu: etykieta nad polem, akcje w jednym rzędzie. */
.wpis__edycja {
  display: flex;
  flex-direction: column;
  gap: 10px;
  width: 100%;
}

.wpis__edycja[hidden] {
  display: none;
}

.wpis__pole {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.wpis__pole > span {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.wpis__input {
  width: 100%;
  box-sizing: border-box;
  padding: 9px 12px;
  border: 1px solid var(--color-border-strong);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: vertical;
}

.wpis__input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.16);
}

.wpis__akcje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.wpis__akcje-prawo {
  display: flex;
  gap: 8px;
  margin-left: auto;
}

/* „Dodaj” — przerywana obwódka na końcu listy. */
.wiedza__dodaj {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 11px 14px;
  border: 1px dashed rgba(39, 99, 197, 0.45);
  border-radius: 16px;
  background: transparent;
  color: var(--color-primary);
  font: inherit;
  font-size: 13.5px;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.18s var(--ease), border-color 0.18s var(--ease);
}

.wiedza__dodaj:hover {
  background: rgba(39, 99, 197, 0.06);
  border-color: var(--color-primary);
}

.wiedza__dodaj svg {
  width: 16px;
  height: 16px;
}

/* ---------------------------------------------------- asystent głosowy -- */

/*
  Widok głosowy stoi na trzech rzeczach: model 3D telefonu (lewa kolumna),
  notatnik na poprawki (prawa) i numer, pod który dzwoni się na próbę
  (wspólna stopka obu kolumn).

  Kolumny są równe. Telefon jest tu treścią — pokazuje, na czym partner za
  chwilę odbierze rozmowę — a nie ilustracją dostawioną do notatnika.
*/
/*
  Sekcja wypełnia okno na sztywno i NIE przewija się jako całość: rosnąca
  lista poprawek przewija się wewnątrz notatnika, a ramka z sygnaturą
  ARKANIP stoi w miejscu. Wcześniej scrollował się cały widok i pasek
  przewijania nachodził na wordmark w prawym górnym rogu ramki.
*/
.widok--glos {
  width: 100%;
  height: 100%;
  /*
    Sygnatura ARKANIP siedzi NA linii ramki notatnika i wystaje ~5 px poza
    nią. Notatnik sięga krawędzi widoku, a widok przycina wszystko poza
    swoim pudłem — bez tego zapasu wordmark w prawym górnym rogu tracił
    głowę, a dolny dokładał 3 px przewijania.
  */
  padding: 6px 0;
}

.glos {
  display: flex;
  flex-direction: column;
  gap: var(--space-6);
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
}

/*
  Kolumny nie są równe: telefon zajmuje mniej miejsca, niż wynosi połowa
  okna, bo model i tak ma wokół siebie powietrze. Zwężenie lewej kolumny
  przesuwa telefon z numerem w lewo i oddaje odzyskane miejsce notatnikowi —
  ciężar obu stron się wtedy wyrównuje.
*/
.glos__kolumny {
  display: grid;
  /* Stała szerokość kolumny telefonu, reszta dla notatnika: przy ułamkach
     jednostek `fr` obie wychodziły z częściami dziesiętnymi piksela. */
  /* Te same proporcje co .mer__gora w warstwie merytorycznej. */
  grid-template-columns: minmax(340px, 37%) minmax(0, 1fr);
  /* Rząd przypięty do wysokości sekcji — karta i lista przewijają się
     w sobie, a nie rozpychają okna. */
  grid-template-rows: minmax(0, 1fr);
  gap: 52px;
  flex: 1;
  min-height: 0;
}

/*
  Poniżej ~1000 px dwie kolumny robią się za wąskie: telefon schodzi do
  rozmiaru ikonki, a w notatniku zostaje pięć znaków na linię. Wtedy jedna
  pod drugą, telefon na górze — i sekcja wraca do zwykłego przewijania,
  bo dwóch pięter nie da się wcisnąć w wysokość okna.
*/
@media (max-width: 1000px) {
  .widok--glos,
  .glos {
    height: auto;
  }

  .glos__kolumny {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: none;
  }
}

/* ------------------------------------------------ lewa kolumna: telefon -- */

/*
  Telefon, podpis i numer w jednej kolumnie. Zapas u dołu jest równy
  wypełnieniu notatnika (24 px), więc pigułka z numerem kończy się
  dokładnie na tej samej linii co pasek wpisywania obok.

  Telefon to ta sama atrapa iPhone'a w CSS, co w warstwie merytorycznej
  (.iphone), z ekranem klawiatury telefonu zamiast rozmowy
  (.ekran--klawiatura niżej).

  Uchylone: scena 3D ze Spline razem z całym blokiem reguł .scena3d —
  model ładowany z CDN (jedyna rzecz w środowisku wymagająca internetu),
  z wypalonym ekranem, którego nie dało się podmienić, i wyglądem obcym
  obok atrapy CSS. Nie przywracaj: wszystkie sceny 3D są już poza
  środowiskiem, sceny.js zostaje tylko jako nieużywany moduł.
*/
.glos__telefon {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  min-height: 0;
  box-sizing: border-box;
  /* Układ jak w warstwie merytorycznej: telefon od góry kadru (podpis
     w rogu jest tu schowany), stopka z numerem tuż pod nim. */
  padding-top: 0;
  /* Bez dolnego wypełnienia: telefon centruje się w całej wysokości kolumny,
     tej samej, co karta notatnika obok. Uchylone: padding-bottom pod dawną
     stopkę z numerem (numer jest dziś na ekranie telefonu). */
  padding-bottom: 0;
}

/* Telefon wyśrodkowany w pionie względem karty obok (kolumny mają tę samą
   wysokość z siatki; decyzja użytkownika 2026-09-05). */
.glos__atrapa {
  flex: 1;
  min-height: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* .telefon ma display: flex, więc samo hidden by nie zadziałało. */
.glos__atrapa[hidden] {
  display: none;
}

/* Wysokość telefonu: to, co zostaje po belce, podpisie i stopce z numerem
   (zmierzone: belka 73, wypełnienie 48, podpis 86, stopka ~90, odstępy). */
/* Telefon nieco mniejszy niż w merytoryce (ma na ekranie tylko logo
   i numer, nie musi dominować); numer jest na ekranie, więc pod telefonem
   nic nie stoi. */
.glos__atrapa .iphone {
  height: round(clamp(360px, calc(100vh - 290px), 760px), 2px);
}

/* ------------------------------------------------ ekran z logo ARKANIP -- */

/*
  Biały, minimalistyczny ekran: wordmark ARKANIP (ta sama klasa .logo, co
  w belce, tylko większa) i podpis. Nic więcej — telefon ma być ozdobą,
  nie drugim interfejsem. Statyczne poza godziną.
  Uchylone: klawiatura iOS z numerem, ekran połączenia, ekran blokady, 3D.
*/
.ekran.ekran--logo {
  box-sizing: border-box;
  background: #ffffff;
  color: #101423;
}

.ekranlogo {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
}

.ekranlogo__znak {
  /* Logo niesie ekran — ok. 70 % szerokości wyświetlacza (powiększone 2026-09-05
     na prośbę użytkownika; wcześniej 34 px / 55 %). */
  font-size: 44px;
}

.ekranlogo__podpis {
  font-size: 18px;
  letter-spacing: 0.01em;
  color: var(--color-text-muted);
}

/*
  Numer testowy w dolnej części ekranu: podpis i błękitna pigułka (ta sama
  .pigulka, co dawniej pod telefonem). Ekran nie łapie kliknięć, więc ten
  blok włącza je z powrotem — klik w pigułkę kopiuje numer.
*/
.ekranlogo__cta {
  position: absolute;
  left: 6%;
  right: 6%;
  bottom: 12%;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  pointer-events: auto;
}

.ekranlogo__cta .glos__stopka-info {
  font-size: 12.5px;
  color: var(--color-text-muted);
  text-align: center;
}

/* Numer w JEDNEJ linii: bez zawijania, ciaśniejszy tracking i wypełnienie
   niż w pigułce pod telefonem — ekran jest wąski. */
.ekranlogo__cta .pigulka {
  max-width: 100%;
  white-space: nowrap;
  padding: 0 18px;
  letter-spacing: 0.06em;
}

.ekranlogo__cta .pigulka__tekst {
  white-space: nowrap;
}

/* Niskie okna (laptop 768 px, rzutnik 720 px): ekran telefonu ma ok. 190 px
   szerokości, więc pigułka z numerem zmniejsza się, żeby dalej stać w jednej linii. */
@media (max-height: 820px) {
  .ekranlogo__cta {
    left: 3%;
    right: 3%;
  }

  .ekranlogo__cta .pigulka {
    height: 42px;
    padding: 0 12px;
    gap: 6px;
    font-size: 11.5px;
    letter-spacing: 0.03em;
  }

  .ekranlogo__cta .glos__stopka-info {
    font-size: 11.5px;
  }

  .ekranlogo__znak {
    font-size: 36px;
  }

  .ekranlogo__podpis {
    font-size: 15px;
  }
}

.ekranlogo__home {
  position: absolute;
  bottom: 2.2%;
  left: 50%;
  transform: translateX(-50%);
  width: 34%;
  height: 4px;
  border-radius: 999px;
  background: #101423;
}

/* ------------------------------------------ prawa kolumna: scenariusze -- */

/*
  Prawa kolumna w rytmie warstwy merytorycznej: karty (jedna widoczna)
  pływające na środku kolumny i dolny rząd z postępem i nawigacją.
  Karta scenariusza ma dokładnie krój karty SMS-a (te same klasy
  nagłówka), żeby obie sekcje czytały się jako jeden interfejs.

  Uchylone: dwie listy naraz (wszystkie scenariusze i notatnik pod nimi)
  — przytłaczały i nie rymowały się z resztą środowiska.
*/
.glos__prawa {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  min-height: 0;
}

.glos__karty {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
}

.glos__karta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  width: 100%;
  max-width: 760px;
  height: min(100%, 540px);
  overflow-y: auto;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 64px -24px rgba(16, 35, 66, 0.22),
    0 2px 8px rgba(16, 35, 66, 0.05);
}

.glos__karta[hidden] {
  display: none;
}

/* Notatnik jako ostatnia karta: lista rośnie, pole wpisu przy dole. */
.glos__karta--notatnik .uwagi {
  flex: 1;
  min-height: 0;
}

.glos__dol {
  min-height: 48px;
}

/* Segment scenariusza ze wszystkimi wariantami ocenionymi — zielony. */
.postep__segment[data-gotowy="tak"] .postep__tor i {
  background: var(--color-success);
}

.scen__stan {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
}

.scen__warianty {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Wariant: etykieta, kciuki po prawej, pole poprawki pod spodem. */
.wariant {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
  padding: 10px 10px 10px 14px;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.wariant[data-ocena="lubie"] {
  background: rgba(46, 158, 91, 0.08);
}

.wariant[data-ocena="odrzucona"] {
  background: rgba(208, 138, 44, 0.1);
}

.wariant__etykieta {
  flex: 1;
  min-width: 0;
  font-size: 15px;
}

.wariant .reakcje {
  margin: 0;
  padding: 0;
  align-self: center;
}

/* Pole uwagi pod wariantem: na całą szerokość wiersza i z odstępem,
   żeby nie zahaczało o etykietę i kciuki. */
.wariant .poprawka {
  width: 100%;
  max-width: none;
  margin-top: 4px;
  padding-left: 0;
}

/* Notatnik pod scenariuszami — nagłówek z podpisem, reszta jak dotąd. */
.notatnik__lead {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--color-text-muted);
}

/* ----------------------------------------------- prawa kolumna: notatnik -- */

/*
  „Przezroczyste pole” to to samo szkło co dymki czatu (tokeny --szklo-*).
  Powód jest praktyczny, nie ozdobny: notatnik nie może wyglądać jak druga
  biała karta postawiona na białej stronie.
*/
/*
  Notatnik sięga dołu kolumny, żeby pasek wpisywania stanął równo pod
  telefonem, a nie w połowie wysokości. Lista poprawek zabiera to, co
  zostaje, i przewija się sama, gdy wpisów przybędzie.
*/
.notatnik {
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 0;
  gap: var(--space-3);
  padding: var(--space-5);
  /*
    Szkło jak karta w warstwie merytorycznej: półprzezroczysta biel, jasna
    krawędź, cień, bez backdrop-filter. Notatnik ma należeć do tego samego
    języka, co reszta kadrów.

    Uchylone: przezroczyste pole z błękitną ramką 2 px i sygnaturą ARKANIP
    wpisaną w linię ramki (patrz niżej) — to był język starego okna
    z obwódką, a sygnatura zderzała się z kropką przewodnika w rogu.
  */
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 64px -24px rgba(16, 35, 66, 0.22),
    0 2px 8px rgba(16, 35, 66, 0.05);
}

.notatnik__belka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

.notatnik__tytul {
  font-size: 15px;
  font-weight: 700;
  color: var(--szklo-user-tekst);
}

/*
  Pole jest przezroczyste do zera: ramkę, tło i cień niesie kontener, więc
  tekst czyta się jak pisany wprost na szkle. Bez `resize` — kartka rośnie
  z kolumną, a nie z uchwytem w rogu, który rozjeżdżałby siatkę.
*/
.notatnik__pole {
  flex: 1;
  width: 100%;
  min-height: 320px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--szklo-user-tekst);
  font-family: inherit;
  font-size: 15px;
  line-height: 1.7;
  resize: none;
}

.notatnik__pole:focus {
  outline: none;
}

.notatnik__pole::placeholder {
  color: var(--color-text-muted);
  opacity: 0.9;
}

.notatnik__stopka {
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
  border-top: 1px solid var(--szklo-pasek-krawedz);
  padding-top: var(--space-3);
}

/* ------------------------------------------------ stopka: numer testowy -- */

/* Podpis nad numerem, numer na samym dole kolumny. */
.glos__stopka {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  margin-top: auto;
}

/*
  Pigułka z numerem — pełny błękit marki. To jedyny element w całym widoku,
  który mówi „zadzwoń tutaj”, więc ma się rzucać w oczy.
*/
.pigulka {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  /* Stała wysokość zamiast wypełnienia: interlinia dawała 48,14 px. */
  height: 48px;
  padding: 0 24px;
  border-radius: 999px;
  border: 1px solid rgba(39, 99, 197, 0.55);
  background: #2763c5;
  color: #ffffff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  box-shadow: 0 0 26px rgba(39, 99, 197, 0.45),
    inset 0 1px 0 rgba(255, 255, 255, 0.14);
  transition: transform 0.15s var(--ease), box-shadow 0.15s var(--ease),
    border-color 0.15s var(--ease);
}

.pigulka:hover {
  transform: translateY(-1px);
  border-color: rgba(39, 99, 197, 0.85);
  box-shadow: 0 0 34px rgba(39, 99, 197, 0.6),
    inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.pigulka:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 3px;
}

.pigulka__ikona {
  display: grid;
  place-items: center;
  color: currentColor;
}

.glos__stopka-info {
  font-size: 12px;
  color: var(--color-text-muted);
  min-height: 16px;
}

.voice__embed {
  width: 100%;
  min-height: 420px;
}

.voice__embed > iframe {
  width: 100%;
  min-height: 420px;
  border: 0;
}

/* ---------------------------------------------------------------- SMS -- */

/*
  Jeden SMS to nagłówek (numer i typ), dymek i rząd akcji pod nim. Wszystko
  przy lewej krawędzi, bo to wiadomość OD kliniki — dokładnie tak, jak dymek
  bota w czacie.
*/
.sms {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

/* Typ wiadomości — mówi, w którym momencie ścieżki pacjenta SMS wychodzi. */

/* Ślad po poprawce wpisanej na spotkaniu — ta sama informacja idzie do PDF-a. */
/* .sms__znacznik — wspólny styl przy .parametr__znacznik (niżej w arkuszu). */

/*
  Dymek SMS-a jest szerszy niż w czacie: nie stoi naprzeciwko drugiego
  rozmówcy, tylko sam w kolumnie, a formułki bywają długie.
*/

/* Pole edycji udaje dymek — ta sama krągłość i ten sam krój, żeby przy
   przełączeniu w tryb edycji nic nie podskoczyło. */

.empty {
  padding: var(--space-6);
  text-align: center;
  color: var(--color-text-muted);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

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

/*
  Podgląd formularza wypełnia całą resztę karty — karta ma sztywną
  wysokość kolumny, więc ramka bierze to, co zostaje po nagłówku.
  Bez przycisków: formularz otwiera link w SMS-ie na telefonie obok.
*/
.form-frame {
  flex: 1;
  min-height: 0;
  margin-top: var(--space-2);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--color-surface-alt);
}

.form-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}

/* Stan podglądu — w belce karty, po prawej, jak znacznik „poprawione”. */
.form-status {
  font-size: 12px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/* ---------------------------------------------------------- przyciski -- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  padding: 10px 18px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  font-weight: 650;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.18s var(--ease), border-color 0.18s var(--ease),
    color 0.18s var(--ease), transform 0.12s var(--ease);
}

.btn:active {
  transform: translateY(1px);
}

.btn--primary {
  background: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn--primary:hover {
  background: var(--color-primary-dark);
}

.btn--ghost {
  background: var(--color-surface);
  border-color: var(--color-border-strong);
  color: var(--color-text);
}

.btn--ghost:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.btn--on-dark {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.22);
  color: #ffffff;
}

.btn--on-dark:hover {
  background: rgba(255, 255, 255, 0.18);
}

.btn--small {
  padding: 6px 12px;
  font-size: 13px;
}

.btn--pelny {
  width: 100%;
  padding: 13px 18px;
  font-size: 15px;
}

.btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
}

.ikona {
  display: inline-grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-sm);
  border: 1px solid transparent;
  background: none;
  color: var(--color-text-muted);
  flex-shrink: 0;
  transition: color 0.18s var(--ease), background 0.18s var(--ease);
}

.ikona:hover {
  color: var(--color-text);
  background: var(--color-surface-alt);
}

/* ------------------------------------------------ rozmowa (liquid glass) -- */

/*
  Wspólny komponent dla asystenta tekstowego i asystenta opinii: wątek
  dymków na całą stronę, a pasek wpisywania przyklejony do dołu okna.

  Pasek jest `fixed`, ale siedzi WEWNĄTRZ widoku — dzięki temu znika razem
  z zakładką (globalna reguła `[hidden] { display: none !important }`)
  i nie trzeba go osobno chować przy przełączaniu sekcji.
*/
/*
  Rozmowa wypełnia okno NA SZTYWNO: wątek przewija się w środku, więc ramka
  okna stoi w miejscu niezależnie od liczby wiadomości — dokładać można bez
  końca, a rośnie tylko pasek przewijania.
*/
.widok--rozmowa {
  width: 100%;
  margin: 0;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.rozmowa {
  flex: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 760px;
  margin: 0 auto;
}

.rozmowa__watek {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  /*
    Oddech na pierścienie fokusa, a od dołu zapas na pływający pasek —
    wewnątrz przewijanej treści, nie pod nią: w spoczynku ostatni dymek stoi
    nad paskiem, ale w trakcie przewijania wiadomości dojeżdżają do samej
    ramki i tam znikają, zamiast urywać się wysoko nad nią.

    Boki mają 32 px, bo kontener przycina zawartość: cień dymka (rozmycie
    40 px) ucinał się przy węższym wypełnieniu w pół piksela i po bokach
    czatu stała jasna, ostra smuga zamiast miękkiego rozejścia.
  */
  padding: 4px 32px 88px 32px;
  /* Miękkie wygaszenie przy dolnej krawędzi — dymki rozpływają się przy
     ramce, a nie tną w pół piksela. */
  -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
  mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
}

/*
  Puste miejsce nad pierwszą wiadomością: dopóki rozmowa jest krótsza niż
  kadr, dymki trzymają się dołu przy pasku — jak w każdym komunikatorze.
  `justify-content: flex-end` odpada, bo blokuje przewijanie w kontenerze
  z overflow.
*/
.rozmowa__watek > :first-child {
  margin-top: auto;
}

/*
  Dymek. Efekt „liquid glass” to trzy rzeczy naraz: rozmycie tego, co pod
  spodem, delikatna jasna krawędź i wewnętrzny połysk przy górnej krawędzi.
  Samo półprzezroczyste tło wygląda płasko.
*/
.dymek {
  position: relative;
  max-width: 78%;
  padding: 14px 20px;
  border-radius: 26px;
  font-size: 15.5px;
  line-height: 1.5;
  box-shadow: var(--szklo-cien), inset 0 1px 0 var(--szklo-polysk);
  animation: dymek-wejscie 0.32s var(--ease);
}

/* Połysk — cienka jasna smuga tuż pod górną krawędzią. */
.dymek::after {
  content: "";
  position: absolute;
  left: 18px;
  right: 18px;
  top: 1px;
  height: 1px;
  border-radius: 999px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--szklo-polysk),
    transparent
  );
  pointer-events: none;
}

@keyframes dymek-wejscie {
  from {
    opacity: 0;
    transform: translateY(8px) scale(0.98);
  }
}

/* Odpowiedź asystenta — biała, przy lewej krawędzi. */
.dymek--bot {
  align-self: flex-start;
  border-bottom-left-radius: 10px;
  background-color: var(--dymek-bot-tlo);
  border: 1px solid var(--dymek-bot-krawedz);
  color: var(--dymek-bot-tekst);
}

/* Wiadomość pacjenta — niebieska, przy prawej krawędzi. */
.dymek--user {
  align-self: flex-end;
  border-bottom-right-radius: 10px;
  background-color: var(--dymek-user-tlo);
  border: 1px solid var(--dymek-user-krawedz);
  color: var(--dymek-user-tekst);
}

/*
  Kropki „pisze…” — ten sam dymek, tylko z animacją zamiast treści.
  Nosi kolory dymka asystenta (biel), bo zaraz się w niego zamieni —
  fioletowe szkło w tym miejscu wyglądało jak trzeci rozmówca.
*/
.dymek--pisze {
  align-self: flex-start;
  display: flex;
  gap: 5px;
  padding: 18px 20px;
  border-bottom-left-radius: 10px;
  background-color: var(--dymek-bot-tlo);
  border: 1px solid var(--dymek-bot-krawedz);
}

.dymek--pisze i {
  width: 7px;
  height: 7px;
  border-radius: 999px;
  background: var(--dymek-bot-tekst);
  opacity: 0.35;
  animation: pisanie 1.3s infinite var(--ease);
}

.dymek--pisze i:nth-child(2) {
  animation-delay: 0.18s;
}

.dymek--pisze i:nth-child(3) {
  animation-delay: 0.36s;
}

@keyframes pisanie {
  0%,
  60%,
  100% {
    opacity: 0.3;
    transform: translateY(0);
  }
  30% {
    opacity: 1;
    transform: translateY(-3px);
  }
}

/* ------------------------------------------------------ pasek wpisywania -- */

/*
  Pasek jest DOSŁOWNIE przezroczysty: bez wypełnienia, bez filtra tła
  i bez cienia. Całą jego formę niesie jedna subtelna obwódka, więc tło
  strony przechodzi przez niego bez żadnej zmiany — inaczej niż dymki,
  które mają własne szkło.
*/
.pasek {
  position: fixed;
  left: 50%;
  bottom: var(--space-5);
  transform: translateX(-50%);
  z-index: 30;
  width: min(820px, calc(100vw - 2 * var(--space-5)));
  display: flex;
  align-items: center;
  gap: var(--space-3);
  /* Pasek nieco większy (decyzja użytkownika 2026-09-05): 64 px wysokości. */
  padding: 10px 10px 10px 24px;
  border-radius: 999px;
  /* Kryjące tło: wiadomości suną pod paskiem, nie mogą przez niego prześwitywać. */
  background: var(--color-surface);
  border: 1px solid var(--szklo-pasek-krawedz);
  box-shadow: var(--shadow);
}

/* Prawdziwe pole tekstowe — bez własnego tła i obramowania, żeby szkło
   paska pozostało jednolite. */
.pasek__pole {
  flex: 1;
  min-width: 0;
  border: 0;
  outline: none;
  background: none;
  color: var(--color-text);
  font-family: inherit;
  font-size: 17px;
  padding: 8px 4px;
}

.pasek__pole::placeholder {
  color: var(--szklo-pasek-tekst);
}

.pasek__wyslij {
  border: 0;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: linear-gradient(
    160deg,
    var(--color-primary-bright),
    var(--color-primary)
  );
  color: #ffffff;
  font-size: 18px;
  flex-shrink: 0;
  box-shadow: 0 6px 18px rgba(39, 99, 197, 0.35);
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}

.pasek__wyslij:hover {
  transform: scale(1.06);
}

.pasek__wyslij:active {
  transform: scale(0.96);
}

/* ------------------------------------------- ocena w rozmowie (opinie) -- */

/* Dopisek „Tak wygląda odpowiedź…” pod opinią UCHYLONY (2026-09-04) — tłumaczy to przewodnik. */

.rozmowa__reset {
  align-self: center;
  margin-top: var(--space-2);
}

/*
  Kciuki przy odpowiedziach asystenta.

  Stoją pod dymkiem jako osobny rząd, przy jego lewej krawędzi — dymek bota
  też trzyma się lewej. Ujemny margines dociąga je do wiadomości, której
  dotyczą: pełny odstęp wątku (16 px) rozdzielał je tak samo, jak dwie różne
  wypowiedzi, i nie było widać, do czego się odnoszą.
*/
.reakcje {
  align-self: flex-start;
  display: flex;
  gap: 6px;
  margin-top: -10px;
  padding-left: 6px;
}

/*
  `padding: 0` nie jest kosmetyką: przeglądarka daje przyciskowi własne
  `1px 6px`, przez co pole treści zwężało się do 16 px, ikona 20 px w nie nie
  wchodziła i wychodziła z kółka o 2 px w prawo (zmierzone: 7 px od lewej,
  3 px od prawej). Zerowe wypełnienie plus `place-items: center` daje równy
  margines dookoła. `line-height: 0` zdejmuje resztę odstępu z linii tekstu.
*/
.reakcja {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 0;
  border-radius: 999px;
  border: 1px solid var(--szklo-pasek-krawedz);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
    background-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.reakcja svg {
  display: block;
  width: 18px;
  height: 18px;
}

.reakcja:hover {
  color: var(--color-primary-bright);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.reakcja[data-odrzuc]:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

/* Kciuk w górę jest zielony także pod kursorem — kolor mówi, co zrobi klik. */
.reakcja[data-lubie]:hover {
  color: var(--color-success);
  border-color: var(--color-success);
}

.reakcja:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 2px;
}

/* Zapalony kciuk to STAN, nie ślad po kliknięciu — zostaje do końca sesji. */
.reakcje[data-ocena="lubie"] [data-lubie] {
  color: var(--color-success);
  border-color: var(--color-success);
  background: rgba(46, 158, 91, 0.12);
}

.reakcje[data-ocena="lubie"] [data-lubie] svg,
.reakcje[data-ocena="odrzucona"] [data-odrzuc] svg {
  fill: currentColor;
  fill-opacity: 0.16;
}

/* Odrzucona odpowiedź ZOSTAJE w wątku — zmienia się tylko jej waga. */
.reakcje[data-ocena="odrzucona"] [data-odrzuc] {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(192, 67, 47, 0.12);
}

.dymek[data-ocena="odrzucona"] {
  opacity: 0.55;
}

.reakcje__etykieta {
  align-self: center;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-danger);
}

/* ------------------------------------- warstwa merytoryczna: moduły -- */

/*
  Pas modułu rozdziela ścieżkę na etapy: rezerwacja, pilnowanie obecności,
  opinia, powrót po miesiącach. Bez niego kilkanaście dymków pod rząd czyta
  się jak jedna długa lista, a to są cztery różne momenty życia pacjenta.
*/

/* Parametry modułu stoją przy wiadomościach, których dotyczą — godzina
   odcięcia nie jest ustawieniem gdzieś w panelu, tylko częścią tej historii. */

/*
  Wcięcie gałęzi. Kontynuacje mogą schodzić dowolnie głęboko, więc poziom
  jest przycięty do trzech — dalej wcięcie przestaje rosnąć, bo inaczej
  dziesiąta wiadomość w gałęzi zaczynałaby się przy prawej krawędzi.
*/
.sms[data-glebokosc="1"] {
  padding-left: 22px;
}

.sms[data-glebokosc="2"] {
  padding-left: 44px;
}

.sms[data-glebokosc="3"] {
  padding-left: 66px;
}

/* Pisak — ta sama okrągła forma co kciuki przy odpowiedziach asystenta. */

/*
  Węzeł bez treści zostaje na ścieżce jako pusty dymek. Klient ma widzieć
  całą strukturę modułu razem z luką — to informacja, a nie brak.
*/
.dymek[data-pusty="tak"] {
  background-color: transparent;
  border-style: dashed;
  color: var(--color-text-muted);
  font-style: italic;
  box-shadow: none;
}

.dymek[data-pusty="tak"]::after {
  display: none;
}

/* Powrót do treści ARKANIP stoi z lewej strony rzędu akcji, z dala od
   „Zapisz” — to cofnięcie, nie zatwierdzenie. */

/* --------------------------------- warstwa merytoryczna: prowadzenie -- */

/*
  W trybie prowadzonym sekcja zwija się do jednej kolumny. Formularz ocen
  znika (chowa go JS), bo prowadzenie ma być jedyną rzeczą na ekranie —
  klient idzie ścieżką pacjenta, a nie ogląda panelu z widgetami.
*/
/*
  W trybie prowadzonym sekcja ma JEDNĄ kolumnę, ale dwie szerokości:
  wiadomość i stopka trzymają się 720 px, bo tekst dłuższy niż to czyta się
  gorzej, a mapa ścieżki dostaje całą dostępną szerokość — po to jest mapą.
*/

/* Pas nad wiadomością: gdzie jestem w ścieżce i ile jeszcze przede mną. */

/* Scena — jedna wiadomość i dużo powietrza dookoła. To jest cały ekran. */

/* Wyjście do kafelków stoi z prawej, z dala od „Dalej” — to nie jest krok
   ścieżki, tylko ucieczka z niej. */

/*
  Duża karta prowadzenia. Dymek rośnie, bo na tym ekranie nie konkuruje
  z niczym innym, a formułkę SMS-a czyta się na spotkaniu na głos.
*/

/* Krótka ścieżka: moduł z jedną wiadomością to jedna karta na środku. */

/* ------------------------------------------------ podsumowanie i kafelki -- */

/* --------------------------------------------------- parametry modułu -- */

/*
  Parametr stoi przy wiadomościach, których dotyczy. Klient może go zmienić,
  ale to tylko podgląd — realne wdrożenie idzie przez ARKANIP, więc pole
  mówi to wprost, a zmiana ląduje w raporcie jako prośba.
*/
.parametry {
  display: grid;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.parametr {
  padding: var(--space-4);
  border: 1px dashed var(--color-border-strong);
  border-radius: var(--radius);
  background: var(--color-surface-alt);
}

/* Po zmianie ustawienia ramka i znacznik są FIOLETOWE (decyzja użytkownika;
   niebieski zlewał się z przyciskami, pomarańcz wyglądał jak ostrzeżenie). */
.parametr[data-zmieniony="tak"] {
  border-style: solid;
  border-color: var(--color-primary);
}

.parametr__belka {
  display: flex;
  align-items: baseline;
  gap: var(--space-2);
}

.parametr__etykieta {
  font-size: 13px;
  font-weight: 700;
}

/* „Dokonano zmiany” — niebieska pigułka z ramką (użytkownik: „na niebiesko, ramka i tekst”). */
/*
  JEDEN znacznik zmiany w całym środowisku: pigułka „Dokonano zmiany”
  z niebieską ramką i niebieskim tekstem — przy ustawieniach, treści SMS-a
  i wpisach bazy wiedzy. Uchylone (2026-09-05): żółte „poprawione”,
  zielone „dodane” i fioletowy wariant — „to nie ten kierunek”.
*/
.parametr__znacznik,
.sms__znacznik,
.wpis__znacznik {
  display: inline-block;
  padding: 2px 9px;
  border: 1px solid var(--color-primary);
  border-radius: 999px;
  background: transparent;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--color-primary);
  line-height: 1.5;
}

.parametr__rzad {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-2);
}

.parametr__pole {
  width: 120px;
  padding: 8px 10px;
  border: 1px solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-variant-numeric: tabular-nums;
}

.parametr__pole:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.16);
}

.parametr__jednostka {
  font-size: 13px;
  color: var(--color-text-muted);
}

.parametr__opis {
  margin-top: var(--space-2);
  font-size: 12px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

/* ------------------------------------------------- mapa ścieżki: linia -- */

/*
  Mapa jest cienką linią, nie tablicą kart: cały moduł mieści się w dwóch
  rzędach i zajmuje ~70 px wysokości. Bez ramki i bez tła — od wiadomości
  oddziela ją sam odstęp i włos linii, więc nic nie konkuruje z treścią,
  którą klient ma właśnie przeczytać.
*/

/* Odcinek między samodzielnymi wiadomościami modułu. */

/* Przystanek — kropka z numerem. Nazwę niesie karta nad mapą. */

/* Rząd gałęzi — wisi pod swoim pytaniem na krótkiej kresce. */

/* Gałąź — pigułka z krótką etykietą odpowiedzi. */

/* Kolejna wiadomość w gałęzi — sama kropka, bez etykiety. */

/*
  Aktywny węzeł: wypełniony, z pierścieniem. Reszta mapy jest wyszarzona,
  więc wystarczy jeden mocny punkt — bez powiększania i bez tekstu.
*/

/* Węzeł bez treści — obwódka przerywana, żeby luka była widoczna z mapy. */

/* ------------------------------------------- notatnik: poprawki po jednej -- */

.notatnik__licznik {
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  white-space: nowrap;
}

/*
  Lista poprawek. Bez ramek i bez kart — same wiersze rozdzielone włosem,
  żeby przy dziesięciu wpisach kolumna nadal wyglądała na notatnik, a nie
  na tabelę.
*/
.uwagi {
  list-style: none;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  margin: 0;
  padding: 0;
}

/* Pusto rośnie razem z listą, żeby pasek nie podskakiwał do góry. */
.uwagi:empty {
  flex: 0;
}

/*
  Wpis w „Twoich uwagach”: osobny kafelek jak wariant scenariusza (biel,
  cienka ramka, zaokrąglenie), numer w kółku, narzędzia po prawej.
  Uchylone (2026-09-04): lista rozdzielana liniami — „trzeba zmienić UI
  kafelka”.
*/
.uwagi {
  gap: 8px;
}

.uwaga {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px 10px 16px;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.7);
  transition: background-color 0.2s var(--ease), border-color 0.2s var(--ease);
}

.uwaga:hover {
  border-color: rgba(39, 99, 197, 0.25);
}

/* Bez numeru wpisu — uchylony (użytkownik: „nie podoba mi się to 0 po lewej”). */

.uwaga[data-edytowana="tak"] {
  border-color: var(--color-primary);
  background: var(--color-surface);
}

.uwaga__tresc {
  flex: 1;
  min-width: 0;
  font-size: 14px;
  line-height: 1.55;
  color: var(--szklo-user-tekst);
  word-break: break-word;
}

/* Narzędzia wpisu wchodzą dopiero pod kursorem — lista ma być czysta. */
.uwaga__narzedzia {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
  opacity: 0.45;
  transition: opacity 0.15s var(--ease);
}

.uwaga:hover .uwaga__narzedzia,
.uwaga:focus-within .uwaga__narzedzia {
  opacity: 1;
}

.uwagi__pusto {
  flex: 1;
  padding: var(--space-4) 0;
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Pole nowej poprawki: tekst i dwa przyciski w jednym rzędzie. */
/*
  Pasek wpisywania — ta sama forma co pasek czatu w rozmowach: pigułka
  z polem i przyciskami w środku. Dzięki temu „tu się pisze” czyta się
  bez tłumaczenia, w obu sekcjach tak samo.
*/
.notatnik__wpis {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: auto;
  min-height: 48px;
  padding: 6px 8px 6px 20px;
  border-radius: 999px;
  border: 1px solid var(--szklo-pasek-krawedz);
}

.uwaga-akcja {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  padding: 0;
  line-height: 0;
  border-radius: 999px;
  border: 1px solid var(--szklo-pasek-krawedz);
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.uwaga-akcja svg {
  display: block;
  width: 16px;
  height: 16px;
}

.uwaga-akcja:hover {
  color: var(--color-primary-bright);
  border-color: var(--color-primary);
}

.uwaga-akcja:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 2px;
}

/* Zatwierdzenie i anulowanie noszą kolor stale — to one prowadzą rękę. */
.uwaga-akcja--tak {
  color: var(--color-success);
  border-color: var(--color-success);
}

.uwaga-akcja--tak:hover {
  color: var(--color-success);
  border-color: var(--color-success);
  background: rgba(46, 158, 91, 0.12);
}

.uwaga-akcja--nie {
  color: var(--color-danger);
  border-color: var(--color-danger);
}

.uwaga-akcja--nie:hover {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background: rgba(192, 67, 47, 0.12);
}

/* Pole na jedną myśl, nie na akapit — jedna linia, rosnąca do trzech. */
.notatnik__pole {
  flex: 1;
  min-height: 24px;
  max-height: 72px;
  padding: 0;
  line-height: 1.5;
}

/* ---------------------------------------- kafelki modułów: mniej hałasu -- */

/*
  Nagłówek stoi w dwóch rzędach: tytuł z przyciskiem po prawej, opis pod
  spodem na całą szerokość. Wcześniej opis wciskał się obok tytułu i łamał
  na dwie linijki w połowie zdania.
*/

/* Kafelek: nazwa i jedna linijka liczb. Bez cienia i bez drugiego koloru. */

/*
  Brakujące treści zaznacza kropka, nie kolor tekstu: pomarańczowe zdanie
  w każdym kafelku czytało się jak ostrzeżenie o awarii.
*/

/* Pusty formularz ocen nie potrzebuje karty dookoła komunikatu. */
.card--pusta {
  border: 0;
  background: transparent;
  box-shadow: none;
  padding: 0;
}

/* ------------------------------------ poprawka pod odrzuconą odpowiedzią -- */

/*
  Pole poprawki otwiera się pod kciukiem w dół i trzyma się lewej krawędzi,
  bo dotyczy odpowiedzi asystenta — a te stoją po lewej. Szerokość jak dymek,
  żeby czytało się jak dopisek do tej konkretnej wiadomości, a nie jak nowy
  element rozmowy.
*/
.poprawka {
  align-self: flex-start;
  width: 78%;
  max-width: 560px;
  margin-top: -6px;
  padding-left: 6px;
}

.poprawka__wpis {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: 6px 6px 6px 16px;
  border-radius: 999px;
  border: 1px solid var(--color-danger);
  background: var(--color-surface);
}

.poprawka__pole {
  flex: 1;
  min-height: 24px;
  max-height: 72px;
  border: 0;
  padding: 0;
  background: transparent;
  color: var(--color-text);
  font-family: inherit;
  font-size: 14px;
  line-height: 1.5;
  resize: none;
}

.poprawka__pole:focus {
  outline: none;
}

.poprawka__akcje {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

/* Zapisana poprawka jest przyciskiem — klik wraca do edycji. */
.poprawka__zapisana {
  display: block;
  width: 100%;
  text-align: left;
  padding: 8px 14px;
  border-radius: var(--radius);
  border: 1px dashed var(--color-danger);
  background: transparent;
  color: var(--color-text-muted);
  font: inherit;
  font-size: 13px;
  line-height: 1.5;
  cursor: text;
}

.poprawka__zapisana:hover {
  color: var(--color-text);
  border-style: solid;
}

/* --------------------------------------- notatnik: pasek jak po lewej -- */

/*
  Pasek wpisywania dostaje błękitną obwódkę i tę samą poświatę co pigułka
  z numerem pod telefonem. Obie kolumny mają wtedy jeden akcent — lewa
  świeci numerem, prawa miejscem, w którym się pisze.
*/
.notatnik__wpis {
  border-color: rgba(39, 99, 197, 0.55);
  box-shadow: 0 0 18px rgba(39, 99, 197, 0.18);
  background: var(--color-surface);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.notatnik__wpis:focus-within {
  border-color: var(--color-primary-bright);
  box-shadow: 0 0 24px rgba(39, 99, 197, 0.32);
}

/* Nagłówek notatnika w tej samej wadze co podpis pod telefonem. */
.notatnik__tytul {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.notatnik__licznik {
  font-variant-numeric: tabular-nums;
}

/* Numer wpisu w błękitnym kółku — ten sam akcent co pasek i pigułka. */
.uwaga::before {
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  padding-top: 0;
  border-radius: 999px;
  border: 1px solid var(--color-border-strong);
  color: var(--color-text-muted);
  font-size: 10.5px;
}

.uwaga:hover::before {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.uwaga__tresc {
  padding-top: 1px;
}

/* ---------------------------------------- notatnik: ramka z sygnaturą -- */

/*
  UCHYLONE (nie przywracaj bez powodu): błękitna ramka 2 px i wordmark
  ARKANIP wpisany w linię ramki w dwóch narożnikach. Sygnatura brała tło
  z tokenu --color-bg, więc na tematycznym gradiencie zostawiała jasne
  łaty, a w prawym górnym rogu zderzała się z kropką przewodnika — która
  jest teraz obecnością ARKANIP w kadrze. Notatnik jest szkłem jak reszta
  kart (reguła .notatnik wyżej).
*/
.notatnik {
  position: relative;
}

/* ============================================ warstwa merytoryczna: układ -- */

/*
  Sekcja ma dwa piętra: u góry telefon z wiadomością obok, na dole pasek
  etapów ścieżki. Telefon dostaje stałą kolumnę, treść resztę — te same
  proporcje co w sekcji asystenta głosowego, żeby obie zakładki miały ten
  sam rytm.
*/
/*
  Widok merytoryki wypełnia okno NA SZTYWNO — bez tego `height: 100%`
  niżej nie ma się od czego liczyć (widok rośnie z treścią), wysoka karta
  rozpycha okno i całość się przewija.
*/
#widok-merytoryka {
  height: 100%;
}

@media (max-width: 1000px) {
  /* Kolumny jedna pod drugą nie zmieszczą się w wysokości okna —
     sekcja wraca wtedy do zwykłego przewijania. */
  #widok-merytoryka {
    height: auto;
  }

  .mer__gora {
    grid-template-rows: none;
  }
}

.mer {
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
  width: 100%;
  height: 100%;
  min-height: 0;
  box-sizing: border-box;
  position: relative;
}

/* Warstwa merytoryczna i sekcja głosowa nie mają podpisu w rogu — nagłówek
   stoi na karcie, a telefon zaczyna się od góry. Podpis wspólny zostaje
   w pozostałych sekcjach. */
body[data-sekcja="merytoryka"] .podpis,
body[data-sekcja="glosowy"] .podpis {
  display: none;
}

.mer__gora {
  display: grid;
  /* Telefon jest bohaterem kadru: kolumna rośnie razem z jego ekranem,
     a nie stoi na sztywnych 480 px jak dawniej. */
  grid-template-columns: minmax(340px, 37%) minmax(0, 1fr);
  /* Rząd przypięty do wysokości sekcji: bez tego wysoka zawartość karty
     (np. podgląd formularza) rozpychała wiersz i całe okno się przewijało. */
  grid-template-rows: minmax(0, 1fr);
  gap: 52px;
  flex: 1;
  min-height: 0;
}

@media (max-width: 1000px) {
  .mer__gora {
    grid-template-columns: minmax(0, 1fr);
  }
}

.mer__tresc {
  display: flex;
  flex-direction: column;
  /* Karta jest zwarta i pływa na środku kolumny — patrz .mer__karta. */
  justify-content: center;
  min-height: 0;
}

.mer__karta {
  display: flex;
  flex-direction: column;
  gap: 20px;
  /*
    Karta jest ZWARTA i pływa na środku kolumny — nie rozciąga się już na
    całą wysokość. Nagłówek (moduł, typ, kiedy) poszedł do podpisu w rogu
    kadru, więc zostało tu tylko to, co klient poprawia: dymek, edycja,
    skutek. Mniej karty, więcej powietrza — jak w platformie sprzedażowej.

    Szkło: półprzezroczysta biel + jasna krawędź + cień, BEZ backdrop-filter
    (reguła projektu — Chrome tnie próbkowanie nad animowaną treścią).

    Uchylone: wysoka karta z błękitną obwódką 2 px i treścią centrowaną
    „safe center” — razem z ramką okna to był drugi element panelu
    administracyjnego, którego platforma nie ma.
  */
  /*
    STAŁA wysokość na każdym etapie: karta bierze wysokość kolumny do
    540 px i nie zmienia jej z treścią (dłuższa treść, np. edycja
    z parametrem, przewija się w środku). Nagłówek, treść i skutek stoją zawsze w tych samych
    miejscach — nic nie skacze między krokami.
  */
  width: 100%;
  max-width: 760px;
  /* Karta na całą wysokość kolumny — te same proporcje, co notatnik
     w sekcji głosowej (decyzja użytkownika 2026-09-05: „wydłuż kartę,
     wzoruj się proporcjami z asystenta głosowego”).
     Uchylone: min(100%, 540px) — zwarta karta pływająca na środku. */
  height: 100%;
  overflow-y: auto;
  padding: 26px 28px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.66);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 64px -24px rgba(16, 35, 66, 0.22),
    0 2px 8px rgba(16, 35, 66, 0.05);
}

/* Karta przewija się bez widocznego paska (decyzja użytkownika). Reguła
   projektu: standardowe scrollbar-* tylko w bloku @supports dla Firefoksa,
   inaczej Chromium ignoruje ::-webkit-scrollbar. */
.mer__karta::-webkit-scrollbar {
  display: none;
  width: 0;
  height: 0;
}

@supports (-moz-appearance: none) {
  .mer__karta {
    scrollbar-width: none;
  }
}

/* Telefon w merytoryce: ten sam rozmiar, co w sekcji głosowej, wyśrodkowany
   w kolumnie — karta obok jest wyższa od niego (jak notatnik przy telefonie). */
.mer__gora .telefon {
  align-items: center;
}

.mer__gora .iphone {
  height: round(clamp(360px, calc(100vh - 290px), 760px), 2px);
}

/* Formularz ocen potrzebuje całej wysokości — podgląd w iframe skaluje
   się do karty, więc karta nie może się zwinąć do treści. */
.mer__karta--formularz {
  height: 100%;
  max-width: none;
}

/* Nagłówki do lewej; dymek z przyciskiem zostaje na środku karty. */
.mer__belka {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
}

/*
  Podpis kadru — lewy górny róg, jak w platformie sprzedażowej: linijka
  sekcji (albo modułu SMS) kapitalikiem, jedno zdanie tytułu, pod nim
  krótki opis. Skromny z założenia — bohaterem kadru jest treść sekcji,
  podpis ma tylko powiedzieć, na co się patrzy.

  Jeden element dla wszystkich sekcji, położony absolutnie w rogu sceny
  i wyjęty spod kursora. Warstwa merytoryczna rezerwuje pod nim miejsce
  wypełnieniem .mer (telefon i tak zaczyna się niżej); pozostałe sekcje
  centrują treść, więc róg mają wolny.

  Uchylone: nagłówek NA karcie merytoryki w stopniu 32 px (karta była
  wysoka i mniejsze stopnie w niej ginęły) oraz podpis lokalny tylko dla
  merytoryki — dwie implementacje tego samego elementu.
*/
.podpis {
  position: absolute;
  top: 26px;
  left: 44px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: 640px;
  /* Miejsce na kropkę przewodnika przy prawej krawędzi kadru. */
  padding-right: 80px;
  pointer-events: none;
}

.podpis__modul {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.podpis__typ {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.podpis__opis {
  font-size: 13px;
  color: var(--color-text-muted);
}

.podpis__opis:empty {
  display: none;
}

.mer__dymek {
  min-width: 0;
  max-width: 640px;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: 16.5px;
  padding: 16px 22px;
}

.mer__edycja {
  width: 100%;
  min-height: 120px;
  padding: 14px 20px;
  border-radius: 26px;
  border: 1px solid var(--color-primary);
  background: var(--color-surface);
  color: var(--color-text);
  font-family: inherit;
  font-size: 15.5px;
  line-height: 1.5;
  resize: vertical;
}

.mer__edycja:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.16);
}

/* Powrót do treści ARKANIP po lewej, decyzje kończące edycję po prawej. */
.mer__akcje {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  /* Na całą szerokość sekcji (rodzic ma align-items: flex-start) — inaczej
     Zapisz i Anuluj stały tuż przy „Wróć do podstawowej formy”, po lewej. */
  width: 100%;
  margin-top: auto;
  padding-top: var(--space-4);
}

.mer__akcje-prawo {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Sekcja karty: mała etykieta kapitalikiem + zawartość pod nią. */
.mer__sekcja {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
}


.mer__etykieta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Dymek z przyciskiem Edytuj tuż obok — edycja przy tym, czego dotyczy. */
.mer__dymek-rzad {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
}

.mer__edytuj {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--color-surface);
}

.mer__edytuj svg {
  width: 15px;
  height: 15px;
}

/* Skutek — co dzieje się po tej wiadomości. */
.mer__skutek {
  width: 100%;
  padding: 14px 18px;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  box-shadow: var(--shadow-sm);
  font-size: 15px;
  line-height: 1.6;
}

.mer__skutek b {
  font-weight: 700;
}

/* Gałąź bez SMS-a — jedno zdanie zamiast dymka i edycji. */
.mer__bez-sms {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--color-text-muted);
}

/* --------------------------------------------- telefon: atrapa iPhone -- */

/*
  Telefon rysowany w całości w CSS, wzorowany na zdjęciu referencyjnym
  iPhone'a 14 Pro: tytanowa ramka, czarna obwódka wokół wyświetlacza,
  Dynamic Island z okiem kamery i przyciski na obu bokach.

  Proporcje wzięte z rzeczywistego urządzenia (71,5 × 147,5 mm); promienie
  naroży podane parą procentów dobraną tak, żeby przy tym stosunku boków
  wychodziły kołowe, a nie eliptyczne.

  Scena 3D ze Spline odłożona: jej ekran był wypaloną teksturą, więc całą
  treść i tak rysowała warstwa HTML — a model wymagał internetu i potrafił
  wstawać z przyciętym kadrem. Atrapa nie waży nic ponad ten arkusz.
*/
.telefon {
  display: flex;
  height: 100%;
  min-height: 0;
}

/* Metalowa ramka. Światło pada z góry: jasny grzbiet, ciemniejsze boki. */
.iphone {
  position: relative;
  /*
    Wysokość jawna, nie procentowa: wiersz siatki nie ma własnej wysokości
    (dziedziczy po treści), więc 100% nie miałoby od czego się liczyć
    i telefon rozpychał okno.

    Telefon jest bohaterem kadru (jak w platformie sprzedażowej), więc
    bierze tyle, ile zostaje z wysokości okna po belce, podpisie i pasku
    postępu — stąd odejmowane 205 px (zmierzone: belka 73, wypełnienie
    sceny 48, dolny rząd ok. 48, odstęp 24; zostaje kilka pikseli luzu). Dawny clamp(400px, 56vh, 600px)
    z gniazda sceny 3D był na pełny kadr za mały.
  */
  height: round(clamp(380px, calc(100vh - 205px), 900px), 2px);
  max-width: 100%;
  aspect-ratio: 71.5 / 147.5;
  margin: auto;
  /*
    Ramka: 4 px ciemnego tytanu ze światłem na grzbiecie i dole, plus
    hairline obrysu. Uchylone: 3 px jasnego tytanu — przy ciemnym ekranie
    wyglądała jak cienka, nierówna kreska, a przyciski boczne „odpadały”.
  */
  padding: 4px;
  border-radius: 15.4% / 7.45%;
  background: linear-gradient(
    168deg,
    #c9ccd2 0%,
    #7c8087 7%,
    #45484f 22%,
    #34373d 50%,
    #45484f 76%,
    #8a8d94 93%,
    #d3d6db 100%
  );
  box-shadow:
    0 0 0 1px rgba(9, 12, 20, 0.55),
    inset 0 0 0 1px rgba(255, 255, 255, 0.12),
    0 34px 56px -24px rgba(16, 35, 66, 0.55);
}

/* Czarna obwódka między metalem a wyświetlaczem. */
.iphone__korpus {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 3.4%;
  border-radius: 14.7% / 7.15%;
  background: #08090b;
}

/* Przyciski wystają spod metalu o 3 px i noszą ten sam tytan co ramka;
   te z lewej to akcja i głośność. */
.iphone__przycisk {
  position: absolute;
  width: 3px;
  background: linear-gradient(90deg, #6d7077 0%, #3c3f46 60%, #2b2e34 100%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25);
}

.iphone__przycisk--akcja {
  left: -3px;
  top: 19%;
  height: 4.2%;
  border-radius: 2px 0 0 2px;
}

.iphone__przycisk--glosniej {
  left: -3px;
  top: 27%;
  height: 8%;
  border-radius: 2px 0 0 2px;
}

.iphone__przycisk--ciszej {
  left: -3px;
  top: 37%;
  height: 8%;
  border-radius: 2px 0 0 2px;
}

.iphone__przycisk--zasilanie {
  right: -3px;
  top: 30.5%;
  height: 12.5%;
  border-radius: 0 2px 2px 0;
  background: linear-gradient(270deg, #6d7077 0%, #3c3f46 60%, #2b2e34 100%);
}

/* Dynamic Island z okiem kamery przy prawym końcu pigułki. */
.iphone__wyspa {
  position: absolute;
  top: 1.6%;
  left: 50%;
  transform: translateX(-50%);
  width: 33%;
  aspect-ratio: 126 / 37;
  border-radius: 999px;
  background: #060608;
  z-index: 3;
}

.iphone__kamera {
  position: absolute;
  top: 50%;
  right: 8%;
  transform: translateY(-50%);
  width: 19%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #453a5e 0%, #221c33 42%, #060509 78%);
}

/* ------------------------------------------------------ ekran rozmowy -- */

.ekran {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 12.4% / 6%;
  background: #ffffff;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  color: #101423;
  pointer-events: none;
}

/*
  Pasek statusu leży w TYM SAMYM pionowym pasie co wyspa: ten sam górny
  odstęp i ta sama wysokość (4,46% to wysokość wyspy przeliczona na procent
  wysokości ekranu — proporcje są stałe, więc wartość też). Godzina siedzi
  wyśrodkowana w lewym „uchu” obok wyspy, wskaźniki w prawym — dokładnie
  jak na zdjęciu referencyjnym iOS.
*/
.ekran__status {
  position: absolute;
  top: 1.6%;
  left: 0;
  right: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 4.46%;
}

.ekran__godzina {
  width: 33.5%;
  text-align: center;
  font-size: 12.5px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ekran__wskazniki {
  width: 33.5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}

/*
  Wskaźniki systemowe to inline SVG (patrz index.html) — wersja rysowana
  clip-pathem i gradientami pikselowała przy tej skali. Tu zostaje tylko
  wyrównanie.
*/
.ekran__wskazniki svg {
  display: block;
}

/* Nagłówek rozmowy jak w iOS: awatar, pod nim nazwa nadawcy. */
.ekran__naglowek {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 15.5% 8% 4%;
  background: linear-gradient(#fbfbfd, #f5f6f8);
  border-bottom: 1px solid rgba(16, 20, 35, 0.08);
}

.ekran__awatar {
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(180deg, #a8afbb, #8a93a3);
  color: #ffffff;
  font-size: 15px;
  font-weight: 600;
}

.ekran__nadawca {
  max-width: 90%;
  font-size: 11.5px;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ekran__watek {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 6% 6.5%;
}

.ekran__znacznik {
  align-self: center;
  font-size: 9.5px;
  color: rgba(16, 20, 35, 0.45);
}

/* Dymek przychodzący — szary, przy lewej, jak w iOS. */
.ekran__dymek {
  align-self: flex-start;
  max-width: 88%;
  padding: 8px 11px;
  border-radius: 16px 16px 16px 5px;
  background: #e9e9eb;
  color: #0b0d12;
  font-size: 12px;
  line-height: 1.4;
  white-space: pre-wrap;
  word-break: break-word;
}

.ekran__dymek[data-pusty="tak"] {
  background: transparent;
  border: 1px dashed rgba(16, 20, 35, 0.35);
  color: rgba(16, 20, 35, 0.5);
  font-style: italic;
}
/* Wątek na telefonie: pytanie, ruch pacjenta, skutek. */
.ekran__rozmowa {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Odpowiedź pacjenta — niebieska, przy prawej, jak wysłana z tego telefonu. */
.ekran__dymek--user {
  align-self: flex-end;
  background: #2763c5;
  color: #ffffff;
  border-radius: 16px 16px 5px 16px;
}

/* Wiadomość klikniętego etapu — pierścień mówi, na co patrzymy. */
.ekran__dymek--aktywny {
  box-shadow: 0 0 0 2px rgba(39, 99, 197, 0.35);
}

/* Znacznik braku odpowiedzi z żywą godziną odcięcia. */
.ekran__brak {
  align-self: center;
  padding: 2px 8px;
  border: 1px dashed rgba(16, 20, 35, 0.3);
  border-radius: 999px;
  font-size: 9px;
  color: rgba(16, 20, 35, 0.5);
}

/*
  Znacznik zadania — gałąź bez SMS-a. Pacjent nic nie dostaje, więc na
  ekranie nie staje dymek, tylko dzwonek z podpisem: skutek idzie do
  recepcji, nie do pacjenta.
*/
.ekran__zadanie {
  align-self: center;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border: 1px dashed rgba(39, 99, 197, 0.55);
  border-radius: 999px;
  background: rgba(39, 99, 197, 0.07);
  font-size: 9px;
  font-weight: 600;
  color: #2763c5;
}

.ekran__zadanie svg {
  flex-shrink: 0;
  width: 10px;
  height: 10px;
}

.ekran__zadanie i {
  font-style: normal;
}

/* Kliknięty etap — ten sam pierścień co na aktywnym dymku. */
.ekran__zadanie--aktywny {
  box-shadow: 0 0 0 2px rgba(39, 99, 197, 0.35);
}

/* Odnośnik w dymku — klikalny mimo dekoracyjnego ekranu. */
.ekran__link {
  color: #2763c5;
  text-decoration: underline;
  pointer-events: auto;
  cursor: pointer;
}

.ekran__dymek--user .ekran__link {
  color: #ffffff;
}

/* --------------------------------------- atrapa wizytówki Google (4–5) -- */

/*
  Wizytówka firmy jak w Google Maps NA iOS: szara mapa pod spodem, biały
  arkusz (bottom sheet) od 45% wysokości, okrągły powrót nałożony na mapę.

  Zaprojektowana w LOGICZNYCH pikselach iPhone'a (393 pt szerokości) —
  rozmiary z HIG-a stoją tu dosłownie (44 px cel dotykowy, 59 px pasek
  statusu, hairline 0.5 px) — a do rozmiaru ekranu atrapy skaluje ją
  app.js transformacją. Dzięki temu proporcje są zawsze te same.

  z-index 2, nie wyżej: Dynamic Island (z-index 3) to sprzęt telefonu,
  więc musi zostać NAD wizytówką — dokładnie jak na prawdziwym iPhonie.
*/
.gmock {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #e8eaed;
}

.gmock__ios {
  position: absolute;
  top: 0;
  left: 0;
  width: 393px;
  /* Skalę i wysokość ustawia app.js z rozmiaru ekranu atrapy. */
  transform-origin: 0 0;
  background: #e8eaed;
  font-family: -apple-system, "SF Pro Text", "SF Pro Display",
    BlinkMacSystemFont, sans-serif;
  color: #202124;
  text-align: left;
}

/* --- atrapa mapy pod arkuszem --- */
.gmock__mapa {
  position: absolute;
  inset: 0;
}

.gmock__mapa > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/*
  Pinezka stoi w widocznym pasie mapy (między paskiem statusu a arkuszem
  od 45%); translate(-50%, -100%) stawia jej OSTRZE w punkcie kotwiczenia —
  jak w prawdziwych Mapach, pin wskazuje miejsce czubkiem.
*/
.gmock__pin {
  position: absolute;
  top: 26%;
  left: 50%;
  transform: translate(-50%, -100%);
  filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.3));
}

.gmock__pin svg {
  display: block;
  width: 36px;
  height: 36px;
}

/* Podpis z adresem — biała pigułka pod ostrzem pinezki. Wypełnia app.js;
   bez adresu w konfiguracji zostaje sama pinezka. */
.gmock__adres {
  position: absolute;
  top: calc(26% + 8px);
  left: 50%;
  transform: translateX(-50%);
  max-width: 260px;
  padding: 6px 12px;
  border-radius: 10px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  font-size: 13px;
  line-height: 1.35;
  color: #202124;
  text-align: center;
}

/* --- pasek statusu: godzina po lewej, wskaźniki po prawej --- */
.gmock__status {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 59px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Więcej niż 16 px, bo rogi ekranu atrapy są mocno zaokrąglone. */
  padding: 0 28px;
}

.gmock__godzina {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
  font-variant-numeric: tabular-nums;
}

.gmock__wskazniki {
  display: inline-flex;
  align-items: center;
  gap: 7px;
}

.gmock__wskazniki svg {
  display: block;
}

/* --- okrągły powrót na mapie --- */
.gmock__wstecz {
  position: absolute;
  left: 16px;
  top: 71px; /* 59 px paska statusu + 12 px */
  width: 40px;
  height: 40px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  color: #202124;
  font-family: inherit;
  font-size: 20px;
  line-height: 1;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}

/* iOS nie zna ripple'a — wciśnięcie to spadek krycia. */
.gmock__wstecz:active {
  opacity: 0.4;
}

/* --- bottom sheet --- */
.gmock__arkusz {
  position: absolute;
  top: 45%;
  left: 0;
  right: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  /* 8 px do uchwytu + 5 px uchwytu + 16 px zapowiedzianej przerwy. */
  padding: 29px 16px 47px;
  border-radius: 12px 12px 0 0;
  background: #ffffff;
  box-shadow: 0 -1px 8px rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

/* Uchwyt — jedyny centrowany element arkusza. */
.gmock__uchwyt {
  position: absolute;
  top: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 36px;
  height: 5px;
  border-radius: 2.5px;
  background: #c7c7cc;
}

.gmock__nazwa {
  margin: 0;
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.4px;
  line-height: 1.25;
}

/* Ocena w jednej linii po baseline: liczba, gwiazdki, licznik opinii. */
.gmock__ocena {
  display: flex;
  align-items: baseline;
  gap: 4px;
  margin-top: 4px;
  font-size: 15px;
  letter-spacing: -0.2px;
}

.gmock__ocena b {
  font-weight: 400;
  color: #202124;
}

.gmock__ocena i {
  font-style: normal;
  color: #1a73e8;
}

.gmock__gwiazdki {
  color: #fbbc04;
  font-size: 14px;
  letter-spacing: 1px;
}

.gmock__branza {
  margin: 2px 0 0;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: #5f6368;
}

.gmock__godziny {
  margin: 2px 0 0;
  font-size: 15px;
  letter-spacing: -0.2px;
  color: #5f6368;
}

.gmock__godziny b {
  font-weight: 400;
  color: #188038;
}

/* --- rząd akcji: cztery kółka z podpisami --- */
.gmock__akcje {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
}

.gmock__akcja {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: #1a73e8;
}

.gmock__akcja-kolo {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 999px;
  border: 0.5px solid #e0e0e0;
}

.gmock__akcja-kolo svg {
  width: 20px;
  height: 20px;
}

/* Separator hairline — 0.5 px jak w iOS, nie 1 px jak w Androidzie. */
.gmock__sep {
  margin: 16px 0;
  border-top: 0.5px solid #e0e0e0;
}

/* --- świeżo opublikowana opinia --- */
.gmock__opinia-tytul {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.2px;
}

.gmock__opinia-rzad {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 12px;
}

.gmock__awatar {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: #1a73e8;
  color: #ffffff;
  font-size: 16px;
  font-weight: 600;
}

.gmock__opinia-srodek {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.gmock__gwiazdki--moje {
  font-size: 16px;
}

.gmock__kiedy {
  font-size: 13px;
  color: #5f6368;
}

.gmock__edytuj {
  font-size: 15px;
  letter-spacing: -0.2px;
  color: #1a73e8;
  white-space: nowrap;
}

/* --- powrót do rozmowy --- */
.gmock__wroc {
  align-self: flex-start;
  height: 44px;
  padding: 0 20px;
  border: 0.5px solid #e0e0e0;
  border-radius: 22px;
  background: #ffffff;
  color: #1a73e8;
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: -0.2px;
  pointer-events: auto;
  cursor: pointer;
}

.gmock__wroc:active {
  opacity: 0.4;
}

/* ------------------------------------ formularz ocen NA telefonie -- */

/*
  Nakładka jak wizytówka Google: przykrywa ekran, zostaje pod Dynamic
  Island (z-index 3). Iframe stoi w logicznej szerokości iPhone'a, więc
  formularz renderuje się w wersji mobilnej; skalę ustawia app.js.
*/
.fmock {
  position: absolute;
  inset: 0;
  z-index: 2;
  overflow: hidden;
  background: #ffffff;
}

.fmock__ramka {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  background: #ffffff;
  transform-origin: 0 0;
}

/* Okrągły powrót — ta sama forma co na mapie wizytówki. */
.fmock__wroc {
  position: absolute;
  left: 10px;
  bottom: 10px;
  width: 30px;
  height: 30px;
  padding: 0 0 2px;
  border: 0;
  border-radius: 999px;
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3);
  color: #202124;
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  display: grid;
  place-items: center;
  pointer-events: auto;
  cursor: pointer;
}

.fmock__wroc:active {
  opacity: 0.4;
}

/* Home indicator — drugi z dwóch centrowanych elementów. */
.gmock__home {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  width: 140px;
  height: 5px;
  border-radius: 2.5px;
  background: #000000;
}

/* ------------------------------------ karta: zadanie, parametr, usługi -- */

/* Powiadomienie do recepcji — wewnętrzny skutek gałęzi, nie SMS do pacjenta. */
.mer__zadanie {
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  padding: 12px 18px;
  border: 1px dashed rgba(39, 99, 197, 0.45);
  border-radius: var(--radius);
  background: rgba(39, 99, 197, 0.06);
  font-size: 15.5px;
}

.mer__zadanie svg {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  color: #2763c5;
}

/* Harmonogram reaktywacji: usługa z własną liczbą miesięcy. */
.uslugi {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uslugi__tytul {
  font-size: 12px;
  font-weight: 700;
  color: var(--color-text-muted);
}

.uslugi__lista {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 180px;
  overflow-y: auto;
}

.usluga {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  cursor: pointer;
  transition: border-color 0.15s var(--ease);
}

.usluga[data-wybrana="tak"] {
  border-color: #2763c5;
}

.usluga[data-zmieniona="tak"] {
  border-color: var(--color-primary);
}

.usluga__nazwa {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px;
}

.usluga__rzad {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.usluga__pole {
  width: 54px;
  padding: 6px 8px;
  border: 1px solid var(--color-border-strong);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.usluga__pole:focus {
  outline: none;
  border-color: var(--color-primary);
}

.usluga__jedn {
  font-size: 12px;
  color: var(--color-text-muted);
}

/* ------------------------------------------------- pasek etapów ścieżki -- */

/*
  Etapy to cała ścieżka pacjenta w jednej linii, pogrupowana modułami.
  Pasek przewija się w poziomie, a wybrany kafelek zjeżdża na środek kadru,
  więc zawsze widać, co było przed nim i co przyjdzie po nim.
*/
/*
  Pasek to JEDNA szklana listwa na całą szerokość kadru — jak pasek postępu
  u dołu kadrów platformy sprzedażowej. Moduły siedzą w niej obok siebie,
  rozdzielone włosem, a nie każdy we własnym pudełku.

  Uchylone: osobne obwódki wokół grup (najpierw szare, potem szklane) —
  rząd pudełek czytał się jak formularz, nie jak ścieżka.
*/
.stage {
  display: flex;
  align-items: flex-end;
  gap: 0;
  flex-shrink: 0;
  padding: 10px 12px 8px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.62);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 18px 40px -22px rgba(16, 35, 66, 0.22),
    0 1px 4px rgba(16, 35, 66, 0.04);
  overflow-x: auto;
  scroll-behavior: smooth;
}

/*
  Grupa etapów = jeden moduł ścieżki: nazwa u góry, kafelki pod nią.
  Grupy rozdziela włos po lewej; aktywna dostaje ledwie widoczny błękitny
  podkład i niebieską nazwę — przejście do kolejnego modułu widać od razu.
*/
.stage__grupa {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex-shrink: 0;
  padding: 6px 14px 8px;
  border-left: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 14px;
  transition: background-color 0.2s var(--ease);
}

.stage__grupa:first-child {
  border-left: 0;
}

.stage__grupa[data-aktywna="tak"] {
  background: rgba(39, 99, 197, 0.06);
}

.stage__modul {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  padding-left: 2px;
  transition: color 0.2s var(--ease);
}

.stage__grupa[data-aktywna="tak"] .stage__modul {
  color: #2763c5;
}

.stage__rzad {
  display: flex;
  gap: 6px;
}

.kafel {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
  max-width: 190px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22, 35, 59, 0.12);
  background: rgba(255, 255, 255, 0.8);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
    border-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.kafel__nazwa {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Chip odpowiedzi (TAK / NIE / ZMIANA / BRAK / ?) — tylko na pasku etapów. */
.kafel__chip {
  flex-shrink: 0;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.06em;
  opacity: 0.8;
}

.kafel:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.kafel:focus-visible {
  outline: 2px solid var(--color-primary-bright);
  outline-offset: 2px;
}

/* Aktywny etap: pełny błękit marki, ten sam co pigułka i przycisk wysyłki. */
.kafel[data-stan="aktywny"] {
  background: #2763c5;
  border-color: #2763c5;
  color: #ffffff;
  cursor: default;
}

.kafel[data-pusty="tak"] {
  border-style: dashed;
}

.kafel[data-zmieniony="tak"]:not([data-stan="aktywny"]) {
  border-color: var(--color-primary);
}

/* ============================== dashboard: wybór wizualizacji (karta) -- */

/*
  Karta jak w aplikacji randkowej, tylko o dane: strzałki po bokach
  (czerwona odrzuca, zielona wybiera), kartę można też przeciągnąć.
  Podglądy rysowane na miejscu — paleta kategorii przepuszczona przez
  walidator CVD (#2763c5 / #0ea5b7 / #7c5cd6).
*/
/* Sekcja na sztywno w wysokości okna — karta ma być WYSOKA, nie znaczkiem
   na środku; resztę wysokości zjada okno podglądu (flex: 1).

   overflow: visible, nie hidden: widok kończy się 24 px PRZED błękitną
   ramką (wypełnienie okna) i przycinał przeciąganą kartę z widoczną
   przerwą do linii. Kartę tnie dopiero samo okno — regułą niżej. */
#widok-dashboard {
  height: 100%;
  overflow: visible;
}

/* Klips dokładnie NA błękitnej ramce, wyłącznie gdy widać dashboard —
   przeciągana karta dojeżdża do samej linii i tam znika, bez przerwy
   i bez pasków przewijania. */
.scena:has(> #widok-dashboard:not([hidden])) {
  overflow: hidden;
}

.wybor {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
  width: 100%;
  height: 100%;
}

/*
  Mały dymek pytania przy ZIELONEJ strzałce: wyrasta z niej dziubkiem,
  sześć zwięzłych pozycji, oglądana forma podświetlona jako punkt wyjścia.
  Zamyka go wybór, klik obok albo Escape.
*/
.wybor__typodymek {
  position: absolute;
  /* Pozycję poziomą (na prawo od strzałki) ustawia app.js. */
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 236px;
  padding: 12px;
  background: var(--color-surface);
  border: 1px solid rgba(39, 99, 197, 0.35);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  transition: opacity 0.16s var(--ease), transform 0.16s var(--ease);
}

.wybor__typodymek[data-stan="wchodzi"] {
  opacity: 0;
  transform: translateY(-50%) translateX(-8px) scale(0.95);
}

/* Dziubek wycelowany w strzałkę — domyślnie dymek stoi po jej prawej
   stronie; na ciasnym oknie przeskakuje na lewą (data-strona="lewa"). */
.wybor__typodymek::after {
  content: "";
  position: absolute;
  top: 50%;
  left: -6px;
  width: 10px;
  height: 10px;
  transform: translateY(-50%) rotate(45deg);
  background: var(--color-surface);
  border-left: 1px solid rgba(39, 99, 197, 0.35);
  border-bottom: 1px solid rgba(39, 99, 197, 0.35);
}

.wybor__typodymek[data-strona="lewa"]::after {
  left: auto;
  right: -6px;
  border-left: 0;
  border-bottom: 0;
  border-top: 1px solid rgba(39, 99, 197, 0.35);
  border-right: 1px solid rgba(39, 99, 197, 0.35);
}

.wybor__typodymek-tytul {
  display: block;
  padding: 2px 6px 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--color-text);
}

.wybor__typodymek-lista {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.wybor__typorzad {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s var(--ease);
}

.wybor__typorzad svg {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  color: var(--color-primary);
}

.wybor__typorzad:hover {
  background: rgba(39, 99, 197, 0.08);
}

/* Zaznaczona forma — podąża za podglądem na środku. */
.wybor__typorzad[data-wybrana="tak"] {
  background: rgba(39, 99, 197, 0.1);
  box-shadow: inset 0 0 0 1px rgba(39, 99, 197, 0.35);
}

/* Ptaszek — widoczny tylko przy zaznaczonej pozycji. */
.wybor__typorzad i {
  visibility: hidden;
  margin-left: auto;
  font-style: normal;
  font-size: 12px;
  font-weight: 800;
  color: var(--color-primary);
}

.wybor__typorzad[data-wybrana="tak"] i {
  visibility: visible;
}

/* Pieczęć decyzji — niebieskie CTA „Zatwierdź [nazwa]”. Pokazuje się
   dopiero po kliknięciu pozycji na liście; wcześniej klik w listę tylko
   przełącza podgląd na środku. */
.wybor__typodymek-stopka {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--color-border);
}

.wybor__zatwierdz {
  width: 100%;
  justify-content: center;
}

/* Cofnij + licznik postępu po lewej stronie stopki karty. */
.wybor__stopka-lewo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

/*
  Panel cofania — ten sam dymek co przy pytaniu o typ, ale zakotwiczony
  NAD przyciskiem Cofnij (pozycję ustawia app.js), z dziubkiem w dół.
  Zielona kropka = widżet wybrany (z nazwą formy), czerwona = odrzucony.
*/
.wybor__cofdymek {
  /* Szerzej niż dymek typów — pełne nazwy widżetów muszą się zmieścić. */
  width: 316px;
}

.wybor__cofdymek::after {
  top: auto;
  left: 22px;
  bottom: -6px;
  transform: rotate(45deg);
  border-left: 0;
  border-top: 0;
  border-right: 1px solid rgba(39, 99, 197, 0.35);
  border-bottom: 1px solid rgba(39, 99, 197, 0.35);
}

.wybor__cofrzad {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 8px;
  border: 0;
  border-radius: 9px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  text-align: left;
  cursor: pointer;
  transition: background-color 0.12s var(--ease);
}

.wybor__cofrzad:hover {
  background: rgba(39, 99, 197, 0.08);
}

/* Pełna nazwa — łamie się w drugą linię zamiast się ucinać. */
.wybor__cofrzad-nazwa {
  flex: 1;
  min-width: 0;
  line-height: 1.3;
}

/* Ikona wybranej formy niesie decyzję kolorem:
   zielona = widżet wzięty, czerwona = odrzucony. */
.wybor__cofrzad-typ {
  flex-shrink: 0;
  display: grid;
  place-items: center;
}

.wybor__cofrzad-typ svg {
  width: 18px;
  height: 18px;
}

.wybor__cofrzad[data-decyzja="tak"] .wybor__cofrzad-typ {
  color: var(--color-success);
}

.wybor__cofrzad[data-decyzja="nie"] .wybor__cofrzad-typ {
  color: var(--color-danger);
}

.wybor__scena {
  position: relative;
  display: flex;
  width: min(680px, 100%);
  height: 100%;
  min-height: 0;
}

.wybor__karta {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  width: 100%;
  min-height: 0;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 2px solid rgba(79, 140, 240, 0.34);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  cursor: grab;
  /* Przeciąganie obsługuje JS — przeglądarka nie może przejąć gestu. */
  touch-action: none;
  user-select: none;
  transition: transform 0.24s var(--ease), opacity 0.24s var(--ease),
    border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}

.wybor__karta[data-stan="wchodzi"] {
  opacity: 0;
  transform: translateY(12px) scale(0.97);
}

/* W trakcie ciągnięcia transformem steruje ręka, nie przejście. */
.wybor__karta[data-stan="ciagnieta"] {
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
  cursor: grabbing;
}

/* Podpowiedź kierunku: obwódka karty zapala się po stronie decyzji. */
.wybor__karta[data-kierunek="tak"] {
  border-color: rgba(46, 158, 91, 0.65);
  box-shadow: 0 12px 40px rgba(46, 158, 91, 0.18);
}

.wybor__karta[data-kierunek="nie"] {
  border-color: rgba(192, 67, 47, 0.6);
  box-shadow: 0 12px 40px rgba(192, 67, 47, 0.16);
}

.wybor__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.wybor__tytul {
  margin-top: 2px;
  font-size: 22px;
  font-weight: 750;
}

.wybor__opis {
  margin-top: 2px;
  font-size: 13.5px;
  color: var(--color-text-muted);
}

/* Rząd sześciu typów — jak pasek wyboru widgetu w GoHighLevel,
   wyśrodkowany w karcie. */
.wybor__typy {
  display: flex;
  justify-content: center;
  gap: 8px;
}

.wybor__typ {
  display: grid;
  place-items: center;
  width: 46px;
  height: 40px;
  padding: 0;
  border-radius: 9px;
  border: 1px solid var(--color-border-strong);
  background: var(--color-surface);
  color: var(--color-text-muted);
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.wybor__typ:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.wybor__typ[data-stan="aktywny"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.14);
}

.wybor__typ[data-stan="tak"] {
  color: var(--color-success);
  border-color: rgba(46, 158, 91, 0.55);
}

.wybor__typ[data-stan="nie"] {
  color: rgba(192, 67, 47, 0.55);
  border-color: rgba(192, 67, 47, 0.35);
}

/* Podgląd widgetu — biała scena, na której stoi wykres. Bierze całą
   wysokość, której nie zajął nagłówek; przy skoku ikoną wygasza się
   i wraca TYLKO to okno, nie cała karta. */
.wybor__podglad {
  flex: 1;
  min-height: 236px;
  display: grid;
  place-items: center;
  padding: var(--space-4) var(--space-5);
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  background: var(--color-surface);
  transition: opacity 0.17s var(--ease), transform 0.17s var(--ease);
}

.wybor__podglad[data-zmiana="tak"] {
  opacity: 0;
  transform: translateY(8px) scale(0.99);
}

.wybor__stopka {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}

/* Pasek postępu w stopce karty: cała szerokość, segment na widżet. */
.wybor__pasek {
  width: 100%;
}

.postep__segment--statyczny {
  cursor: default;
}

.wybor__strzalka {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: 999px;
  background: var(--color-surface);
  cursor: pointer;
  transition: background-color 0.15s var(--ease), transform 0.15s var(--ease),
    box-shadow 0.15s var(--ease);
}

.wybor__strzalka--nie {
  border: 2px solid rgba(192, 67, 47, 0.55);
  color: var(--color-danger);
}

.wybor__strzalka--tak {
  border: 2px solid rgba(46, 158, 91, 0.55);
  color: var(--color-success);
}

.wybor__strzalka--nie:hover,
.wybor__strzalka--nie[data-podswietlona="tak"] {
  background: rgba(192, 67, 47, 0.1);
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(192, 67, 47, 0.2);
}

.wybor__strzalka--tak:hover,
.wybor__strzalka--tak[data-podswietlona="tak"] {
  background: rgba(46, 158, 91, 0.1);
  transform: scale(1.07);
  box-shadow: 0 6px 20px rgba(46, 158, 91, 0.2);
}

.wybor__strzalka:active {
  transform: scale(0.96);
}

/* --- podglądy widgetów --- */

.pv {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.pv__label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* Licznik — jedna liczba na całą kartę. */
.pv--stat {
  align-items: center;
  text-align: center;
  gap: 6px;
}

.pv__hero {
  font-size: 58px;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.05;
  color: var(--color-text);
  font-variant-numeric: tabular-nums;
}

.pv__delta {
  font-size: 13px;
  font-weight: 650;
  color: var(--color-success);
}

/* Donut z legendą obok. */
.pv--donut {
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

.pv__donut-kolo {
  position: relative;
  width: 150px;
  flex-shrink: 0;
}

.pv__donut-kolo svg {
  display: block;
  width: 100%;
  height: auto;
}

.pv__donut-srodek {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  font-size: 10.5px;
  color: var(--color-text-muted);
  pointer-events: none;
}

.pv__donut-srodek b {
  font-size: 24px;
  font-weight: 800;
  color: var(--color-text);
  line-height: 1.1;
}

.pv__legenda {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.pv__poz {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
}

.pv__poz i {
  width: 10px;
  height: 10px;
  border-radius: 999px;
  flex-shrink: 0;
}

.pv__poz b {
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Wykresy SVG — tekst nosi kolory tekstu, nie serii. */
.pv--wykres svg {
  display: block;
  width: 100%;
  height: auto;
}

.pv__wartosc {
  font-family: var(--font-sans);
  font-size: 12px;
  font-weight: 700;
  fill: var(--color-text);
}

.pv__os {
  font-family: var(--font-sans);
  font-size: 10.5px;
  fill: var(--color-text-muted);
}

/* Poziome słupki — ranking usług. */
.pv--poziome {
  gap: 14px;
}

.pv__rzad {
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) 34px;
  align-items: center;
  gap: 12px;
}

.pv__nazwa {
  font-size: 13px;
  color: var(--color-text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.pv__tor {
  height: 12px;
  border-radius: 999px;
  background: var(--color-surface-alt);
  overflow: hidden;
}

.pv__tor i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2763c5;
}

.pv__liczba {
  font-size: 12.5px;
  font-weight: 700;
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* Tabela — nagłówek cicho, wiersze włosem. */
.pv--tabela table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.pv--tabela th {
  padding: 0 0 7px;
  text-align: left;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  border-bottom: 1px solid var(--color-border);
}

.pv--tabela td {
  padding: 9px 0;
  border-bottom: 1px solid var(--color-border);
}

.pv--tabela tbody tr:last-child td {
  border-bottom: 0;
}

/* --- podsumowanie wyboru --- */

.wybor__wyniki {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 8px;
  /* Na wysokiej karcie lista siada na środku wolnej przestrzeni. */
  flex: 1;
}

.wybor__wynik {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: var(--radius);
  background: var(--color-surface);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), background-color 0.15s var(--ease);
}

.wybor__wynik[data-decyzja="tak"] {
  border: 1px solid rgba(46, 158, 91, 0.5);
}

.wybor__wynik[data-decyzja="nie"] {
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}

.wybor__wynik-ikona {
  display: grid;
  place-items: center;
  color: inherit;
}

.wybor__wynik-nazwa {
  flex: 1;
  font-size: 14px;
  font-weight: 650;
}

.wybor__wynik-znak {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.wybor__wynik[data-decyzja="tak"] .wybor__wynik-znak {
  color: var(--color-success);
}

.wybor__wynik[data-decyzja="nie"] .wybor__wynik-znak {
  color: var(--color-danger);
}

/* Ciasny ekran: strzałki mniejsze, karta wraca do naturalnej wysokości
   i zwykłego przewijania (klips na oknie by je zablokował). */
@media (max-width: 720px) {
  #widok-dashboard,
  .wybor,
  .wybor__scena {
    height: auto;
  }

  #widok-dashboard {
    overflow-y: auto;
  }

  .scena:has(> #widok-dashboard:not([hidden])) {
    overflow: visible;
  }

  .wybor {
    gap: var(--space-3);
  }

  .wybor__strzalka {
    width: 44px;
    height: 44px;
  }
}

/* --- dopiski: widżety, pytanie o typ, drobna typografia --- */

/* Oryginalna nazwa z GoHighLevel — cichy podpis pod polskim tytułem. */
.wybor__en {
  margin-top: 1px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-text-muted);
  opacity: 0.8;
}

/* Licznik: druga linia bez trendu — informacja, nie sygnał. */
.pv__info {
  font-size: 13px;
  color: var(--color-text-muted);
}

/* Strzałki nieaktywne, gdy na karcie stoi pytanie o typ. */
.wybor__strzalka[disabled] {
  opacity: 0.35;
  pointer-events: none;
}

/* Odrzucenie widżetu z poziomu edycji — cicho, po lewej. */
.wybor__odrzuc {
  color: var(--color-danger);
}

/* Dziewięć wierszy podsumowania — ciaśniej niż przy sześciu. */
.wybor__wyniki {
  gap: 6px;
}

.wybor__wynik {
  padding: 7px 14px;
}

.wybor__wynik-nazwa {
  font-size: 13.5px;
}

/* ================================================================== tło -- */

/*
  Tło nastrojowe — pełny kadr bez ramki potrzebuje głębi, którą wcześniej
  dawała obwódka okna. Warstwa siedzi POD sceną (z-index 0, scena ma 1)
  i nie łapie kliknięć.

  Tło jest TEMATYCZNE: każda sekcja ma własny zestaw (.tlo__zestaw) —
  ikony pasujące do tematu i własną poświatę. Zestawy buduje app.js
  (zbudujTlo) z jednej siatki pozycji 5×4 z lekkim rozrzutem, więc kadr
  jest wszędzie zapełniony tak samo równo; pokazSekcje zapala zestaw
  bieżącej sekcji atrybutem data-aktywny. Uchylone: jedno wspólne tło
  z SMS-ami pod wszystkimi sekcjami — nie mówiło, na co się patrzy.

  Ikony: bliższe większe i rozmyte, dalsze mniejsze i ostre; dolny pas
  zostaje wolny dla paska etapów. Rozmycie siedzi na SAMYCH ikonach
  (filter: blur), nie na tle — backdrop-filter nad ruchomą treścią jest
  w projekcie zakazany. Ikony się nie animują: statyczna warstwa z rozmyciem
  nic nie kosztuje, animowana kosztowałaby repaint całego ekranu.
*/
.tlo {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}

.tlo__zestaw {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s var(--ease);
}

.tlo__zestaw[data-aktywny="tak"] {
  opacity: 1;
}

/*
  Poświaty — nastrój sekcji w trzech plamach światła i tle pod nimi.
  Domyślna (merytoryka): chłodny błękit marki z turkusem w rogu.
*/
.tlo__poswiata {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(56% 62% at 50% 44%, rgba(120, 170, 255, 0.34) 0%, rgba(120, 170, 255, 0) 72%),
    radial-gradient(38% 42% at 14% 18%, rgba(39, 99, 197, 0.12) 0%, rgba(39, 99, 197, 0) 70%),
    radial-gradient(40% 44% at 86% 82%, rgba(14, 165, 183, 0.12) 0%, rgba(14, 165, 183, 0) 70%),
    linear-gradient(180deg, #f8fafd 0%, #eef3fa 100%);
}

/* Dashboard: fiolet analityki z błękitem. */
.tlo__zestaw[data-sekcja="dashboard"] .tlo__poswiata {
  background:
    radial-gradient(56% 62% at 50% 46%, rgba(139, 120, 225, 0.26) 0%, rgba(139, 120, 225, 0) 72%),
    radial-gradient(38% 42% at 12% 20%, rgba(39, 99, 197, 0.14) 0%, rgba(39, 99, 197, 0) 70%),
    radial-gradient(40% 44% at 88% 80%, rgba(120, 170, 255, 0.16) 0%, rgba(120, 170, 255, 0) 70%),
    linear-gradient(180deg, #f9f9fe 0%, #f0f1fb 100%);
}

/* Asystent tekstowy: wiele kanałów — błękit w środku, zieleń i róż w rogach. */
.tlo__zestaw[data-sekcja="tekstowy"] .tlo__poswiata {
  background:
    radial-gradient(54% 60% at 50% 44%, rgba(120, 170, 255, 0.3) 0%, rgba(120, 170, 255, 0) 72%),
    radial-gradient(36% 40% at 10% 24%, rgba(52, 199, 89, 0.14) 0%, rgba(52, 199, 89, 0) 70%),
    radial-gradient(38% 42% at 90% 78%, rgba(225, 48, 108, 0.1) 0%, rgba(225, 48, 108, 0) 70%),
    linear-gradient(180deg, #f8fafd 0%, #eef3fa 100%);
}

/* Baza wiedzy: spokojne indygo z ciepłym rogiem. */
.tlo__zestaw[data-sekcja="wiedza"] .tlo__poswiata {
  background:
    radial-gradient(56% 62% at 50% 44%, rgba(120, 140, 240, 0.24) 0%, rgba(120, 140, 240, 0) 72%),
    radial-gradient(38% 42% at 14% 20%, rgba(14, 165, 183, 0.12) 0%, rgba(14, 165, 183, 0) 70%),
    radial-gradient(40% 44% at 86% 82%, rgba(240, 180, 41, 0.12) 0%, rgba(240, 180, 41, 0) 70%),
    linear-gradient(180deg, #f8f9fd 0%, #eff2fa 100%);
}

/* Asystent opinii: ciepła biel i złoto gwiazd — jak kadr „prośba o ocenę”. */
.tlo__zestaw[data-sekcja="opinie"] .tlo__poswiata {
  background:
    radial-gradient(56% 62% at 50% 44%, rgba(255, 214, 120, 0.3) 0%, rgba(255, 214, 120, 0) 72%),
    radial-gradient(38% 42% at 14% 20%, rgba(255, 170, 90, 0.14) 0%, rgba(255, 170, 90, 0) 70%),
    radial-gradient(40% 44% at 86% 82%, rgba(120, 170, 255, 0.14) 0%, rgba(120, 170, 255, 0) 70%),
    linear-gradient(180deg, #fffcf6 0%, #fff6e8 100%);
}

/* Asystent głosowy: błękit marki, jaśniejszy przy telefonie, z którego
   rozchodzą się kręgi. Uchylone: turkus i zieleń — to nie kolory ARKANIP. */
.tlo__zestaw[data-sekcja="glosowy"] .tlo__poswiata {
  background:
    radial-gradient(48% 62% at 15% 56%, rgba(120, 170, 255, 0.34) 0%, rgba(120, 170, 255, 0) 72%),
    radial-gradient(40% 44% at 60% 30%, rgba(39, 99, 197, 0.1) 0%, rgba(39, 99, 197, 0) 70%),
    radial-gradient(40% 44% at 86% 82%, rgba(120, 170, 255, 0.16) 0%, rgba(120, 170, 255, 0) 70%),
    linear-gradient(180deg, #f8fafd 0%, #eef3fa 100%);
}

/* Gwiazdy świecą ciepło, nie rzucają szarego cienia jak kafelki — i są
   odrobinę mocniejsze niż kafelki na tej samej pozycji, bo złoto na
   kremowym tle traci kontrast szybciej niż kolorowy kafelek na błękicie. */
.tlo__zestaw[data-sekcja="opinie"] .tlo__ikona {
  opacity: min(1, calc(var(--o, 0.9) * 1.3));
}

.tlo__zestaw[data-sekcja="opinie"] .tlo__ikona svg {
  filter: drop-shadow(0 4px 12px rgba(240, 180, 41, 0.5));
}

.tlo__ikona {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--r);
  height: var(--r);
  opacity: var(--o, 0.9);
  filter: blur(var(--blur, 0px));
  transform: rotate(var(--kat, 0deg));
}

.tlo__ikona svg {
  display: block;
  width: 100%;
  height: 100%;
  filter: drop-shadow(0 6px 10px rgba(16, 35, 66, 0.14));
}

/* Plakietka z liczbą — czerwone kółko w prawym górnym rogu, jak w iOS.
   Wariant .tlo__ok: zielone „obsłużone”, jak w kadrze platformy po
   przejęciu kanałów przez asystenta. */
.tlo__ikona b.tlo__ok {
  background: #22c55e;
}

.tlo__ikona b {
  position: absolute;
  top: -14%;
  right: -14%;
  box-sizing: border-box;
  display: grid;
  place-items: center;
  min-width: 42%;
  height: 42%;
  padding: 0 10%;
  border-radius: 999px;
  border: 2px solid rgba(255, 255, 255, 0.95);
  background: #ff3b30;
  color: #ffffff;
  font-size: calc(var(--r) * 0.25);
  font-weight: 700;
  line-height: 1;
}

/* =========================================================== przewodnik -- */

/*
  Kropka ARKANIP z dymkiem — zachowanie opisane przy „przewodnik” w app.js.

  Kropka wisi na sztywno pod belką przy prawej krawędzi, niezależnie od
  układu sekcji — docelowo ma prowadzić po każdej z nich. Dymek wyrasta
  pod kropką i rośnie w lewo. Szkło jak karta: półprzezroczysta biel,
  jasna krawędź, cień, bez backdrop-filter.
*/
.przewodnik {
  position: fixed;
  top: 84px;
  right: 40px;
  z-index: 30;
}

.przewodnik[hidden] {
  display: none;
}

.przewodnik__kropka {
  position: relative;
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
}

/*
  Sama kropka: kula ze światłem u góry po lewej i halo w błękicie marki.
  Halo w dwóch warstwach — mgiełka tuż przy kropce i szerokie, rozmyte
  światło — tak czyta się kropka z platformy sprzedażowej.
*/
.przewodnik__kropka i {
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8fbcff 0%, #3a78dc 42%, #1b4a94 100%);
  box-shadow:
    0 0 0 7px rgba(39, 99, 197, 0.13),
    0 0 30px rgba(39, 99, 197, 0.55),
    0 8px 16px -6px rgba(27, 74, 148, 0.7);
  /*
    Kropka ZAWSZE pulsuje — także przy otwartym dymku z pytaniem. Dwie
    warstwy: kula oddycha (skala 1 → 1.16, cykl 3,6 s) i spod niej co
    cykl rozchodzi się pierścień (::before na przycisku). Własne elementy,
    więc animacja transformu nie dotyka żadnego korzenia ekranu telefonu.
    Uchylone: subtelny oddech 1 → 1.07 — niezauważalny.
  */
  animation: przewodnik-oddech-kropki 3.6s ease-in-out infinite;
  transition: box-shadow 0.25s var(--ease);
}

@keyframes przewodnik-oddech-kropki {
  0%,
  100% {
    transform: scale(1);
    box-shadow:
      0 0 0 7px rgba(39, 99, 197, 0.13),
      0 0 26px rgba(39, 99, 197, 0.45),
      0 8px 16px -6px rgba(27, 74, 148, 0.7);
  }
  50% {
    transform: scale(1.16);
    box-shadow:
      0 0 0 11px rgba(39, 99, 197, 0.1),
      0 0 44px rgba(39, 99, 197, 0.8),
      0 8px 16px -6px rgba(27, 74, 148, 0.7);
  }
}

/* Pierścień rozchodzący się od kropki — ciągle, jak sygnał. */
.przewodnik__kropka::before {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(39, 99, 197, 0.5);
  animation: przewodnik-sygnal 3.6s ease-out infinite;
  pointer-events: none;
}

@keyframes przewodnik-sygnal {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70%,
  100% {
    transform: scale(2.4);
    opacity: 0;
  }
}

/* Kursor nad kropką: mocniejsze halo, puls trwa dalej. */
.przewodnik__kropka:hover i {
  box-shadow:
    0 0 0 9px rgba(39, 99, 197, 0.16),
    0 0 36px rgba(39, 99, 197, 0.65),
    0 8px 16px -6px rgba(27, 74, 148, 0.7);
}

.przewodnik__kropka:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* „Mam coś nowego” — pierścień rozchodzi się od kropki dwa razy. */
.przewodnik[data-nowe="tak"] .przewodnik__kropka::after {
  content: "";
  position: absolute;
  top: 11px;
  left: 11px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 2px solid rgba(39, 99, 197, 0.55);
  animation: przewodnik-puls 1.3s var(--ease) 2;
  pointer-events: none;
}

@keyframes przewodnik-puls {
  from {
    transform: scale(1);
    opacity: 0.9;
  }
  to {
    transform: scale(2.6);
    opacity: 0;
  }
}

.przewodnik__dymek {
  position: absolute;
  top: 58px;
  right: 4px;
  width: min(400px, calc(100vw - 72px));
  padding: 14px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 22px;
  background: rgba(255, 255, 255, 0.9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 70px -18px rgba(16, 35, 66, 0.3),
    0 2px 10px rgba(16, 35, 66, 0.06);
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  transform-origin: top right;
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.przewodnik__dymek[hidden] {
  display: none;
}

.przewodnik__dymek[data-stan="otwarty"] {
  opacity: 1;
  transform: none;
}

/* Dymek ustępuje kursorowi, gdy zasłania cel kliknięcia (patrz kursorDo w app.js). */
.przewodnik__dymek[data-stan="otwarty"][data-schowany="tak"] {
  opacity: 0;
  transform: translateY(-8px) scale(0.98);
  pointer-events: none;
}

/* Dziubek wycelowany w kropkę. */
.przewodnik__dymek::before {
  content: "";
  position: absolute;
  top: -7px;
  right: 18px;
  width: 12px;
  height: 12px;
  background: rgba(255, 255, 255, 0.95);
  border-left: 1px solid rgba(255, 255, 255, 0.95);
  border-top: 1px solid rgba(255, 255, 255, 0.95);
  transform: rotate(45deg);
}

.przewodnik__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}

/* Podpis „ARKANIP” z miniaturą kropki — jak etykieta „ARKANIP AI”
   w dymkach platformy sprzedażowej. */
.przewodnik__marka {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.przewodnik__marka i {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: radial-gradient(circle at 34% 30%, #8fbcff 0%, #3a78dc 42%, #1b4a94 100%);
  box-shadow: 0 0 8px rgba(39, 99, 197, 0.6);
}

.przewodnik__zamknij {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
}

.przewodnik__zamknij:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.przewodnik__tytul {
  margin-bottom: 6px;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.przewodnik__tytul[hidden] {
  display: none;
}

/* Treść to akapity — wstęp sekcji ma dwa (opis i wskazówka). */
.przewodnik__tekst {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--color-text);
}

@media (max-width: 1000px) {
  .przewodnik {
    right: 16px;
  }
}

/* ================================================ przewodnik: samouczek -- */

/* Przyciski dymka: Tak / Nie, Pokaż mi, Dalej, Powtórz, Zakończ. */
.przewodnik__akcje {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}

.przewodnik__akcje[hidden] {
  display: none;
}

.przewodnik__akcja {
  /* Przyciski dzielą szerokość dymka po równo: dwa po 50 %, trzy po 33 %. */
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid rgba(22, 35, 59, 0.14);
  background: rgba(255, 255, 255, 0.85);
  color: var(--color-text);
  font: inherit;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease),
    background-color 0.15s var(--ease), transform 0.15s var(--ease);
}

.przewodnik__akcja:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
  transform: translateY(-1px);
}

.przewodnik__akcja--glowny {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
  box-shadow: 0 8px 18px -8px rgba(39, 99, 197, 0.7);
}

.przewodnik__akcja--glowny:hover {
  background: var(--color-primary-dark);
  border-color: var(--color-primary-dark);
  color: var(--color-text-inverse);
}

/* Licznik kroków w belce dymka, między marką a krzyżykiem. */
.przewodnik__licznik {
  margin-left: auto;
  margin-right: 10px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text-muted);
}

.przewodnik__licznik[hidden] {
  display: none;
}

/*
  Kursor przewodnika — biała strzałka z ciemnym obrysem, jak systemowa,
  żeby nikt nie pomylił jej z własną. Jedzie transformacją własnego
  elementu; klik to krótkie skurczenie plus rozchodzący się pierścień.
*/
.przewodnik__kursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 60;
  width: 30px;
  height: 34px;
  pointer-events: none;
  filter: drop-shadow(0 4px 8px rgba(16, 35, 66, 0.35));
  transition: transform 0.68s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.25s var(--ease);
}

.przewodnik__kursor[hidden] {
  display: none;
}

.przewodnik__kursor svg {
  display: block;
  width: 100%;
  height: 100%;
  transition: transform 0.12s var(--ease);
}

.przewodnik__kursor[data-stan="klik"] svg {
  transform: scale(0.82);
}

.przewodnik__kursor[data-stan="klik"]::after {
  content: "";
  position: absolute;
  top: -6px;
  left: -4px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid rgba(39, 99, 197, 0.7);
  animation: przewodnik-klik 0.5s ease-out forwards;
}

@keyframes przewodnik-klik {
  from {
    transform: scale(0.4);
    opacity: 1;
  }
  to {
    transform: scale(2.2);
    opacity: 0;
  }
}

.przewodnik__kursor[data-stan="znika"] {
  opacity: 0;
}

/* Karta przykładu w samouczku dashboardu — błękitna aura mówi „to nie decyzja”. */
.wybor__karta[data-przyklad="tak"] {
  border-color: rgba(39, 99, 197, 0.5);
  box-shadow: 0 0 0 5px rgba(39, 99, 197, 0.08), var(--shadow);
}

.wybor__karta[data-przyklad="tak"] .wybor__eyebrow {
  color: var(--color-accent);
}

/* ================================================== tło: siatka dashboardu -- */

/*
  Dashboard: zamiast ikon siatka kropek jak na papierze do wykresów,
  wygaszona ku brzegom maską, żeby nie walczyła z kartą. Statyczna warstwa,
  bez rozmycia i bez backdrop-filter.

  Uchylone: szkielet pustego dashboardu z polami na widżety, które
  zapełniały się miniaturami — czytał się jak drugi, rozmyty interfejs za
  właściwym, nie jak tło.
*/
.tlo__siatka {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(39, 99, 197, 0.24) 1.2px, transparent 1.7px);
  background-size: 28px 28px;
  background-position: 14px 14px;
  -webkit-mask-image: radial-gradient(72% 72% at 50% 48%, #000 25%, transparent 100%);
  mask-image: radial-gradient(72% 72% at 50% 48%, #000 25%, transparent 100%);
}

/*
  Podświetlenie elementu, o którym mówi krok samouczka (podswietl w kroku):
  błękitna poświata, która oddycha. Tylko box-shadow — bez transformacji,
  więc bezpieczne także na elementach wewnątrz ekranu telefonu.
*/
/* Podświetlanie elementów przez przewodnik UCHYLONE (2026-09-04) —
   patrz komentarz przy podswietl() w app.js. */

/* ============================== warstwa merytoryczna: nagłówek karty -- */

/* Moduł kapitalikiem, typ SMS-a, kiedy wychodzi — zwięźle, bo karta ma
   stałą wysokość i musi pomieścić jeszcze treść i skutek. */
.mer__naglowek {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding-bottom: 4px;
}

.mer__modul {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mer__typ {
  font-size: 22px;
  font-weight: 750;
  letter-spacing: -0.015em;
}

.mer__kiedy {
  font-size: 14px;
  color: var(--color-text-muted);
}

.mer__kiedy:empty {
  display: none;
}

/* ================================ warstwa merytoryczna: dolny rząd -- */

.mer__dol {
  display: flex;
  align-items: center;
  gap: 18px;
  flex-shrink: 0;
  min-height: 48px;
}

.mer__mapa-przycisk {
  flex-shrink: 0;
}

.mer__mapa-przycisk[aria-expanded="true"] {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

/* Pasek postępu: segment na moduł, szerokość proporcjonalna do liczby
   etapów. Aktywny segment wypełnia się krok po kroku, wcześniejsze są
   pełne, późniejsze puste. */
.postep {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.postep__segment {
  flex: 1 1 0;
  min-width: 18px;
  height: 22px;
  padding: 8px 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.postep__tor {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: rgba(39, 99, 197, 0.14);
  overflow: hidden;
}

.postep__tor i {
  display: block;
  width: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--color-primary);
  transition: width 0.3s var(--ease);
}

.postep__segment[data-stan="po"] .postep__tor i {
  background: rgba(39, 99, 197, 0.55);
}

.postep__segment:hover .postep__tor {
  background: rgba(39, 99, 197, 0.24);
}

.postep__segment:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
  border-radius: 999px;
}

.postep__licznik {
  flex-shrink: 0;
  font-size: 12.5px;
  color: var(--color-text-muted);
  white-space: nowrap;
}

.postep__licznik b {
  font-weight: 700;
  color: var(--color-text);
}

.mer__nawigacja {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* „Dalej · SPACJA” — pigułka jak w platformie sprzedażowej. */
.mer__dalej {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.mer__dalej kbd {
  padding: 2px 7px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.22);
  font-family: var(--font-sans);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

.mer__dalej:disabled kbd {
  opacity: 0.6;
}

/* =============================== warstwa merytoryczna: mapa ścieżki -- */

/*
  Panel nad dolnym rzędem, szkło jak karta. W środku ten sam pasek
  etapów (.stage), ale ułożony pionowo: moduł pod modułem, kafelki
  zawijane — bez poziomego przewijania.
*/
.mapa {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 60px;
  z-index: 5;
  max-height: min(60vh, 520px);
  display: flex;
  flex-direction: column;
  padding: 16px 18px 18px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 24px;
  background: rgba(255, 255, 255, 0.92);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 28px 70px -18px rgba(16, 35, 66, 0.3),
    0 2px 10px rgba(16, 35, 66, 0.06);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s var(--ease), transform 0.22s var(--ease);
}

.mapa[hidden] {
  display: none;
}

.mapa[data-stan="otwarta"] {
  opacity: 1;
  transform: none;
}

.mapa__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}

.mapa__tytul {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
}

.mapa__zamknij {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--color-text-muted);
  font-size: 18px;
  line-height: 1;
}

.mapa__zamknij:hover {
  background: var(--color-surface-alt);
  color: var(--color-text);
}

/* Pasek etapów wewnątrz mapy: pionowo, bez własnego szkła. */
.mapa .stage {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  overflow-x: visible;
  overflow-y: auto;
  min-height: 0;
}

.mapa .stage__grupa {
  border-left: 0;
  padding: 8px 10px 10px;
}

.mapa .stage__rzad {
  flex-wrap: wrap;
}

/* ============================================ tło: wiadomości głosowe -- */

/*
  Rozmyte pigułki wiadomości głosowych — kółko odtwarzania, fala dźwięku,
  czas — w tym samym języku, co kartki bazy wiedzy i karty dashboardu.
  Statyczne, rozmycie na samych pigułkach.
  Uchylone: kręgi dźwięku od telefonu (za słabe) i kafelki ze słuchawką.
*/
.tlo__fala {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 0 16px 0 10px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 10px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
  box-shadow: 0 20px 40px -22px rgba(16, 35, 66, 0.3);
  color: var(--color-primary);
  opacity: var(--o, 0.6);
  filter: blur(var(--blur, 2px));
  transform: rotate(var(--kat, 0deg));
}

/* Kółko odtwarzania w błękicie marki. */
.tlo__fala > i {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: var(--color-primary);
  color: #ffffff;
}

.tlo__fala > i svg {
  width: 18px;
  height: 18px;
  margin-left: 2px;
}

/* Fala dźwięku — słupki w błękicie, przez całą szerokość pigułki. */
.tlo__fala > svg {
  flex: 1;
  height: 28px;
  min-width: 0;
  opacity: 0.85;
}

.tlo__fala > b {
  flex-shrink: 0;
  font-size: 12px;
  font-weight: 600;
  color: var(--color-text-muted);
  font-variant-numeric: tabular-nums;
}

/* ============================================= tło: kartki bazy wiedzy -- */

/*
  Rozmyte arkusze dokumentów z kilkoma liniami tekstu — spokojne tło
  „jak segregator kliniki”. Statyczne, rozmycie na samych kartkach.
  Uchylone: kafelki z pytajnikiem, złotówką i książką — za głośne.
*/
.tlo__kartka {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.9);
  background:
    repeating-linear-gradient(
      180deg,
      transparent 0 18px,
      rgba(39, 99, 197, 0.12) 18px 20px,
      transparent 20px 30px
    ) 18px 34px / calc(100% - 36px) 100% no-repeat,
    linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(255, 255, 255, 0.7));
  box-shadow: 0 18px 40px -20px rgba(16, 35, 66, 0.28);
  opacity: var(--o, 0.6);
  filter: blur(var(--blur, 2px));
  transform: rotate(var(--kat, 0deg));
}

/* Nagłówek kartki — grubsza, krótsza kreska u góry. */
.tlo__kartka::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 18px;
  width: 42%;
  height: 8px;
  border-radius: 4px;
  background: rgba(39, 99, 197, 0.22);
}

/* ===================================================== czat: podpowiedzi -- */

/*
  Pigułki z pierwszymi pytaniami tuż nad paskiem wpisywania — z bazy wiedzy
  tej kliniki. Przypięte jak pasek, więc wątek dostaje większy zapas od dołu.
*/
.podpowiedzi {
  position: fixed;
  left: 50%;
  bottom: calc(var(--space-5) + 76px);
  transform: translateX(-50%);
  z-index: 30;
  /* Dwa rzędy po trzy pigułki, każda 1/3 szerokości paska. */
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
  width: min(820px, calc(100vw - 2 * var(--space-5)));
}

.podpowiedzi[hidden] {
  display: none;
}

.podpowiedz {
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: center;
  padding: 13px 16px;
  border-radius: 999px;
  border: 1px solid rgba(39, 99, 197, 0.35);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-primary);
  font: inherit;
  font-size: 14.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: background-color 0.15s var(--ease), color 0.15s var(--ease),
    transform 0.15s var(--ease);
}

.podpowiedz:hover {
  background: var(--color-primary);
  color: var(--color-text-inverse);
  transform: translateY(-1px);
}

#czat-watek,
#opinie-watek {
  padding-top: 52px;
  padding-bottom: 215px;
}

/* „Zacznij od nowa” — pigułka u góry wątku, widoczna po pierwszej wiadomości. */
.rozmowa {
  position: relative;
}

.rozmowa__reset {
  position: absolute;
  /* 12 px, nie 6: obwódka przewodnika wokół pigułki ma się zmieścić w kadrze. */
  top: 12px;
  left: 50%;
  z-index: 3;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 7px 14px;
  border-radius: 999px;
  border: 1px solid rgba(22, 35, 59, 0.12);
  background: rgba(255, 255, 255, 0.88);
  color: var(--color-text-muted);
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: color 0.15s var(--ease), border-color 0.15s var(--ease);
}

.rozmowa__reset:hover {
  color: var(--color-primary);
  border-color: var(--color-primary);
}

.rozmowa__reset[hidden] {
  display: none;
}

.rozmowa__reset svg {
  width: 14px;
  height: 14px;
}

/* ============================ notatnik „Testuj po swojemu”: pasek jak w czacie -- */

.glos__karta--notatnik .notatnik__wpis {
  min-height: 52px;
  padding: 6px 6px 6px 20px;
  border: 1px solid var(--szklo-pasek-krawedz);
  box-shadow: var(--shadow);
  background: var(--color-surface);
}

.glos__karta--notatnik .notatnik__wpis:focus-within {
  border-color: rgba(39, 99, 197, 0.55);
  box-shadow: 0 0 18px rgba(39, 99, 197, 0.18);
}

.glos__karta--notatnik .notatnik__pole {
  font-size: 15px;
}

/* Okrągły, błękitny przycisk wysyłki — ten sam, co w pasku czatu. */
.notatnik__wyslij {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: linear-gradient(160deg, var(--color-primary-bright), var(--color-primary));
  color: #ffffff;
  flex-shrink: 0;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(39, 99, 197, 0.35);
  transition: transform 0.15s var(--ease), opacity 0.15s var(--ease);
}

.notatnik__wyslij svg {
  width: 18px;
  height: 18px;
}

.notatnik__wyslij:hover {
  transform: translateY(-1px);
}

/* ============================================ tło: karty wykresów dashboardu -- */

/*
  Rozmyte karty jak widżety dashboardu — odpowiednik kartek w bazie wiedzy:
  biała karta z krótkim paskiem tytułu i jednym wykresem w kolorach marki.
  Statyczne, rozmycie na samych kartach.
  Uchylone: ikony (kafelki), siatka kropek, szkielet pustego dashboardu.
*/
.tlo__wykres {
  position: absolute;
  left: var(--x);
  top: var(--y);
  width: var(--w);
  height: var(--h);
  padding: 14px 14px 10px;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.78));
  box-shadow: 0 22px 44px -22px rgba(16, 35, 66, 0.3);
  opacity: var(--o, 0.6);
  filter: blur(var(--blur, 2px));
  transform: rotate(var(--kat, 0deg));
}

/* Pasek tytułu widżetu. */
.tlo__wykres > i {
  display: block;
  width: 46%;
  height: 8px;
  border-radius: 4px;
  background: rgba(39, 99, 197, 0.25);
}

.tlo__wykres svg {
  flex: 1;
  width: 100%;
  min-height: 0;
}

/* ================================================= zakończenie środowiska -- */

/*
  Ekran na wierzchu wszystkiego: przyciemnione tło (bez backdrop-filter —
  reguła projektu) i szklana karta na środku. Wejście/wyjście przez
  atrybut stanu i wymuszony reflow, nie przez requestAnimationFrame.
*/
.zakonczenie {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: center;
  padding: 24px;
  background: rgba(16, 35, 66, 0.38);
  opacity: 0;
  transition: opacity 0.22s var(--ease);
}

.zakonczenie[hidden] {
  display: none;
}

.zakonczenie[data-stan="otwarte"] {
  opacity: 1;
}

.zakonczenie__karta {
  display: flex;
  flex-direction: column;
  gap: 14px;
  width: min(600px, 100%);
  padding: 30px 32px 26px;
  border: 1px solid rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  background: rgba(255, 255, 255, 0.96);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 40px 90px -30px rgba(16, 35, 66, 0.5);
  transform: translateY(8px);
  transition: transform 0.22s var(--ease);
}

.zakonczenie[data-stan="otwarte"] .zakonczenie__karta {
  transform: none;
}

.zakonczenie__tekst {
  font-size: 15px;
  line-height: 1.6;
}

/* Lista zebranych poprawek: etykieta po lewej, liczba w pigułce po prawej. */
.zakonczenie__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.zakonczenie__lista:empty {
  display: none;
}

.zakonczenie__lista li {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 14px;
  border-radius: 12px;
  background: rgba(39, 99, 197, 0.06);
  font-size: 14px;
}

.zakonczenie__lista b {
  display: inline-grid;
  place-items: center;
  min-width: 28px;
  height: 24px;
  padding: 0 8px;
  border-radius: 999px;
  background: var(--color-primary);
  color: var(--color-text-inverse);
  font-size: 12.5px;
  font-weight: 700;
}

.zakonczenie__status {
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 13.5px;
  line-height: 1.5;
  background: var(--color-surface-alt);
  color: var(--color-text);
}

.zakonczenie__status[hidden] {
  display: none;
}

.zakonczenie__status[data-typ="ok"] {
  background: rgba(46, 158, 91, 0.12);
  color: var(--color-success);
}

.zakonczenie__status[data-typ="uwaga"] {
  background: rgba(208, 138, 44, 0.12);
  color: var(--color-warning);
}

.zakonczenie__status[data-typ="blad"] {
  background: rgba(192, 67, 47, 0.12);
  color: var(--color-danger);
}

.zakonczenie__akcje {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 6px;
}

.zakonczenie__akcje .btn[hidden] {
  display: none;
}

/* ============================= reaktywacja: osobne ustawienia dla usług -- */

/* Tytuł bloku; lista usług (na start pusta) i przycisk dodawania pod nim.
   Uchylone: przełącznik-suwak z listą z cennika — nie przywracaj. */
.uslugi__tytul {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--color-text);
}

.uslugi__opis {
  margin-top: -2px;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--color-text-muted);
}

.uslugi__lista {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.uslugi__lista[hidden] {
  display: none;
}

/* Usługa: nazwa i miesiące w jednym rzędzie, własna treść SMS-a pod spodem. */
.usluga {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  cursor: default;
}

.usluga__belka {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.usluga__nazwa {
  font-size: 14px;
  font-weight: 600;
}

.usluga__rzad {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  color: var(--color-text-muted);
}

.usluga__tresc {
  width: 100%;
  box-sizing: border-box;
  padding: 8px 12px;
  border: 1px solid var(--color-border);
  border-radius: 12px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  resize: vertical;
}

.usluga__tresc:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(39, 99, 197, 0.16);
}

/* Lista usług z osobną reaktywacją: nazwa, czas i „×” w rzędzie, treść pod spodem. */
.usluga__nazwa-pole {
  flex: 1;
  min-width: 0;
  padding: 7px 10px;
  font-size: 13.5px;
}

.usluga__usun {
  width: 28px;
  height: 28px;
  flex-shrink: 0;
}

.usluga__usun svg {
  width: 14px;
  height: 14px;
}

.uslugi__dodaj {
  align-self: flex-start;
  padding: 8px 12px;
  font-size: 13px;
}

/* Potwierdzenie po zapisie uwagi przy kciuku w dół. */
.poprawka__info {
  margin: 4px 0 0;
  font-size: 12px;
  line-height: 1.45;
  color: var(--color-text-muted);
}

.poprawka__info::before {
  content: "✓ ";
  color: var(--color-primary);
  font-weight: 700;
}

/* Wybór godziny: pole tylko do odczytu + pasek pigułek z godzinami pod nim. */
.parametr__pole--godzina {
  cursor: pointer;
  caret-color: transparent;
}

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

.godziny[hidden] {
  display: none;
}

.godzina {
  padding: 5px 9px;
  border-radius: 999px;
  border: 1px solid rgba(22, 35, 59, 0.14);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 12.5px;
  font-variant-numeric: tabular-nums;
  cursor: pointer;
  transition: border-color 0.15s var(--ease), color 0.15s var(--ease),
    background-color 0.15s var(--ease);
}

.godzina:hover {
  border-color: var(--color-primary);
  color: var(--color-primary);
}

.godzina[data-aktywna="tak"] {
  background: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

/* Kontynuacje rozmowy: 1–3 pigułki w jednym rzędzie na całą szerokość paska. */
.podpowiedzi[data-ile="1"] {
  grid-template-columns: minmax(0, 1fr);
}

.podpowiedzi[data-ile="2"] {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ================================ asystent głosowy: wybór trybu testu -- */

.glos {
  position: relative;
}

/*
  Scena wyboru: własne, KRYJĄCE tło (telefon i kolumny schowane), na nim
  rozchodzące się kręgi połączenia i dwie duże karty w rytmie karty
  widżetu z dashboardu: górna połowa = animacja, dolna = badge, nagłówek,
  opis, CTA. Bez backdrop-filter (reguła projektu).
  Uchylone (2026-09-05): małe szklane karty na półprzezroczystej nakładce
  nad telefonem — użytkownik: „nie, te karty wyglądają jak te z dashboardu”.
*/
.tryb-wybor {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  overflow: hidden;
  background:
    radial-gradient(60% 70% at 50% 40%, rgba(120, 170, 255, 0.28) 0%, rgba(120, 170, 255, 0) 70%),
    linear-gradient(180deg, #f6f9fe 0%, #e9f0fa 100%);
  animation: tryb-tlo 0.4s var(--ease) both;
}

.tryb-wybor[hidden] {
  display: none;
}

/* Kręgi połączenia — cztery pierścienie rozchodzące się od środka sceny. */
.tryb-wybor__tlo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.tryb-wybor__tlo i {
  position: absolute;
  left: 50%;
  top: 44%;
  width: 320px;
  height: 320px;
  margin: -160px 0 0 -160px;
  border: 1.5px solid rgba(39, 99, 197, 0.22);
  border-radius: 50%;
  animation: tryb-krag 7s linear infinite;
}

.tryb-wybor__tlo i:nth-child(2) { animation-delay: 1.75s; }
.tryb-wybor__tlo i:nth-child(3) { animation-delay: 3.5s; }
.tryb-wybor__tlo i:nth-child(4) { animation-delay: 5.25s; }

@keyframes tryb-krag {
  from { transform: scale(0.6); opacity: 0; }
  12% { opacity: 0.9; }
  to { transform: scale(4.2); opacity: 0; }
}

.tryb-wybor__karty {
  position: relative;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 460px));
  gap: 32px;
  width: 100%;
  max-width: 980px;
}

.tryb-wybor__karta {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid rgba(79, 140, 240, 0.34);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  animation: tryb-wjazd-lewo 0.55s var(--ease) both;
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.2s var(--ease);
}

.tryb-wybor__karta:hover {
  border-color: rgba(39, 99, 197, 0.7);
  transform: translateY(-2px);
}

.tryb-wybor__karta--prawa {
  animation-name: tryb-wjazd-prawo;
  animation-delay: 0.08s;
}

/* Górna połowa: wizualizacja na jasnym tle. */
.tryb-wybor__wizual {
  display: grid;
  place-items: center;
  height: 230px;
  border-bottom: 1px solid var(--color-border);
  background: linear-gradient(180deg, #f4f8fe 0%, #eaf1fb 100%);
}

.tryb-wybor__dol {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 22px 28px 26px;
}

.tryb-wybor__dol .mer__typ {
  margin: 0;
}

.tryb-wybor__opis {
  flex: 1;
  margin: 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

/* CTA na całą szerokość karty (decyzja użytkownika). */
.tryb-wybor__dol .btn {
  align-self: stretch;
  width: 100%;
  justify-content: center;
  margin-top: 10px;
}

/* --- wizualizacja 1: trzy rozmowy dostają ocenę, pasek się wypełnia --- */
.wizual-scen {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 260px;
}

.wizual-scen__wiersz {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid rgba(22, 35, 59, 0.08);
  border-radius: 12px;
  background: #ffffff;
  box-shadow: 0 6px 18px -12px rgba(16, 35, 66, 0.35);
}

.wizual-scen__wiersz span {
  flex: 1;
  height: 8px;
  border-radius: 999px;
  background: rgba(22, 35, 59, 0.12);
}

.wizual-scen__wiersz:nth-child(2) span { width: 70%; flex: none; }
.wizual-scen__wiersz:nth-child(3) span { width: 85%; flex: none; }

/* Kciuk: szare kółko, które po chwili wypełnia się błękitem z „ptaszkiem”. */
.wizual-scen__wiersz b {
  position: relative;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1.5px solid rgba(22, 35, 59, 0.2);
  background: transparent;
  animation: wizual-kciuk 6.4s var(--ease) infinite both;
}

.wizual-scen__wiersz b::after {
  content: "";
  position: absolute;
  left: 7px;
  top: 4px;
  width: 5px;
  height: 9px;
  border: solid #ffffff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
  opacity: 0;
  animation: wizual-ptaszek 6.4s var(--ease) infinite both;
}

.wizual-scen__wiersz:nth-child(1) b,
.wizual-scen__wiersz:nth-child(1) b::after { animation-delay: 0s; }
.wizual-scen__wiersz:nth-child(2) b,
.wizual-scen__wiersz:nth-child(2) b::after { animation-delay: 0.9s; }
.wizual-scen__wiersz:nth-child(3) b,
.wizual-scen__wiersz:nth-child(3) b::after { animation-delay: 1.8s; }

@keyframes wizual-kciuk {
  0%, 34% { background: transparent; border-color: rgba(22, 35, 59, 0.2); }
  40%, 88% { background: #2763c5; border-color: #2763c5; }
  94%, 100% { background: transparent; border-color: rgba(22, 35, 59, 0.2); }
}

@keyframes wizual-ptaszek {
  0%, 36% { opacity: 0; }
  42%, 88% { opacity: 1; }
  94%, 100% { opacity: 0; }
}

.wizual-scen__pasek {
  height: 6px;
  border-radius: 999px;
  background: rgba(39, 99, 197, 0.12);
  overflow: hidden;
}

.wizual-scen__pasek i {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: #2763c5;
  animation: wizual-pasek 6.4s var(--ease) infinite both;
}

@keyframes wizual-pasek {
  0%, 8% { width: 0; }
  40% { width: 33%; }
  52% { width: 66%; }
  64%, 84% { width: 100%; }
  92%, 100% { width: 0; }
}

/* --- wizualizacja 2: trwa połączenie — kropka, kręgi, fala głosu --- */
.wizual-glos {
  position: relative;
  display: grid;
  place-items: center;
  width: 260px;
  height: 180px;
}

.wizual-glos__kropka {
  position: relative;
  z-index: 1;
  width: 54px;
  height: 54px;
  margin-bottom: 56px;
  border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #5b8ee6 0%, #2763c5 55%, #1b4a94 100%);
  box-shadow: 0 12px 28px -10px rgba(39, 99, 197, 0.7);
  animation: wizual-oddech 2.4s var(--ease) infinite;
}

.wizual-glos__krag {
  position: absolute;
  left: 50%;
  top: 34%;
  width: 54px;
  height: 54px;
  margin: -27px 0 0 -27px;
  border: 1.5px solid rgba(39, 99, 197, 0.45);
  border-radius: 50%;
  animation: wizual-krag 2.4s ease-out infinite;
}

.wizual-glos__krag:nth-child(2) { animation-delay: 0.8s; }
.wizual-glos__krag:nth-child(3) { animation-delay: 1.6s; }

@keyframes wizual-krag {
  from { transform: scale(1); opacity: 0.8; }
  to { transform: scale(3); opacity: 0; }
}

@keyframes wizual-oddech {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}

.wizual-glos__fala {
  position: absolute;
  left: 50%;
  bottom: 22px;
  display: flex;
  align-items: center;
  gap: 5px;
  height: 36px;
  transform: translateX(-50%);
}

.wizual-glos__fala b {
  width: 4px;
  height: 10px;
  border-radius: 999px;
  background: #2763c5;
  opacity: 0.85;
  animation: wizual-slupek 1.1s ease-in-out infinite;
}

.wizual-glos__fala b:nth-child(1) { animation-delay: 0s; }
.wizual-glos__fala b:nth-child(2) { animation-delay: 0.12s; }
.wizual-glos__fala b:nth-child(3) { animation-delay: 0.24s; }
.wizual-glos__fala b:nth-child(4) { animation-delay: 0.36s; }
.wizual-glos__fala b:nth-child(5) { animation-delay: 0.48s; }
.wizual-glos__fala b:nth-child(6) { animation-delay: 0.36s; }
.wizual-glos__fala b:nth-child(7) { animation-delay: 0.24s; }
.wizual-glos__fala b:nth-child(8) { animation-delay: 0.12s; }
.wizual-glos__fala b:nth-child(9) { animation-delay: 0s; }

@keyframes wizual-slupek {
  0%, 100% { height: 8px; }
  50% { height: 32px; }
}

@keyframes tryb-tlo {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes tryb-wjazd-lewo {
  from { opacity: 0; transform: translateX(-56px); }
  to { opacity: 1; transform: none; }
}

@keyframes tryb-wjazd-prawo {
  from { opacity: 0; transform: translateX(56px); }
  to { opacity: 1; transform: none; }
}

/* Dolny pasek: przycisk zmiany trybu z lewej; w trybie samodzielnym
   pasek postępu, licznik i Dalej/Wstecz znikają. */
.glos__tryb {
  flex-shrink: 0;
  margin-right: 8px;
}

/* W czasie wyboru telefon, prawa kolumna i dolny pasek są schowane. */
.glos[data-tryb="wybor"] .glos__dol,
.glos[data-tryb="wybor"] .glos__kolumny {
  visibility: hidden;
}

.glos[data-tryb="swobodny"] .glos__dol .postep,
.glos[data-tryb="swobodny"] .glos__dol .postep__licznik,
.glos[data-tryb="swobodny"] .glos__dol .mer__nawigacja {
  display: none;
}

@media (max-width: 900px) {
  .tryb-wybor__karty {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Scena wyboru trybu ma własne tło — pigułki głosowe wokół kadru gasną. */
body[data-glos-wybor="tak"] .tlo__zestaw[data-sekcja="glosowy"] .tlo__fala {
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}

/* ================================================= ekran PIN (start.js) -- */

/*
  Środowisko hostowane: zanim wczyta się app.js, klient widzi tylko kartę
  z PIN-em. Reszta strony jest w DOM-ie, ale niewidoczna — po wpisaniu
  PIN-u nic nie „doskakuje”. Własne tło sceny: dwie miękkie plamy błękitu
  i trzy cienkie kręgi (jak sygnał połączenia), bez backdrop-filter.
  Sześć pól cyfr rysowanych z jednego niewidocznego inputa (start.js).
*/
body[data-start="pin"] > :not(#pin):not(#tlo) {
  visibility: hidden;
}

.pin {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: grid;
  place-items: center;
  padding: 24px;
  overflow: hidden;
  background: linear-gradient(180deg, #f7faff 0%, #eaf1fb 100%);
}

.pin__tlo {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.pin__plama {
  position: absolute;
  width: 62vmax;
  height: 62vmax;
  border-radius: 50%;
  filter: blur(60px);
  opacity: 0.55;
  animation: pin-plama 18s ease-in-out infinite alternate;
}

.pin__plama--1 {
  left: -18vmax;
  top: -24vmax;
  background: radial-gradient(circle, rgba(120, 170, 255, 0.55) 0%, rgba(120, 170, 255, 0) 65%);
}

.pin__plama--2 {
  right: -20vmax;
  bottom: -26vmax;
  background: radial-gradient(circle, rgba(39, 99, 197, 0.32) 0%, rgba(39, 99, 197, 0) 65%);
  animation-delay: -9s;
}

@keyframes pin-plama {
  from { transform: translate3d(0, 0, 0) scale(1); }
  to { transform: translate3d(6vmax, 4vmax, 0) scale(1.08); }
}

.pin__krag {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 560px;
  height: 560px;
  margin: -280px 0 0 -280px;
  border: 1px solid rgba(39, 99, 197, 0.14);
  border-radius: 50%;
}

.pin__krag:nth-child(4) {
  width: 820px;
  height: 820px;
  margin: -410px 0 0 -410px;
  border-color: rgba(39, 99, 197, 0.1);
}

.pin__krag:nth-child(5) {
  width: 1100px;
  height: 1100px;
  margin: -550px 0 0 -550px;
  border-color: rgba(39, 99, 197, 0.07);
}

.pin__karta {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: min(460px, 100%);
  padding: 40px 44px 30px;
  box-sizing: border-box;
  text-align: center;
  background: rgba(255, 255, 255, 0.94);
  border: 1px solid rgba(255, 255, 255, 0.9);
  border-radius: 28px;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 40px 90px -30px rgba(16, 35, 66, 0.35),
    0 2px 10px rgba(16, 35, 66, 0.06);
  animation: pin-wjazd 0.55s var(--ease) both;
}

.pin__logo {
  font-size: 24px;
  margin-bottom: 22px;
}

.pin__eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--color-primary);
  margin-bottom: 8px;
}

.pin__tytul {
  margin: 0 0 10px;
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: var(--color-text);
}

.pin__lead {
  margin: 0 0 26px;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pin__forma {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 14px;
  width: 100%;
}

.pin__etykieta {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--color-text-muted);
  text-align: left;
}

.pin__cyfry {
  position: relative;
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px;
}

.pin__cyfry i {
  height: 64px;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--color-border-strong);
  border-radius: 14px;
  background: #ffffff;
  font-style: normal;
  font-size: 26px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease);
}

.pin__cyfry i[data-stan="pelna"] {
  border-color: var(--color-primary);
}

.pin[data-fokus="tak"] .pin__cyfry i[data-stan="aktywna"] {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 4px rgba(39, 99, 197, 0.14);
}

/* Kursor w aktywnym polu — cienka kreska, żeby było wiadomo, gdzie się pisze. */
.pin[data-fokus="tak"] .pin__cyfry i[data-stan="aktywna"]::after {
  content: "";
  width: 1.5px;
  height: 26px;
  background: var(--color-primary);
  animation: pin-kursor 1s steps(2, start) infinite;
}

@keyframes pin-kursor {
  to { opacity: 0; }
}

.pin__pole {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  font-size: 16px; /* iOS nie przybliża strony przy fokusie */
  border: 0;
  outline: none;
  background: transparent;
  color: transparent;
  caret-color: transparent;
}

.pin__btn {
  width: 100%;
  justify-content: center;
  padding: 13px 18px;
  font-size: 15px;
  border-radius: 12px;
}

.pin__blad {
  margin: -4px 0 0;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--color-danger);
}

.pin__blad[hidden] {
  display: none;
}

.pin__pomoc {
  margin: 22px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--color-text-muted);
}

.pin__stopka {
  margin: 18px 0 0;
  padding-top: 16px;
  width: 100%;
  border-top: 1px solid var(--color-border);
  font-size: 11.5px;
  line-height: 1.6;
  color: #8a98ad;
}

.pin[data-stan="sprawdzam"] .pin__btn {
  opacity: 0.6;
  pointer-events: none;
}

.pin[data-stan="ok"] .pin__karta {
  animation: pin-znika 0.36s var(--ease) forwards;
}

.pin__cyfry--trzesie {
  animation: pin-trzesie 0.4s var(--ease);
}

@keyframes pin-wjazd {
  from { opacity: 0; transform: translateY(16px) scale(0.985); }
  to { opacity: 1; transform: none; }
}

@keyframes pin-znika {
  to { opacity: 0; transform: translateY(-12px) scale(0.985); }
}

@keyframes pin-trzesie {
  0%, 100% { transform: none; }
  20% { transform: translateX(-8px); }
  40% { transform: translateX(8px); }
  60% { transform: translateX(-5px); }
  80% { transform: translateX(5px); }
}

@media (max-width: 520px) {
  .pin__karta {
    padding: 32px 24px 24px;
  }

  .pin__cyfry {
    gap: 6px;
  }

  .pin__cyfry i {
    height: 54px;
    font-size: 22px;
    border-radius: 12px;
  }
}