/* Pixi-App — styl (krok 6, karta t_2daa3cb8): wygląd wg projektu Merkucjusza „Papier i mech” (t_09a226a9, wariant A).
   Wzór komponentów: projekt/projekt.css. Wszystkie kolory, rozmiary czcionek, cele dotyku i promienie z tokeny.css
   (tego samego pliku, który jest w projekcie) — tu nie ma ani jednego koloru ani rozmiaru czcionki wpisanego na sztywno,
   żeby zmiana parametru (np. tekst 18 zamiast 19 px, cele 72 zamiast 56 dp) była jedną linią w tokeny.css. */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tlo); color: var(--tekst); font-family: var(--kroj);
  font-size: var(--rozmiar-tekst); line-height: var(--interlinia); -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
[hidden] { display: none !important; }
button, input, textarea { font: inherit; color: inherit; }
h1, h2, p { margin: 0; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ikona-svg { width: var(--ikona); height: var(--ikona); flex: none; fill: none; stroke: currentColor;
  stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ikona-svg.mala { width: 18px; height: 18px; vertical-align: -3px; }

/* ---------- fokus (klawiatura, przełącznik, TalkBack z klawiaturą) ---------- */
button:focus-visible, input:focus-visible, textarea:focus-visible, a:focus-visible, [tabindex]:focus-visible {
  outline: 3px solid var(--fokus); outline-offset: 2px; }
h1[tabindex="-1"]:focus, main[tabindex="-1"]:focus { outline: none; }

/* ---------- ekrany ---------- */
.ekran { height: 100dvh; display: flex; flex-direction: column; background: var(--tlo); }
.pomoc { position: fixed; inset: 0; z-index: 15; }
.ekran-tresc { container-type: inline-size; flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; padding: var(--o-5) var(--o-5) calc(var(--o-4) + env(safe-area-inset-bottom)); gap: var(--o-4); }
.ekran-tresc > * { flex-shrink: 0; }
.ekran-tresc .na-dol { margin-top: auto; display: flex; flex-direction: column; gap: var(--o-3); }
.znak-duzy { width: 88px; height: 88px; border-radius: 50%; background: var(--akcent-miekki); color: var(--akcent);
  display: flex; align-items: center; justify-content: center; }
.znak-duzy svg { width: 52px; height: 52px; }
.tytul-duzy { font-size: var(--rozmiar-duzy); font-weight: var(--grubosc-mocna); line-height: 1.2; }
.wstep { margin: 0; }
.wstep-duzy { font-size: var(--rozmiar-tytul); line-height: 1.35; }
.etykieta { font-size: var(--rozmiar-przycisk); font-weight: var(--grubosc-mocna); }
.sekcja-tytul { margin-top: var(--o-3); font-size: var(--rozmiar-meta); color: var(--tekst-2); font-weight: var(--grubosc-mocna); }
.drobny { font-size: var(--rozmiar-meta); color: var(--tekst-2); }

/* ---------- nagłówek ---------- */
.naglowek { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: var(--o-3); min-height: 72px;
  padding: calc(env(safe-area-inset-top) + var(--o-2)) var(--o-2) var(--o-2) var(--o-4); background: var(--tlo-2); border-bottom: 1px solid var(--ramka); }
.awatar { width: 44px; height: 44px; border-radius: 50%; background: var(--akcent-miekki); color: var(--akcent);
  display: flex; align-items: center; justify-content: center; flex: none; }
.awatar svg { width: 28px; height: 28px; }
.naglowek .kto { flex: 1; min-width: 0; }
.naglowek .imie { font-size: var(--rozmiar-tytul); font-weight: var(--grubosc-mocna); line-height: 1.15; }
.naglowek .stan-pixi { font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.naglowek > h1 { flex: 1 1 8em; min-width: 0; overflow-wrap: anywhere; font-size: var(--rozmiar-tytul); font-weight: var(--grubosc-mocna); } /* przy dużej czcionce tytuł schodzi do drugiego wiersza */
/* przycisk z podpisem: ikona nad słowem (z wariantu B) */
.przycisk-podpis { min-width: var(--cel-min); min-height: var(--cel-min); padding: var(--o-1) var(--o-2); border: 0; background: none;
  color: var(--tekst); border-radius: var(--promien-przycisk); display: inline-flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px; font-size: var(--rozmiar-meta); line-height: 1.1; cursor: pointer; }
.przycisk-podpis span { color: var(--tekst-2); }
.przycisk-podpis:active { background: var(--akcent-miekki); }
.wstecz { flex-direction: row; gap: var(--o-1); font-size: var(--rozmiar-przycisk); }

/* ---------- historia ---------- */
.historia { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column;
  gap: var(--o-3); padding: var(--o-4) var(--o-3) var(--o-3); }
.historia::before { content: ""; flex: 1 0 0; } /* krótka rozmowa przylega do dołu; długa przewija się normalnie */
.historia > * { flex: none; }
.powitanie { margin-bottom: auto; align-self: center; display: flex; flex-direction: column; align-items: center; gap: var(--o-3);
  text-align: center; color: var(--tekst-2); font-size: var(--rozmiar-tytul); }
.dzien { align-self: center; font-size: var(--rozmiar-meta); color: var(--tekst-2); background: var(--tlo-2); border-radius: 999px; padding: 2px var(--o-3); }
.wiadomosc { max-width: 84%; padding: 10px 14px 8px; border-radius: var(--promien-dymek); overflow-wrap: anywhere; }
.wiadomosc.pixi { align-self: flex-start; background: var(--pixi-dymek); border: 1px solid var(--pixi-dymek-ramka); border-bottom-left-radius: var(--promien-ogonek); }
.wiadomosc.ja { align-self: flex-end; background: var(--moj); border-bottom-right-radius: var(--promien-ogonek); }
.tresc > :first-child { margin-top: 0; }
.tresc > :last-child { margin-bottom: 0; }
.tresc p + p { margin-top: var(--o-2); }
.tresc ul, .tresc ol { margin: var(--o-2) 0; padding-left: 1.3em; }
.tresc li + li { margin-top: var(--o-1); }
.tresc h3, .tresc h4, .tresc h5, .tresc h6 { margin: var(--o-3) 0 var(--o-1); font-size: var(--rozmiar-tekst); font-weight: var(--grubosc-mocna); }
.tresc pre { background: var(--tlo-2); border: 1px solid var(--ramka); padding: var(--o-3); border-radius: 12px; overflow-x: auto; font-family: var(--kroj-kod); font-size: var(--rozmiar-meta); }
.tresc code { background: var(--tlo-2); padding: 0 var(--o-1); border-radius: 6px; font-family: var(--kroj-kod); font-size: var(--rozmiar-meta); }
.tresc pre code { background: none; padding: 0; }
.tresc a { color: var(--akcent); text-decoration: underline; text-underline-offset: 3px; }
.znacznik-od-pixi { display: flex; align-items: center; gap: var(--o-2); margin-bottom: var(--o-1); font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.znacznik-od-pixi .ikona-svg { width: 18px; height: 18px; color: var(--akcent); }
.meta { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: var(--o-1) var(--o-2); margin-top: var(--o-1);
  font-size: var(--rozmiar-meta); color: var(--tekst-2); line-height: 1.2; }
.meta.lewo { justify-content: space-between; }
.meta .ikona-svg { width: 18px; height: 18px; }
.godzina { white-space: nowrap; }
.stan { display: inline-flex; align-items: center; gap: var(--o-1); }
.stan.czeka { color: var(--uwaga-tekst); background: var(--uwaga-tlo); border-radius: 999px; padding: 1px 8px 1px 4px; }
.kopiuj { min-height: var(--cel-min); margin: calc((var(--cel-min) - 24px) / -2) calc(var(--o-2) * -1) calc((var(--cel-min) - 24px) / -2) 0; /* pole dotyku 56 dp bez rozpychania dymka */
  padding: 0 var(--o-2); border: 0; background: none; color: var(--tekst-2); border-radius: var(--promien-przycisk);
  display: inline-flex; align-items: center; gap: var(--o-1); font-size: var(--rozmiar-meta); cursor: pointer; }
.kopiuj:active { background: var(--akcent-miekki); }
.wiadomosc img.miniatura { display: block; max-width: 100%; max-height: 220px; border-radius: 14px; margin-bottom: var(--o-2); }
.plik-w-dymku, .glosowka-opis { display: flex; align-items: center; gap: var(--o-2); margin-bottom: var(--o-1); }
.glosowka { display: flex; align-items: center; gap: var(--o-3); min-width: 240px; }
.odtworz { width: var(--cel-min); height: var(--cel-min); border-radius: 50%; border: 0; flex: none; cursor: pointer;
  background: var(--akcent); color: var(--akcent-tekst); display: flex; align-items: center; justify-content: center; }
.fala { flex: 1; display: flex; align-items: center; gap: 3px; height: 32px; }
.fala i { width: 4px; border-radius: 2px; background: var(--tekst-2); }
.uslyszala { margin-top: var(--o-2); padding-top: var(--o-2); border-top: 1px solid var(--ramka); font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.glosowka + .uslyszala { margin-top: var(--o-2); }
.glosowka-opis + .uslyszala { margin-top: 0; padding-top: 0; border-top: 0; }
.uslyszala q { display: block; color: var(--tekst); font-size: var(--rozmiar-tekst); quotes: "„" "”"; }
/* „Pixi pisze” — jedyna stała animacja; znika przy prefers-reduced-motion */
.pisze { align-self: flex-start; display: flex; align-items: center; gap: var(--o-3); max-width: 84%; padding: 12px 16px; background: var(--pixi-dymek);
  border: 1px solid var(--pixi-dymek-ramka); border-radius: var(--promien-dymek); border-bottom-left-radius: var(--promien-ogonek);
  font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.kropki { display: inline-flex; gap: 5px; flex: none; }
.kropki i { width: 9px; height: 9px; border-radius: 50%; background: var(--akcent); }
.kropki i:nth-child(2) { opacity: .65; } .kropki i:nth-child(3) { opacity: .35; }
@media (prefers-reduced-motion: no-preference) {
  .kropki i { animation: kropka 1.2s infinite ease-in-out; }
  .kropki i:nth-child(2) { animation-delay: .15s; } .kropki i:nth-child(3) { animation-delay: .3s; }
}
@keyframes kropka { 0%, 80%, 100% { transform: scale(.6); } 40% { transform: scale(1); } }

/* ---------- paski i ramki stanów (kolor ZAWSZE z ikoną i słowem; czerwieni nie ma) ---------- */
.pasek-uwagi { flex: none; display: flex; align-items: flex-start; gap: var(--o-3); padding: var(--o-3) var(--o-4); background: var(--uwaga-tlo);
  color: var(--uwaga-tekst); border-bottom: 1px solid var(--uwaga-ramka); font-size: var(--rozmiar-przycisk); line-height: 1.35; }
.ramka-problemu { align-self: stretch; display: flex; gap: var(--o-3); padding: var(--o-4); background: var(--problem-tlo); color: var(--problem-tekst); border-radius: var(--promien-panel); }
.ramka-problemu p { margin: 0 0 var(--o-3); }
.ramka-problemu p:last-child { margin-bottom: 0; }
.ramka-problemu .tresc-r { flex: 1; min-width: 0; }
.ramka-problemu .przycisk-tekst { color: var(--problem-tekst); }
.ramka-uwagi { background: var(--uwaga-tlo); color: var(--uwaga-tekst); border-radius: var(--promien-panel); padding: var(--o-2) var(--o-4); }
.ramka-uwagi ol, .kroki { padding-left: 1.3em; margin: var(--o-2) 0; }
.ramka-uwagi li, .kroki li { margin: var(--o-2) 0; }
.pow-stan { min-height: 1.2em; color: var(--tekst-2); }
.pow-stan:empty { display: none; }
.pow-stan.ok { color: var(--tekst); font-weight: var(--grubosc-mocna); background: var(--akcent-miekki); border-radius: var(--promien-przycisk); padding: var(--o-3) var(--o-4); }

/* ---------- przyciski ---------- */
.przycisk-glowny, .przycisk-drugi { min-height: var(--cel-glowny); border-radius: var(--promien-przycisk); font-size: var(--rozmiar-przycisk);
  font-weight: var(--grubosc-mocna); padding: 0 var(--o-5); display: inline-flex; align-items: center; justify-content: center; gap: var(--o-2); cursor: pointer; }
.przycisk-glowny { background: var(--akcent); color: var(--akcent-tekst); border: 0; }
.przycisk-drugi { background: var(--tlo-2); color: var(--tekst); border: 1px solid var(--ramka); }
.przycisk-glowny.pelny, .przycisk-drugi.pelny { width: 100%; }
.przycisk-tekst { min-height: var(--cel-min); border: 0; background: none; color: var(--tekst); font-size: var(--rozmiar-przycisk);
  text-decoration: underline; text-underline-offset: 4px; padding: 0 var(--o-2); text-align: left; cursor: pointer; display: inline-flex; align-items: center; gap: var(--o-1); }

/* ---------- logowanie ---------- */
.pole-kodu { width: 100%; min-height: 72px; border-radius: var(--promien-przycisk); border: 2px solid var(--ramka); background: var(--pixi-dymek); color: var(--tekst);
  font-family: var(--kroj-kod); font-size: min(var(--rozmiar-duzy), 8.4vw); letter-spacing: .12em; text-align: center; padding: 0 var(--o-3); text-transform: uppercase; }
.pole-kodu::placeholder { color: var(--tekst-2); opacity: 1; font-size: var(--rozmiar-meta); letter-spacing: .05em; text-transform: none; }
.pole-kodu.zly { border-color: var(--problem-tekst); border-width: 3px; }
.podpowiedz-pola { font-size: var(--rozmiar-meta); color: var(--tekst-2); }

/* ---------- stopka czatu: kompozytor (A + podpisy i nagrywanie stuknięciem z B), podgląd zdjęcia, panel nagrywania ---------- */
.stopka-czatu { container-type: inline-size; flex: none; background: var(--tlo-2); border-top: 1px solid var(--ramka); padding-bottom: env(safe-area-inset-bottom); }
.kompozytor { display: flex; align-items: flex-end; gap: var(--odstep-celow); padding: var(--o-2); }
.kompozytor .przycisk-podpis { min-width: var(--cel-glowny); min-height: var(--cel-glowny); }
.kompozytor .przycisk-podpis.glowny { background: var(--akcent); color: var(--akcent-tekst); }
.kompozytor .przycisk-podpis.glowny span { color: var(--akcent-tekst); }
/* Duża czcionka w telefonie (do 200%): pole pisania dostaje własny wiersz, przyciski Zdjęcie i Nagraj pod nim — szerokość ekranu < 14 „em” */
@container (width < 14em) {
  .kompozytor { flex-wrap: wrap; justify-content: space-between; }
  .kompozytor .pole { order: -1; flex: 1 1 100%; }
}
.pole { flex: 1; min-width: 0; min-height: var(--cel-glowny); max-height: 168px; resize: none; border-radius: var(--promien-pole); background: var(--tlo);
  border: 1.5px solid var(--ramka); padding: 17px 18px; font-size: var(--rozmiar-tekst); line-height: 1.3; color: var(--tekst); }
.pole::placeholder { color: var(--tekst-2); opacity: 1; }
.podglad { padding: var(--o-3) var(--o-2) 0; display: flex; flex-direction: column; gap: var(--o-3); max-height: 280px; overflow-y: auto; }
.chip { display: flex; align-items: flex-start; gap: var(--o-3); padding: 0 var(--o-2); }
.chip .miniatura { width: 112px; height: 84px; border-radius: 12px; flex: none; object-fit: cover; background: var(--tlo); border: 1px solid var(--ramka);
  display: flex; align-items: center; justify-content: center; color: var(--akcent); }
.chip .miniatura svg { width: 40px; height: 40px; }
.podglad-opis { font-size: var(--rozmiar-meta); color: var(--tekst-2); overflow-wrap: anywhere; }
.panel-nagrywania { padding: var(--o-4) var(--o-4) var(--o-3); display: flex; flex-direction: column; gap: var(--o-3); }
.nagr-gora { display: flex; align-items: center; gap: var(--o-3); font-size: var(--rozmiar-przycisk); }
.nagr-kropka { width: 14px; height: 14px; border-radius: 50%; background: var(--nagrywam); flex: none; box-shadow: 0 0 0 5px var(--akcent-miekki); }
.licznik { margin-left: auto; font-variant-numeric: tabular-nums; font-size: var(--rozmiar-tytul); font-weight: var(--grubosc-mocna); }
.fala.duza { flex: none; height: 48px; gap: 4px; }
.fala.duza i { width: 5px; background: var(--akcent); }
.nagr-rada { font-size: var(--rozmiar-tekst); }
.nagr-limit { font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.nagr-przyciski { display: flex; flex-wrap: wrap; gap: var(--o-3); } /* 1 : 1,6 jak w projekcie; przy dużej czcionce przyciski układają się jeden pod drugim */
.nagr-przyciski > * { flex: 1 1 0; min-width: max-content; }
.nagr-przyciski > :last-child { flex-grow: 1.6; }

/* ---------- arkusz „Wyślij zdjęcie” i okno potwierdzenia ---------- */
.arkusz-wrap { position: fixed; inset: 0; z-index: 20; }
.zaslona { position: absolute; inset: 0; background: var(--zaslona); }
.arkusz { position: absolute; left: 0; right: 0; bottom: 0; background: var(--tlo); border-radius: var(--promien-panel) var(--promien-panel) 0 0;
  padding: var(--o-3) var(--o-4) calc(var(--o-4) + env(safe-area-inset-bottom)); box-shadow: var(--cien); display: flex; flex-direction: column; gap: var(--o-3); max-height: 100%; overflow-y: auto; }
.uchwyt { align-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--ramka); }
.arkusz h2 { font-size: var(--rozmiar-tytul); font-weight: var(--grubosc-mocna); }
.zrodla { display: grid; grid-template-columns: 1fr 1fr; gap: var(--o-3); }
.zrodlo { min-height: 120px; border-radius: var(--promien-przycisk); border: 1.5px solid var(--ramka); background: var(--tlo-2); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: var(--o-2); font-size: var(--rozmiar-przycisk); font-weight: var(--grubosc-mocna); color: var(--tekst); cursor: pointer; }
.zrodlo .ikona-svg { width: 40px; height: 40px; color: var(--akcent); }
.dialog { position: fixed; inset: 0; z-index: 30; background: var(--zaslona); display: flex; align-items: flex-end; justify-content: center; padding: var(--o-4); }
.dialog-panel { background: var(--tlo); color: var(--tekst); border-radius: var(--promien-panel); padding: var(--o-5); width: 100%; max-width: 440px; box-shadow: var(--cien);
  margin-bottom: env(safe-area-inset-bottom); }
.dialog-panel p { margin: 0 0 var(--o-4); }
.dialog-przyciski { display: flex; gap: var(--o-3); }
.dialog-przyciski button { flex: 1; }
.komunikat { position: fixed; left: var(--o-4); right: var(--o-4); bottom: calc(env(safe-area-inset-bottom) + 112px); background: var(--tekst); color: var(--tlo);
  padding: var(--o-3) var(--o-4); border-radius: var(--promien-przycisk); box-shadow: var(--cien); z-index: 40; font-size: var(--rozmiar-przycisk); }

/* ---------- „Więcej”, powiadomienia, pomoc ---------- */
.lista { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.lista li { border-bottom: 1px solid var(--ramka); display: flex; align-items: center; }
.wiersz { flex: 1; min-width: 0; min-height: var(--cel-glowny); display: flex; align-items: center; gap: var(--o-4); padding: var(--o-2); border: 0; background: none;
  color: var(--tekst); font-size: var(--rozmiar-tekst); text-align: left; cursor: pointer; }
.wiersz > span { min-width: 0; overflow-wrap: anywhere; }
.wiersz .ikona-svg { color: var(--akcent); }
.wiersz small { display: block; font-size: var(--rozmiar-meta); color: var(--tekst-2); }
.wiersz small:empty { display: none; }
.wiersz[aria-current="true"] > span { font-weight: var(--grubosc-mocna); }
.lista .usun { flex: none; }
.przelacznik { display: grid; grid-template-columns: 1.35fr 1fr 1fr; gap: 4px; padding: 4px; border-radius: var(--promien-przycisk); background: var(--tlo-2); border: 1px solid var(--ramka); }
.przelacznik button { min-height: var(--cel-min); border: 0; border-radius: 14px; background: none; color: var(--tekst); font-size: var(--rozmiar-przycisk); cursor: pointer; padding: 0 var(--o-1); }
.przelacznik button { min-width: 0; overflow-wrap: anywhere; }
@container (width < 14em) { .przelacznik { grid-template-columns: 1fr; } } /* duża czcionka: trzy opcje jedna pod drugą */
.przelacznik button[aria-checked="true"] { background: var(--akcent-miekki); font-weight: var(--grubosc-mocna); box-shadow: inset 0 0 0 2px var(--akcent); }
.przyklad-podpis { font-size: var(--rozmiar-meta); color: var(--tekst-2); margin-bottom: calc(-1 * var(--o-2)); }
.przyklad-powiadomienia { border: 1px solid var(--ramka); background: var(--pixi-dymek); border-radius: 20px; padding: var(--o-3) var(--o-4); display: flex; gap: var(--o-3); box-shadow: var(--cien); }
.przyklad-powiadomienia .awatar { width: 36px; height: 36px; }
.przyklad-powiadomienia .awatar svg { width: 22px; height: 22px; }
.przyklad-powiadomienia b { display: block; font-size: var(--rozmiar-meta); }
.przyklad-powiadomienia p { font-size: var(--rozmiar-meta); }