/* KOLORY START. Wszystkie kolory strony stoją w tym jednym bloku. */
:root {
  color-scheme: light;
  --tlo: #f3f5fa;
  --papier: #fff;
  --tekst: #18203a;
  --szary: #5f6b85;
  --linia: #e3e7f0;
  --linia-slaba: #eef1f7;
  --linia-mocna: #c9d1e2;
  --akcent: #3d6bff;
  --akcent-ciemny: #2a54e0;
  --akcent-jasny: #ebf0ff;
  --akcent-blady: #f6f8ff;
  --akcent-srodek: #cfdbff;
  --akcent-gradient: linear-gradient(135deg, #5a85ff, #2f5cf0);
  --akcent-cien: rgba(61, 107, 255, .25);
  --boczny-tlo: linear-gradient(180deg, #1a2244, #11162c);
  --boczny-tekst: #c3cbe4;
  --boczny-mocny: #fff;
  --boczny-szary: #8a94b5;
  --boczny-hover: rgba(255, 255, 255, .08);
  --boczny-linia: rgba(255, 255, 255, .09);
  --boczny-aktywny-tlo: linear-gradient(135deg, #5a85ff, #2f5cf0);
  --boczny-aktywny-tekst: #fff;
  --boczny-liczba-tlo: rgba(255, 255, 255, .13);
  --boczny-liczba-tekst: #fff;
  --czytnik-tlo: #f7f8fc;
  --ok: #15803d;
  --ok-tlo: #e7f6ed;
  --zle: #c0322b;
  --zle-tlo: #fdecea;
  --uwaga: #b45309;
  --uwaga-tlo: #fef3e2;
  --cien-maly: 0 1px 2px rgba(20, 18, 50, .05), 0 1px 4px rgba(20, 18, 50, .05);
  --cien: 0 8px 28px rgba(20, 18, 50, .08);
}
/* KOLORY KONIEC */

/* Kolor kropki każdego sklepu. Ten sam sklep ma ten sam kolor z boku i na liście. */
.sklep-0 { --kolor-sklepu: #3b82f6; }
.sklep-1 { --kolor-sklepu: #ec4899; }
.sklep-2 { --kolor-sklepu: #f59e0b; }
.sklep-3 { --kolor-sklepu: #10b981; }
.sklep-4 { --kolor-sklepu: #8b5cf6; }
.sklep-5 { --kolor-sklepu: #f97316; }
.sklep-6 { --kolor-sklepu: #06b6d4; }
.sklep-wszystkie { --kolor-sklepu: conic-gradient(#3b82f6, #ec4899, #f59e0b, #10b981, #8b5cf6, #3b82f6); }

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--papier);
  color: var(--tekst);
  font: 15px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  overflow-wrap: anywhere;
  /* Starsze iPhone'y nie znają „anywhere” przy liczeniu szerokości, więc długie słowa łamie też to. */
  word-break: break-word;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--akcent); text-underline-offset: 3px; }
a:hover { color: var(--akcent-ciemny); }
button, input, textarea { font: inherit; }
strong { font-weight: 650; }
h1, h2, h3, h4 { margin: 0 0 12px; color: var(--tekst); line-height: 1.3; }
h1 { font-size: 26px; font-weight: 700; letter-spacing: -.025em; }
h2 { font-size: 19px; letter-spacing: -.01em; }
h3 { font-size: 16px; }
h4 { font-size: 14px; }
p { margin: 0 0 14px; }
ul { padding-left: 22px; }
dd { margin: 0; min-width: 0; }
dt { color: var(--szary); }
:where(a, button, input, textarea, summary, [tabindex="0"]):focus-visible { outline: 3px solid var(--akcent); outline-offset: -3px; }
main:focus { outline: none; }
button, .przycisk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  max-width: 100%;
  padding: 10px 16px;
  border: 1px solid transparent;
  border-radius: 10px;
  background: var(--akcent-gradient);
  box-shadow: 0 4px 14px var(--akcent-cien);
  color: #fff;
  line-height: 1.4;
  font-weight: 600;
  text-align: center;
  text-decoration: none;
  white-space: normal;
  overflow-wrap: anywhere;
  cursor: pointer;
}
button:hover, .przycisk:hover { color: #fff; background: var(--akcent-ciemny); }
.przycisk-drugi { color: var(--akcent); background: var(--papier); border-color: var(--linia); box-shadow: var(--cien-maly); }
.przycisk-drugi:hover { color: var(--akcent-ciemny); background: var(--akcent-jasny); }
summary { min-height: 44px; padding: 11px 0; cursor: pointer; font-weight: 600; }
summary:hover { color: var(--akcent); }
.do-tresci { position: absolute; z-index: 10; top: 8px; left: 8px; max-width: calc(100% - 16px); min-height: 44px; padding: 12px; background: var(--papier); transform: translateY(-200%); }
.do-tresci:focus { transform: translateY(0); }
.tylko-czytnik { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.drobne { color: var(--szary); font-size: 12.5px; line-height: 1.5; }
.nadtytul { margin: 0 0 8px; color: var(--szary); font-size: 12px; font-weight: 600; }
.wprowadzenie { max-width: 75ch; color: var(--szary); }
.naglowek-strony { margin-bottom: 28px; }
.adres-skrzynki { color: var(--szary); font-size: 13px; }
/* Historia klienta na stronie sprawy: dobrze widoczny guzik, po kliknięciu lista innych rozmów (Marek 20.10). */
.adres-z-tresci { margin: 6px 0 0; color: var(--szary); font-size: 13px; }
.historia-klienta { margin: 10px 0 0; }
.historia-klienta > summary { display: inline-flex; align-items: center; min-height: 44px; padding: 6px 14px; border-radius: 999px; background: var(--akcent-jasny); color: var(--akcent-ciemny); font-size: 14px; font-weight: 650; }
.historia-klienta > summary:hover { background: var(--akcent-srodek); color: var(--akcent-ciemny); }
.historia-klienta > summary { list-style: none; cursor: pointer; }
.historia-klienta > summary::-webkit-details-marker { display: none; }
.historia-klienta > summary::after { content: "▸"; margin-left: 8px; }
.historia-klienta[open] > summary::after { content: "▾"; }
.historia-klienta ul { margin: 8px 0 0; padding: 0; list-style: none; }
.historia-klienta li a { display: flex; flex-direction: column; gap: 2px; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--tekst); text-decoration: none; overflow-wrap: anywhere; }
.historia-klienta li a:hover { background: var(--akcent-blady); color: var(--tekst); }
.historia-klienta.pusta { padding: 10px 14px; border-radius: 12px; background: var(--uwaga-tlo); color: var(--uwaga); font-size: 14px; font-weight: 600; }
.powrot { display: inline-flex; align-items: center; min-height: 44px; margin-bottom: 14px; font-weight: 600; text-decoration: none; }
/* Na komputerze lista stoi obok rozmowy, więc „Wróć do listy” widać tylko na telefonie. */
.powrot.tylko-telefon { display: none; }

/* Pełnoekranowa poczta. Każda główna kolumna przewija się osobno. */
.aplikacja { height: 100vh; overflow: hidden; }
.aplikacja .ramka-aplikacji { display: grid; grid-template-columns: 230px minmax(0, 1fr); height: 100vh; }
.boczny { display: flex; flex-direction: column; gap: 22px; min-width: 0; height: 100vh; padding: 24px 12px 16px; overflow-y: auto; color: var(--boczny-tekst); background: var(--boczny-tlo); border-right: 1px solid var(--boczny-linia); scrollbar-width: thin; }
.marka { display: flex; flex-direction: column; min-width: 0; }
.boczny .marka { padding: 0 12px 4px; }
.marka strong { display: flex; align-items: center; gap: 10px; color: var(--tekst); font-size: 22px; letter-spacing: -.03em; }
.boczny .marka strong { color: var(--boczny-mocny); }
/* Znak skrzynki: kolorowy kwadracik przed nazwą. */
.marka strong::before { content: ""; flex: 0 0 auto; width: 28px; height: 28px; border-radius: 9px; background: var(--akcent-gradient); box-shadow: 0 4px 12px var(--akcent-cien); }
.marka span { margin-left: 38px; color: var(--szary); font-size: 12px; }
.boczny .marka span { color: var(--boczny-szary); }
.menu-widokow, .menu-sklepow, .menu-pomocnicze { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.boczny-link { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-width: 0; min-height: 44px; padding: 10px 12px; border-radius: 10px; color: var(--boczny-tekst); text-decoration: none; font-size: 14px; font-weight: 500; }
.boczny-link > span:first-child { min-width: 0; }
.boczny-link:hover { color: var(--boczny-mocny); background: var(--boczny-hover); }
.boczny-link[aria-current="page"] { color: var(--boczny-aktywny-tekst); background: var(--boczny-aktywny-tlo); box-shadow: 0 4px 14px var(--akcent-cien); font-weight: 650; }
.liczba-folderu { flex: 0 0 auto; min-width: 24px; padding: 1px 8px; border-radius: 999px; background: var(--boczny-liczba-tlo); color: var(--boczny-liczba-tekst); text-align: center; font-size: 12px; font-weight: 650; font-variant-numeric: tabular-nums; }
.menu-widokow .liczba-folderu { background: var(--akcent); color: #fff; }
[aria-current="page"] > .liczba-folderu, .menu-widokow [aria-current="page"] > .liczba-folderu { background: rgba(255, 255, 255, .24); color: #fff; }
.sklepy-duze h2 { margin: 0 12px 8px; color: var(--boczny-szary); font-size: 11px; font-weight: 650; letter-spacing: .08em; text-transform: uppercase; }
.menu-sklepow .boczny-link { font-size: 13px; padding-left: 12px; padding-right: 10px; }
/* Kropka w kolorze sklepu przed nazwą sklepu. */
.sklep > span:first-child { display: inline-flex; align-items: center; gap: 9px; }
.sklep > span:first-child::before { content: ""; flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--kolor-sklepu); }
/* Wybrany sklep jest jaśniejszy niż wybrany rodzaj rozmów, żeby dwa pełne kolory nie stały naraz. */
.menu-sklepow .boczny-link[aria-current="page"] { color: var(--boczny-mocny); background: var(--boczny-hover); box-shadow: inset 3px 0 0 var(--akcent); }
.menu-sklepow [aria-current="page"] > .liczba-folderu { background: var(--akcent); color: #fff; }
.sklepy-male { display: none; }
.boczny-dol { margin-top: auto; padding-top: 12px; border-top: 1px solid var(--boczny-linia); }
.wyloguj { margin: 10px 0 0; }
.wyloguj button { width: 100%; color: var(--boczny-tekst); background: transparent; border-color: var(--boczny-linia); box-shadow: none; }
.wyloguj button:hover { color: var(--boczny-mocny); background: var(--boczny-hover); }
.informacja-poczta { margin: 18px 10px 0; color: var(--boczny-szary); font-size: 11.5px; line-height: 1.5; }
.obszar-poczty { display: grid; grid-template-columns: 380px minmax(0, 1fr); min-width: 0; height: 100vh; overflow: hidden; }
.kolumna-listy { min-width: 0; height: 100vh; overflow-y: auto; background: var(--papier); border-right: 1px solid var(--linia); scrollbar-width: thin; }
.lista-naglowek { position: sticky; z-index: 2; top: 0; padding: 25px 20px 16px; background: rgba(255, 255, 255, .92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid var(--linia); }
.lista-tytul { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.lista-tytul h1, .lista-tytul h2 { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.02em; }
.liczba-na-liscie { flex: 0 0 auto; min-width: 30px; padding: 2px 10px; border-radius: 999px; background: var(--akcent-jasny); color: var(--akcent-ciemny); text-align: center; font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.lista-naglowek p { margin: 7px 0 0; color: var(--szary); font-size: 12px; }
.fb-widoki { display: flex; flex-wrap: wrap; gap: 4px 8px; margin-top: 10px; }
.fb-widoki a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 10px; border-radius: 10px; color: var(--szary); font-size: 13px; text-decoration: none; }
.fb-widoki a:hover, .fb-widoki a[aria-current="page"] { background: var(--akcent-jasny); color: var(--akcent-ciemny); }
.lista-rozmow { list-style: none; padding: 8px; margin: 0; }
.lista-rozmow > li { position: relative; min-width: 0; }
/* Cienka linia między rozmowami, odsunięta od kółka z literą. */
.lista-rozmow > li + li::before { content: ""; position: absolute; top: -1px; left: 58px; right: 12px; height: 1px; background: var(--linia-slaba); }
/* Messenger i komentarze: kwadracik do zaznaczania przed każdą rozmową i przyciski dla zaznaczonych. */
.lista-rozmow > li.z-wyborem { display: grid; grid-template-columns: 30px minmax(0, 1fr); align-items: start; }
.lista-rozmow > li.z-wyborem + li::before { left: 88px; }
.wybor-rozmowy { display: flex; justify-content: center; min-height: 44px; padding-top: 25px; cursor: pointer; }
.wybor-rozmowy input { width: 18px; height: 18px; margin: 0; accent-color: var(--akcent); cursor: pointer; }
.fb-zbiorczo { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 10px; }
.fb-zbiorczo a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 4px; font-size: 13px; }
.fb-zbiorczo .przycisk-drugi { padding: 8px 12px; font-size: 13px; }
.wiersz-rozmowy { display: grid; grid-template-columns: 8px 38px minmax(0, 1fr); gap: 9px; min-height: 44px; margin-bottom: 2px; padding: 15px 12px 15px 6px; border-radius: 12px; color: var(--tekst); text-decoration: none; }
.wiersz-rozmowy:hover { color: var(--tekst); background: var(--akcent-blady); }
.wiersz-rozmowy.otwarta { color: var(--tekst); background: var(--akcent-jasny); box-shadow: inset 3px 0 0 var(--akcent); }
.miejsce-kropki { padding-top: 15px; }
.kropka { display: block; width: 8px; height: 8px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 0 3px var(--akcent-jasny); }
.awatar { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 50%; color: #fff; font-size: 14px; font-weight: 700; line-height: 1; text-shadow: 0 1px 1px rgba(0, 0, 0, .12); }
.wiersz-rozmowy .awatar { width: 38px; height: 38px; font-size: 15px; }
.kolor-0 { background: linear-gradient(135deg, #7aa2ff, #4b6bfb); }
.kolor-1 { background: linear-gradient(135deg, #c084fc, #9353f0); }
.kolor-2 { background: linear-gradient(135deg, #34d3b0, #0f9f87); }
.kolor-3 { background: linear-gradient(135deg, #fdb15c, #ec7e1f); }
.kolor-4 { background: linear-gradient(135deg, #fb8bb5, #e2487f); }
.kolor-5 { background: linear-gradient(135deg, #5fd0f0, #1b97c9); }
.wiersz-tresc { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.wiersz-pierwszy { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; min-width: 0; }
.wiersz-adres { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 650; }
.wiersz-czas { flex: 0 0 auto; color: var(--szary); font-size: 11.5px; white-space: nowrap; }
.czekajaca .wiersz-czas { color: var(--akcent-ciemny); font-weight: 650; }
.wiersz-temat { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; }
.czekajaca .wiersz-temat { font-weight: 650; }
.wiersz-zajawka { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; max-height: 2.8em; overflow: hidden; color: var(--szary); font-size: 14px; line-height: 1.4; }
.wiersz-zajawka:empty { display: none; }
.wiersz-etykiety { display: flex; flex-wrap: wrap; align-items: center; gap: 5px 8px; margin-top: 3px; }
.domena-listy { display: inline-flex; align-items: center; gap: 6px; color: var(--szary); font-size: 11.5px; font-weight: 500; }
.domena-listy::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 50%; background: var(--kolor-sklepu, var(--linia-mocna)); }
.wiersz-etykiety .znaczek { padding: 1px 8px; font-size: 10.5px; }
.lista-stopka { margin: 0; padding: 14px 20px 20px; color: var(--szary); font-size: 12px; }
.pusta-lista { padding: 28px 20px; }
.pusta-lista h3 { font-size: 15px; font-weight: 500; color: var(--szary); }
.podglad-start { min-width: 0; height: 100vh; overflow-y: auto; background: var(--czytnik-tlo); }
.wybierz-rozmowe { display: flex; flex-direction: column; justify-content: center; align-items: center; min-height: 100%; padding: 40px; text-align: center; }
.strzalka-wyboru { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin-bottom: 20px; border-radius: 22px; background: var(--akcent-gradient); box-shadow: 0 12px 30px var(--akcent-cien); color: #fff; font-size: 32px; line-height: 1; }
.wybierz-rozmowe h2 { color: var(--tekst); font-size: 22px; font-weight: 650; }
.statystyki { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; width: 100%; max-width: 720px; margin: 28px 0 0; }
.statystyki > div { min-width: 0; padding: 20px 16px; border: 1px solid var(--linia); border-radius: 16px; background: var(--papier); box-shadow: var(--cien-maly); }
.statystyki dt { margin-bottom: 8px; font-size: 12px; font-weight: 600; }
.statystyki dd { font-size: 24px; font-weight: 700; letter-spacing: -.02em; color: var(--akcent-ciemny); }
.statystyki > div:nth-child(2) dd { color: var(--uwaga); }
.statystyki > div:nth-child(3) dd { color: var(--ok); }
.statystyki .opis-statystyki { margin-top: 5px; font-size: 11.5px; font-weight: 400; letter-spacing: 0; color: var(--szary); }
.podglad-sprawy { min-width: 0; height: 100vh; overflow-y: auto; background: var(--czytnik-tlo); }
.rozmowa { min-width: 0; padding: 20px 28px 36px; }
.naglowek-rozmowy { padding-bottom: 20px; margin-bottom: 18px; border-bottom: 1px solid var(--linia); }
.naglowek-rozmowy h1 { font-size: 25px; }
.klient-rozmowy { margin: 0 0 6px; font-size: 15px; font-weight: 600; }
.naglowek-rozmowy .adres-skrzynki { margin: 0; }
.naglowek-sekcji { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 6px 14px; margin-bottom: 12px; }
.naglowek-sekcji h2 { margin: 0; }
/* Mail jak rozmowa w Gmailu (Marek 22.10.2026): temat raz na górze strony, wiadomości jedna pod drugą bez ramki,
   oddzielone cienką linią, wszystkie rozwinięte. Przy nadawcy „do kogo” jak w Gmailu, nasze odpowiedzi mają plakietkę.
   Treść stoi w jednej linii z imieniem nadawcy, na prawo od kółka, pismem jak w Gmailu. */
.wiadomosc { padding: 16px 4px 4px; }
.wiadomosc + .wiadomosc { border-top: 1px solid var(--linia); }
.wiadomosc.automatyczna { background: var(--tlo); }
/* Rozmowa przewija się w swoim okienku. Odwrócony układ sprawia, że okienko otwiera się na dole, na najnowszej
   wiadomości, bez żadnego skryptu. Wiadomości siedzą w jednym środkowym bloku, więc ich kolejność się nie zmienia. */
.przewijane { display: flex; flex-direction: column-reverse; max-height: 60vh; overflow-y: auto; }
.watek-maili { margin: 0 0 20px; border-top: 1px solid var(--linia); border-bottom: 1px solid var(--linia); background: var(--papier); }
/* Rozmowa z Facebooka jak w Messengerze: klient po lewej w szarych dymkach, my po prawej w niebieskich. */
.czat { margin: 0 0 20px; padding: 14px 16px 16px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); }
.czas-czatu { margin: 14px 0 8px; color: var(--szary); font-size: 11.5px; text-align: center; }
.czas-czatu:first-child { margin-top: 0; }
.dymek-wiersz { display: flex; align-items: flex-end; gap: 8px; margin: 0 0 4px; }
.dymek-wiersz.od-nas { justify-content: flex-end; }
.dymek-wiersz .awatar, .awatar-miejsce { flex: 0 0 28px; width: 28px; height: 28px; font-size: 12px; }
.dymek-kolumna { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; min-width: 0; max-width: min(78%, 560px); }
.od-nas .dymek-kolumna { align-items: flex-end; }
.dymek { margin: 0; padding: 8px 14px; border-radius: 18px; background: #f0f2f5; color: var(--tekst); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 15px/1.45 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.od-nas .dymek { background: var(--akcent); color: #fff; }
.dymek-nadawca { padding: 0 14px; color: var(--szary); font-size: 12px; }
.naglowek-wiadomosci { display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; align-items: start; gap: 12px; margin-bottom: 8px; }
.naglowek-wiadomosci .awatar { width: 40px; height: 40px; font-size: 16px; }
.nadawca-wiadomosci { display: flex; flex-direction: column; gap: 1px; min-width: 0; font-size: 14px; overflow-wrap: anywhere; }
.data-wiadomosci { color: #5f6368; font-size: 12px; text-align: right; white-space: nowrap; }
.metka-wiadomosci { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #e8f0fe; color: #1a56db; font-size: 11.5px; font-weight: 600; }
.metka-wiadomosci.szara { background: var(--tlo); color: var(--szary); }
.wiadomosc > :not(.naglowek-wiadomosci) { margin-left: 52px; }
.tresc-wiadomosci { margin-top: 0; margin-bottom: 0; white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; color: #202124; font: 14.5px/1.55 Arial, "Helvetica Neue", Helvetica, sans-serif; }
.zalaczniki { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--linia); }
.zalaczniki ul { margin: 0; }
.zalaczniki li { margin: 8px 0; font-size: 13px; }
.pliki-odpowiedzi { margin: 14px 0; }
.pliki-odpowiedzi ul { margin: 0 0 12px; padding-left: 18px; }
.pliki-odpowiedzi li { margin: 6px 0; font-size: 13px; overflow-wrap: anywhere; }
.pliki-odpowiedzi li button { margin-left: 8px; padding: 2px 12px; font-size: 12px; }
.pliki-odpowiedzi input[type="file"] { display: block; margin-top: 6px; max-width: 100%; font-size: 13px; }
.propozycja-pliku { margin: 0 0 12px; padding: 8px 12px; border-left: 3px solid currentColor; font-size: 13px; overflow-wrap: anywhere; }
.propozycja-pliku p { margin: 0 0 6px; }
.szczegoly { margin-top: 4px; font-size: 12px; }
.szczegoly summary { min-height: 0; padding: 4px 0 8px; color: var(--szary); }
@media (pointer: coarse) { .szczegoly summary { min-height: 44px; padding: 11px 0; } } /* palcem łatwo trafić */
.szczegoly > :last-child:not(summary) { margin-bottom: 0; }
.dane { margin: 8px 0 16px; }
.dane > div { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 5px 12px; padding: 7px 0; }
.miejsce-odpowiedzi { padding: 18px 20px; margin-top: 22px; border: 1px solid var(--akcent-srodek); border-radius: 14px; background: var(--papier); box-shadow: var(--cien-maly); }
.miejsce-odpowiedzi h3 { margin-bottom: 10px; color: var(--akcent-ciemny); }
.miejsce-odpowiedzi > p { margin: 0; color: var(--szary); }
/* Odpowiedź i jej stan: czeka (można cofnąć), wysłana, błąd. */
.formularz-odpowiedzi { display: flex; flex-direction: column; gap: 12px; margin: 0; }
.formularz-odpowiedzi > label { font-weight: 600; overflow-wrap: anywhere; }
.formularz-odpowiedzi textarea, #szkic-do-bs { width: 100%; min-height: 180px; padding: 12px 14px; border: 1px solid var(--linia-mocna); border-radius: 10px; color: var(--tekst); background: var(--papier); font: 15.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; resize: vertical; }
.formularz-odpowiedzi textarea:focus, #szkic-do-bs:focus { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-jasny); }
.formularz-odpowiedzi > p { margin: 0; }
.wybor { display: flex; align-items: center; gap: 10px; font-weight: 500; cursor: pointer; }
.wybor input { flex: none; width: 20px; height: 20px; margin: 0; accent-color: var(--akcent); }
.guziki { display: flex; flex-wrap: wrap; gap: 10px; }
.stan-odpowiedzi { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--akcent-srodek); border-radius: 12px; background: var(--akcent-blady); }
.stan-odpowiedzi.stan-wyslana { border-color: #b9e5c8; background: var(--ok-tlo); }
.stan-odpowiedzi.stan-blad, .stan-odpowiedzi.stan-pominieta { border-color: #f4c2bd; background: var(--zle-tlo); }
.stan-odpowiedzi.stan-wynik_nieznany { border-color: #f6d7a6; background: var(--uwaga-tlo); }
.stan-odpowiedzi p { margin: 0 0 10px; }
.stan-odpowiedzi > :last-child { margin-bottom: 0; }
.tresc-odpowiedzi { margin: 0 0 12px; padding: 12px 14px; border-radius: 10px; background: var(--papier); white-space: pre-wrap; overflow-wrap: anywhere; word-break: break-word; font: 14.5px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.szkic-ai { margin: 0 0 14px; padding: 14px 16px; border: 1px solid var(--akcent-srodek); border-radius: 12px; background: var(--akcent-blady); }
.szkic-ai p { margin: 0 0 10px; }
.szkic-ai > :last-child { margin-bottom: 0; }
.szkic-ai ul { margin: 0 0 10px; padding-left: 20px; overflow-wrap: anywhere; }
.szkic-ai.szkic-tylko_marek, .szkic-ai.szkic-zly_link, .szkic-ai.szkic-blad { border-color: #f6d7a6; background: var(--uwaga-tlo); }
.formularz-szkicu { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 0; }
.formularz-szkicu label { font-weight: 600; }
.formularz-szkicu input, .formularz-szkicu textarea { width: 100%; resize: vertical; padding: 10px 12px; border: 1px solid var(--linia-mocna); border-radius: 10px; color: var(--tekst); background: var(--papier); font: inherit; }
.formularz-szkicu input:focus, .formularz-szkicu textarea:focus { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-jasny); outline: none; }
.formularz-szkicu p { margin: 0; }
.podglad-odpowiedzi { margin: 0 0 14px; padding: 16px; border: 1px solid var(--linia); border-radius: 12px; background: var(--tlo); }
.podglad-odpowiedzi .dane { margin-top: 0; }
.guzik-archiwum { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: 14px; }
.zakupy-klienta { min-width: 0; padding: 24px; background: var(--tlo); border-top: 1px solid var(--linia); font-size: 14px; }
.zakupy-klienta > h2 { font-size: 17px; font-weight: 700; }
.panel, .zamowienie, .pusty-stan { min-width: 0; padding: 20px; border: 1px solid var(--linia); border-radius: 14px; background: var(--papier); box-shadow: var(--cien-maly); }
.panel > :last-child, .pusty-stan > :last-child { margin-bottom: 0; }
.zamowienie { margin-bottom: 16px; }
.zamowienie > form { margin: 16px 0 0; }
/* Zwrot pieniędzy: osobny blok na dole karty i czerwony obrys zamiast niebieskiego guzika, bo zwrotu nie da się cofnąć. */
.zwrot { margin: 6px 0 14px; padding: 16px; border: 1px solid #f4c2bd; border-radius: 12px; background: #fffafa; }
.zwrot h4 { margin-bottom: 6px; }
.zwrot .komunikat { margin: 0 0 12px; padding: 10px 14px; border-radius: 10px; }
.zwrot .komunikat:last-child { margin-bottom: 0; }
.zwrot .drobne { margin: 0 0 12px; }
.zwrot button { color: var(--zle); background: var(--papier); border-color: var(--zle); box-shadow: none; }
.zwrot button:hover { color: #fff; background: var(--zle); }
.zamowienie .nadtytul { color: var(--akcent-ciemny); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.naglowek-zamowienia { padding-bottom: 16px; border-bottom: 1px solid var(--linia); }
.naglowek-zamowienia h3 { font-size: 15px; }
.naglowek-zamowienia > :last-child { margin: 12px 0 0; }
.etykiety { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.kwota { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }
.znaczek { display: inline-block; max-width: 100%; padding: 3px 9px; border-radius: 999px; color: var(--szary); background: var(--linia-slaba); font-size: 11px; font-weight: 650; line-height: 1.5; }
.ok { color: var(--ok); background: var(--ok-tlo); }
.zle { color: var(--zle); background: var(--zle-tlo); }
.uwaga { color: var(--uwaga); background: var(--uwaga-tlo); }
.dobrze-tekst { color: var(--ok); }
.zle-tekst { color: var(--zle); }
.uwaga-tekst { color: var(--uwaga); }
.odpowiedzi-zakupu { margin: 0; }
.odpowiedzi-zakupu > div { padding: 14px 0; border-bottom: 1px solid var(--linia-slaba); }
.odpowiedzi-zakupu dt { margin-bottom: 6px; font-size: 12.5px; }
.odpowiedzi-zakupu dd { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
/* „Tak” i „Nie” w karcie zakupu jako kolorowe plakietki, żeby odpowiedź było widać od razu. */
.odpowiedzi-zakupu .dobrze-tekst, .odpowiedzi-zakupu .zle-tekst { padding: 2px 12px; border-radius: 999px; font-size: 13.5px; }
.odpowiedzi-zakupu .dobrze-tekst { background: var(--ok-tlo); }
.odpowiedzi-zakupu .zle-tekst { background: var(--zle-tlo); }
.produkty { padding-top: 18px; }
.produkty ul { list-style: none; padding: 0; margin: 0; }
.produkty li { display: flex; flex-direction: column; gap: 3px; padding: 9px 0; }
.historia-wysylki { list-style: none; padding: 0; margin-bottom: 0; }
.historia-wysylki li { display: flex; flex-direction: column; gap: 3px; padding: 12px 0; border-top: 1px solid var(--linia); }
.szukanie-w-sprawie { margin-top: 22px; }
.szukanie-w-sprawie h2 { font-size: 17px; }
.szukanie-w-sprawie > p { color: var(--szary); font-size: 13px; }
.formularz { display: flex; flex-direction: column; gap: 16px; width: 100%; max-width: 560px; margin: 0; }
.formularz label { display: flex; flex-direction: column; gap: 7px; min-width: 0; font-weight: 600; }
.formularz input:not([type="hidden"]) { min-width: 0; width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--linia-mocna); border-radius: 10px; color: var(--tekst); background: var(--papier); font-size: 16px; }
.formularz input:not([type="hidden"]):focus { border-color: var(--akcent); box-shadow: 0 0 0 4px var(--akcent-jasny); }
.formularz > p { margin: -7px 0 0; }
.pusty-stan { margin: 16px 0; }
.pusty-stan p { color: var(--szary); }
.komunikat { margin-bottom: 20px; padding: 18px 20px; border: 1px solid currentColor; border-radius: 14px; }
.komunikat.ok { border-color: #b9e5c8; background: linear-gradient(135deg, #e7f6ed, #f3fbf6); }
.komunikat.zle { border-color: #f4c2bd; background: linear-gradient(135deg, #fdecea, #fff6f5); }
.komunikat.uwaga { border-color: #f6d7a6; background: linear-gradient(135deg, #fef3e2, #fffaf2); }
.komunikat h2 { color: inherit; }
.komunikat > :last-child { margin-bottom: 0; }

/* Strony pomocnicze korzystają z całej przestrzeni za paskiem bocznym. */
.strona-pomocnicza { min-width: 0; height: 100vh; padding: 32px 36px; overflow-y: auto; background: var(--czytnik-tlo); }
.panel-szukania { max-width: 720px; }
.pomoc-pusta { max-width: 680px; margin-top: 32px; color: var(--szary); }
.wyniki { max-width: 850px; margin-top: 32px; }
.lista-skrzynek { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 18px; }
.skrzynka-stan .naglowek-sekcji { align-items: flex-start; }
.skrzynka-stan h2 { font-size: 16px; }
.wymaga-uwagi { border-left: 4px solid var(--zle); }
.folder-stan { margin: 10px 0 18px; padding: 12px; border-radius: 10px; background: var(--tlo); }
.folder-stan h3 { font-size: 14px; }
.folder-stan .dane { margin: 0; }

/* Logowanie, kod i błędy mają prosty, wyśrodkowany układ. */
.samodzielna { background: radial-gradient(circle at 15% 0%, var(--akcent-jasny), transparent 55%), radial-gradient(circle at 100% 100%, var(--akcent-jasny), transparent 45%), var(--tlo); }
.samodzielna .ramka-aplikacji { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 100vh; padding: 32px 20px; }
.marka-wejscia { width: 100%; max-width: 560px; margin-bottom: 24px; }
.strona-wejscia { width: 100%; max-width: 560px; }
.logowanie, .ekran-bledu { padding: 32px; box-shadow: var(--cien); }
.logowanie .wprowadzenie { margin-bottom: 24px; }

@media (min-width: 1300px) {
  .statystyki { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
  .podglad-sprawy { display: grid; grid-template-columns: minmax(0, 1fr) 320px; overflow: hidden; }
  .podglad-sprawy > .rozmowa, .podglad-sprawy > .zakupy-klienta { height: 100vh; overflow-y: auto; scrollbar-width: thin; }
  .podglad-sprawy > .rozmowa { padding: 20px 24px 36px; }
  .podglad-sprawy > .zakupy-klienta { padding: 24px 14px; border-top: 0; border-left: 1px solid var(--linia); }
  .zakupy-klienta .zamowienie, .zakupy-klienta .panel, .zakupy-klienta .pusty-stan { padding: 15px; }
  .zakupy-klienta .dane > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
}

@media (min-width: 1000px) and (max-width: 1399px) {
  .rozmowa .naglowek-wiadomosci { grid-template-columns: 40px minmax(0, 1fr); }
  .rozmowa .data-wiadomosci { grid-column: 2; justify-self: end; text-align: right; }
}

@media (max-width: 999px) {
  .aplikacja { height: auto; overflow: visible; }
  .aplikacja .ramka-aplikacji { display: block; height: auto; min-height: 100vh; }
  .boczny { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 12px; height: auto; padding: 12px 16px 8px; overflow: visible; border-right: 0; border-bottom: 1px solid var(--boczny-linia); }
  .boczny .marka { grid-column: 1; grid-row: 1; padding: 0; }
  .marka strong { font-size: 21px; }
  .menu-widokow { grid-column: 1 / -1; grid-row: 2; flex-direction: row; gap: 6px; max-width: 100%; flex-wrap: wrap; }
  .boczny > .menu-widokow + .menu-widokow { grid-row: 3; }
  .menu-widokow .boczny-link { flex: 0 0 auto; gap: 7px; min-height: 44px; padding: 10px 12px; white-space: nowrap; font-size: 13px; }
  .sklepy-duze { display: none; }
  .sklepy-male { display: block; grid-column: 1 / -1; grid-row: 4; min-width: 0; }
  .sklepy-male summary { font-size: 13px; }
  .sklepy-male .menu-sklepow { padding-bottom: 8px; }
  .menu-sklepow .boczny-link { font-size: 14px; }
  .boczny-dol { display: contents; }
  .boczny .wyloguj { grid-column: 2; grid-row: 1; margin: 0; align-self: center; }
  .wyloguj button { font-size: 13px; padding: 10px 12px; }
  .menu-pomocnicze { grid-column: 1 / -1; grid-row: 5; flex-direction: row; flex-wrap: wrap; gap: 4px 12px; }
  .menu-pomocnicze .boczny-link { padding: 10px 0; font-size: 12.5px; }
  .menu-pomocnicze .boczny-link[aria-current="page"] { padding-left: 10px; padding-right: 10px; }
  .informacja-poczta { display: none; }
  .obszar-poczty { display: block; height: auto; overflow: visible; }
  .kolumna-listy { height: auto; min-height: 50vh; overflow: visible; border-right: 0; }
  .lista-naglowek { padding: 20px 18px 14px; }
  .lista-tytul h1, .lista-tytul h2 { font-size: 20px; }
  .wiersz-rozmowy { padding-top: 15px; padding-bottom: 15px; }
  .wiersz-adres, .wiersz-temat, .wiersz-zajawka { font-size: 14px; }
  .widok-start .podglad-start { display: none; }
  .widok-sprawa .kolumna-listy { display: none; }
  .podglad-sprawy { height: auto; overflow: visible; }
  .rozmowa { padding: 12px 16px 28px; }
  .naglowek-rozmowy h1 { font-size: 24px; }
  .zakupy-klienta { padding: 24px 16px; }
  .strona-pomocnicza { height: auto; min-height: 60vh; padding: 24px 20px; overflow: visible; }
  .powrot.tylko-telefon { display: inline-flex; }
}

@media (max-width: 600px) {
  /* Tabela (np. Szkice AI na stronie stanu) nie wypycha strony: w razie potrzeby przewija się sama. */
  table { display: block; max-width: 100%; overflow-x: auto; }
  .boczny { padding-left: 12px; padding-right: 12px; }
  .lista-rozmow { min-width: 0; padding: 6px; }
  .lista-naglowek { padding-left: 16px; padding-right: 16px; }
  .rozmowa { padding-left: 12px; padding-right: 12px; }
  .wiadomosc { padding: 16px 4px 4px; }
  .wiadomosc > :not(.naglowek-wiadomosci) { margin-left: 0; }
  .naglowek-wiadomosci { grid-template-columns: 40px minmax(0, 1fr); }
  .data-wiadomosci { grid-column: 2; justify-self: end; text-align: right; }
  .dane > div { grid-template-columns: minmax(0, 1fr); gap: 3px; }
  .zakupy-klienta { padding: 24px 12px; }
  .panel, .zamowienie, .pusty-stan { padding: 18px; }
  .strona-pomocnicza { padding: 24px 16px; }
  .lista-skrzynek { grid-template-columns: minmax(0, 1fr); }
  .samodzielna .ramka-aplikacji { padding: 24px 16px; }
  .logowanie, .ekran-bledu { padding: 24px; }
}
/* Facebook: zdjęcia z wiadomości i podgląd reklamy pod komentarzem (obrazki idą przez naszą stronę). */
.fb-zalaczniki { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px; margin-top: 12px; }
.fb-zalaczniki p { flex-basis: 100%; margin: 0; }
.fb-zdjecie { display: inline-block; }
.fb-zdjecie img { display: block; max-width: min(100%, 360px); max-height: 360px; border: 1px solid var(--linia); border-radius: 10px; background: var(--tlo); }
.fb-reklama { display: flex; gap: 14px; align-items: flex-start; margin: 14px 0 6px; padding: 12px; border: 1px solid var(--linia); border-radius: 12px; background: var(--tlo); }
.fb-reklama-obrazek { flex: none; }
.fb-reklama-obrazek img { display: block; width: 120px; max-height: 180px; object-fit: cover; border-radius: 8px; }
.fb-reklama-tekst { flex: 1; min-width: 0; }
.fb-reklama-tekst p { margin: 0; }
.fb-reklama-tekst pre { margin: 6px 0 0; white-space: pre-wrap; overflow-wrap: anywhere; font: 13.5px/1.55 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.fb-reklama-tekst details { margin-top: 6px; font-size: 13px; }
@media (max-width: 600px) {
  .fb-reklama { flex-direction: column; }
  .fb-reklama-obrazek img { width: 100%; max-height: 260px; }
}
.ocena-szkicu { display: flex; gap: 6px; margin: 8px 0; }
.ocena-szkicu button { padding: 4px 9px; font-size: 12px; }
.ocena-szkicu button[aria-pressed="true"] { background: var(--ok-tlo); border: 2px solid currentColor; font-weight: 700; }
label[for="szkic-do-bs"] { display: block; margin: 0 0 8px; font-weight: 600; }