/* Moduł "czat": pełna strona /czat, kompaktowe okno w panelu pływającym i znaczek nieprzeczytanych. Klasy z prefiksem cz-. */

/* ---------- znaczek na przycisku pływającym ---------- */
.cz-znaczek { position: absolute; top: -6px; right: -6px; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pelny); background: var(--tekst); color: #fff; font-size: var(--t-xs); font-weight: 800; display: grid; place-items: center; border: 2px solid var(--tlo); pointer-events: none; }

/* ---------- układ strony ---------- */
.cz-strona { max-width: 860px; margin: 0 auto; }
.cz-karta { padding: 0; overflow: hidden; }
.cz-uklad { display: grid; grid-template-columns: 360px minmax(0, 1fr); gap: var(--o-4); height: clamp(480px, calc(100dvh - 150px), 820px); }
.cz-lista { display: flex; flex-direction: column; padding: var(--o-4); min-height: 0; min-width: 0; }
.cz-lista__glowa { display: flex; align-items: center; gap: var(--o-2); flex-wrap: wrap; margin-bottom: var(--o-3); }
.cz-lista__tytul { margin: 0; font-size: var(--t-xl); flex: 1; }
.cz-szukaj { width: 100%; min-height: 40px; padding: 8px 14px; background: #fff; border: 1px solid var(--ramka-mocna); border-radius: var(--r-pelny); margin-bottom: var(--o-2); }
.cz-szukaj:focus { outline: 3px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.cz-filtry { margin-bottom: var(--o-3); gap: 6px; }
.cz-filtry .k-chip { font-size: var(--t-xs); padding: 4px 10px; min-height: 32px; }
.cz-lista-info { color: var(--tekst-2); font-size: var(--t-s); }
.cz-rozmowy { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; min-height: 0; display: grid; gap: var(--o-1); align-content: start; }
.cz-rozmowy__el { width: 100%; display: flex; gap: var(--o-3); align-items: flex-start; text-align: left; background: none; border: 1px solid transparent; border-radius: var(--r-m); padding: 10px; cursor: pointer; }
.cz-rozmowy__el:hover { background: var(--karta-2); }
.cz-rozmowy__el--aktywny { background: var(--akcent-tlo); border-color: #ffd2a3; }
.cz-rozmowy__tekst { flex: 1; min-width: 0; display: grid; gap: 2px; }
.cz-rozmowy__wiersz { display: flex; justify-content: space-between; align-items: center; gap: var(--o-2); min-width: 0; }
.cz-rozmowy__nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); }
.cz-rozmowy__czas { flex: none; font-size: var(--t-xs); color: var(--tekst-2); }
.cz-rozmowy__podglad { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-s); color: var(--tekst-2); min-width: 0; }
.cz-rozmowy__el--nowe .cz-rozmowy__podglad { color: var(--tekst); font-weight: 600; }
.cz-rozmowy__licznik { flex: none; min-width: 22px; height: 22px; padding: 0 6px; border-radius: var(--r-pelny); background: var(--akcent); color: var(--na-akcencie); font-size: var(--t-xs); font-weight: 800; display: grid; place-items: center; }
.cz-rozmowy__tekst .k-przyklad { justify-self: start; }
.cz-rozmowy__stan { font-size: var(--t-xs); font-weight: 700; color: var(--akcent-tekst); }
.cz-awatar { flex: none; width: 38px; height: 38px; border-radius: 50%; background: var(--akcent-tlo); border: 1px solid #ffd2a3; color: var(--akcent-tekst); display: grid; place-items: center; font-size: var(--t-xs); font-weight: 800; }
.cz-awatar--zespol { background: var(--akcent); border-color: var(--akcent); color: var(--na-akcencie); }
.cz-okno { background: var(--karta); border: 1px solid var(--ramka); border-radius: var(--r-l); box-shadow: var(--cien-1); min-width: 0; min-height: 0; display: flex; overflow: hidden; }
.cz-okno > .k-pusty { margin: auto; }
.cz-okno > .cz-rozmowa { flex: 1; }
.cz-powrot { display: none; }

/* ---------- okno rozmowy ---------- */
.cz-rozmowa { display: flex; flex-direction: column; min-width: 0; min-height: 0; height: clamp(440px, calc(100dvh - 300px), 680px); background: var(--karta); position: relative; }
.cz-okno .cz-rozmowa { height: 100%; }
.cz-rozmowa--upusc::after { content: "Upuść plik tutaj"; position: absolute; inset: 8px; border: 2px dashed var(--akcent); border-radius: var(--r-l); background: rgba(255, 240, 224, 0.92); display: grid; place-items: center; font-weight: 800; color: var(--akcent-tekst); z-index: 5; }
.cz-glowa { display: flex; align-items: center; gap: var(--o-3); padding: var(--o-3) var(--o-4); border-bottom: 1px solid var(--ramka); flex-wrap: wrap; }
.cz-glowa__tytul { flex: 1; min-width: 0; display: grid; line-height: 1.3; }
.cz-glowa__tytul strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-glowa__opis { font-size: var(--t-xs); color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-polaczenie { display: inline-flex; align-items: center; gap: 6px; font-size: var(--t-xs); color: var(--tekst-2); white-space: nowrap; }
.cz-polaczenie__kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--tekst-3); }
.cz-polaczenie--ok .cz-polaczenie__kropka { background: var(--ok); }
.cz-polaczenie--brak { color: var(--blad); }
.cz-polaczenie--brak .cz-polaczenie__kropka { background: var(--blad); }
.cz-mini-pasek { display: flex; justify-content: space-between; align-items: center; gap: var(--o-2); padding: 0 0 var(--o-2); font-size: var(--t-xs); }

.cz-log-opakowanie { position: relative; flex: 1; min-height: 0; display: flex; }
.cz-log { flex: 1; min-height: 0; overflow-y: auto; overflow-x: hidden; padding: var(--o-4); display: flex; flex-direction: column; gap: var(--o-1); overscroll-behavior: contain; }
.cz-log:focus-visible { outline-offset: -3px; }
.cz-starsze { align-self: center; margin-bottom: var(--o-3); flex: none; }
.cz-stan { margin: auto; display: grid; gap: var(--o-3); justify-items: center; text-align: center; }
.cz-nowe { position: absolute; left: 50%; bottom: var(--o-3); transform: translateX(-50%); background: var(--tekst); color: #fff; border: 0; border-radius: var(--r-pelny); padding: 8px 16px; font-size: var(--t-s); font-weight: 700; cursor: pointer; box-shadow: var(--cien-2); }
.cz-nowe:hover { background: #000; }
.cz-pisze { min-height: 0; height: 0; overflow: hidden; padding: 0 var(--o-4); font-size: var(--t-xs); color: var(--tekst-2); font-style: italic; }
.cz-pisze--widoczne { height: auto; min-height: 22px; padding-bottom: 2px; }
.cz-uwaga { padding: 0 var(--o-4); }
.cz-uwaga .k-komunikat { margin: var(--o-2) 0 var(--o-3); }

/* ---------- wiadomości ---------- */
.cz-dzien { align-self: center; margin: var(--o-3) 0 var(--o-2); padding: 3px 12px; border-radius: var(--r-pelny); background: var(--karta-2); border: 1px solid var(--ramka); color: var(--tekst-2); font-size: var(--t-xs); font-weight: 700; }
.cz-wiad { display: flex; flex-direction: column; max-width: 100%; margin-top: 2px; }
.cz-wiad > .cz-dzien { align-self: center; }
.cz-wiad--moja { align-items: flex-end; }
.cz-wiad--obca { align-items: flex-start; }
.cz-wiad--notatka { align-items: stretch; }
.cz-dymek { max-width: min(78%, 560px); min-width: 0; padding: 9px 14px 6px; border-radius: 18px; line-height: 1.5; overflow-wrap: anywhere; }
.cz-wiad--moja .cz-dymek { background: var(--akcent); color: var(--na-akcencie); border-bottom-right-radius: 5px; }
.cz-wiad--obca .cz-dymek { background: #fff; border: 1px solid var(--ramka); border-bottom-left-radius: 5px; box-shadow: var(--cien-1); }
.cz-wiad--notatka .cz-dymek { max-width: 100%; background: var(--ostrz-tlo); border: 1px dashed #d9c36a; border-radius: var(--r-m); }
.cz-powitanie .cz-dymek { background: var(--akcent-tlo); border-color: #ffd2a3; }
.cz-autor { font-size: var(--t-xs); font-weight: 800; color: var(--akcent-tekst); margin-bottom: 1px; }
.cz-notatka-znak { font-size: var(--t-xs); font-weight: 800; color: #7a5a00; margin-bottom: 2px; }
.cz-tresc { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.cz-tresc--usunieta { font-style: italic; color: var(--tekst-2); }
.cz-wiad--moja .cz-tresc--usunieta { color: #4a3000; }
.cz-wiad--usunieta .cz-dymek { opacity: 0.8; }
.cz-link { color: inherit; font-weight: 600; text-decoration: underline; }
.cz-wiad--obca .cz-link, .cz-powitanie .cz-link { color: var(--akcent-tekst); }
.cz-meta { display: flex; gap: var(--o-2); align-items: center; justify-content: flex-end; flex-wrap: wrap; font-size: var(--t-xs); margin-top: 2px; opacity: 0.8; }
.cz-wiad--obca .cz-meta { color: var(--tekst-2); opacity: 1; }
.cz-status { font-weight: 700; }
.cz-status:empty { display: none; }
.cz-status--przeczytana { color: #3a2500; }
.cz-akcje { display: flex; gap: var(--o-1); margin-top: 2px; }
.cz-wiad--moja .cz-akcje { justify-content: flex-end; }
.cz-akcja { background: none; border: 0; padding: 2px 6px; font-size: var(--t-xs); font-weight: 700; color: var(--tekst-2); cursor: pointer; border-radius: var(--r-s); }
.cz-akcja:hover { color: var(--akcent-tekst); background: var(--akcent-tlo); }
.cz-akcja--usun:hover { color: var(--blad); background: var(--blad-tlo); }
@media (hover: hover) {
  .cz-akcje { opacity: 0; transition: opacity var(--ruch); }
  .cz-wiad:hover .cz-akcje, .cz-akcje:focus-within { opacity: 1; }
}
.cz-edycja-blok { display: grid; gap: var(--o-2); min-width: min(280px, 60vw); }
.cz-edycja { width: 100%; min-height: 64px; resize: vertical; padding: 8px 10px; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); background: #fff; color: var(--tekst); }
.cz-edycja-akcje { display: flex; justify-content: flex-end; gap: var(--o-2); }

.cz-zalaczniki { display: grid; gap: var(--o-2); margin-top: var(--o-1); }
.cz-obraz-link { display: block; line-height: 0; border-radius: var(--r-m); overflow: hidden; border: 1px solid rgba(0, 0, 0, 0.12); }
.cz-obraz { display: block; max-width: 100%; max-height: 240px; width: auto; height: auto; min-width: 60px; min-height: 60px; object-fit: cover; background: var(--karta-2); }
.cz-plik { display: flex; align-items: center; gap: var(--o-2); padding: 8px 10px; border-radius: var(--r-m); background: rgba(255, 255, 255, 0.7); color: var(--tekst); text-decoration: none; border: 1px solid rgba(0, 0, 0, 0.12); }
.cz-plik:hover { background: #fff; color: var(--tekst); }
.cz-plik__ikona { flex: none; width: 34px; height: 34px; border-radius: var(--r-s); background: var(--tekst); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.cz-plik__opis { display: grid; min-width: 0; }
.cz-plik__nazwa { font-weight: 700; font-size: var(--t-s); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-plik__rozmiar { font-size: var(--t-xs); color: var(--tekst-2); }

/* ---------- formularz ---------- */
.cz-formularz { border-top: 1px solid var(--ramka); padding: var(--o-3) var(--o-4) var(--o-2); display: grid; gap: var(--o-2); background: var(--karta); }
.cz-formularz--notatka { background: var(--ostrz-tlo); border-top-style: dashed; border-top-color: #d9c36a; }
.cz-wiersz { display: flex; gap: var(--o-2); align-items: flex-end; }
.cz-pole { flex: 1; min-width: 0; min-height: 44px; max-height: 150px; resize: none; padding: 10px 14px; border: 1px solid var(--ramka-mocna); border-radius: 22px; background: #fff; line-height: 1.4; }
.cz-pole:focus { outline: 3px solid var(--akcent); outline-offset: 0; border-color: var(--akcent); }
.cz-ikona { flex: none; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ramka-mocna); background: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer; color: var(--akcent-tekst); font-weight: 700; }
.cz-ikona:hover { background: var(--akcent-tlo); }
.cz-wyslij { flex: none; }
.cz-blad:empty { display: none; }
.cz-blad .k-komunikat { margin: 0; }
.cz-formularz--notatka ~ .cz-podpowiedz { background: var(--ostrz-tlo); }
.cz-podpowiedz { margin: 0; padding: 0 var(--o-4) var(--o-2); font-size: var(--t-xs); color: var(--tekst-2); background: var(--karta); }
.cz-tryb { display: flex; gap: var(--o-1); padding: 3px; border-radius: var(--r-pelny); background: var(--karta-2); border: 1px solid var(--ramka); width: fit-content; max-width: 100%; }
.cz-tryb__opcja { position: relative; cursor: pointer; }
.cz-tryb__opcja input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.cz-tryb__opcja span { display: block; padding: 5px 14px; border-radius: var(--r-pelny); font-size: var(--t-xs); font-weight: 700; color: var(--tekst-2); }
.cz-tryb__opcja input:checked + span { background: var(--tekst); color: #fff; }
.cz-tryb__opcja input:focus-visible + span { outline: 3px solid var(--akcent); outline-offset: 2px; }
.cz-szybkie { display: flex; gap: var(--o-2); overflow-x: auto; padding-bottom: 2px; scrollbar-width: thin; }
.cz-szybka { flex: none; max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 5px 12px; border-radius: var(--r-pelny); border: 1px solid var(--ramka-mocna); background: #fff; font-size: var(--t-xs); cursor: pointer; }
.cz-szybka:hover { background: var(--akcent-tlo); border-color: #ffd2a3; }
.cz-szybka--edytuj { border-style: dashed; color: var(--tekst-2); }

.cz-zal { display: flex; gap: var(--o-2); flex-wrap: wrap; }
.cz-zal__el { display: flex; align-items: center; gap: var(--o-2); padding: 4px 6px 4px 4px; border: 1px solid var(--ramka-mocna); border-radius: var(--r-m); background: #fff; max-width: 100%; }
.cz-zal__el--blad { border-color: var(--blad); background: var(--blad-tlo); }
.cz-zal__miniatura { width: 40px; height: 40px; object-fit: cover; border-radius: var(--r-s); flex: none; }
.cz-zal__ikona { flex: none; width: 40px; height: 40px; border-radius: var(--r-s); background: var(--tekst); color: #fff; display: grid; place-items: center; font-size: 10px; font-weight: 800; }
.cz-zal__opis { display: grid; min-width: 0; max-width: 200px; }
.cz-zal__nazwa { font-size: var(--t-xs); font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-zal__rozmiar { font-size: var(--t-xs); color: var(--tekst-2); }
.cz-zal__el--blad .cz-zal__rozmiar { color: var(--blad); }
.cz-zal__usun { flex: none; width: 28px; height: 28px; border-radius: 50%; border: 0; background: transparent; font-size: 1.2rem; line-height: 1; cursor: pointer; color: var(--tekst-2); }
.cz-zal__usun:hover { background: var(--blad-tlo); color: var(--blad); }

/* ---------- wybór klienta (nowa rozmowa) ---------- */
.cz-wybor { list-style: none; margin: 0; padding: 0; max-height: 300px; overflow-y: auto; display: grid; gap: var(--o-1); }
.cz-wybor__el { width: 100%; display: flex; align-items: center; gap: var(--o-3); text-align: left; background: none; border: 1px solid var(--ramka); border-radius: var(--r-m); padding: 8px 10px; cursor: pointer; }
.cz-wybor__el:hover { background: var(--karta-2); }
.cz-wybor__el > span:nth-child(2) { flex: 1; min-width: 0; display: grid; }
.cz-wybor__mail { font-size: var(--t-xs); color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; }
.cz-wybor__pusto { color: var(--tekst-2); padding: var(--o-3); }

/* ---------- panel pływający ---------- */
.panel__tresc.cz-panel-tresc { padding: var(--o-3); display: flex; flex-direction: column; }
.cz-rozmowa--mini { height: min(390px, 52vh); }
.cz-rozmowa--mini .cz-log { padding: var(--o-2); }
.cz-rozmowa--mini .cz-dymek { max-width: 88%; }
.cz-rozmowa--mini .cz-formularz { padding: var(--o-2) 0 0; }
.cz-rozmowa--mini .cz-uwaga { padding: 0; }
.cz-rozmowa--mini .cz-pisze { padding: 0 var(--o-2); }
.cz-rozmowa--mini .cz-podpowiedz { padding: 2px 0 0; }
.cz-rozmowa--mini .cz-wyslij { padding: 10px 14px; }
.cz-panel-info { display: grid; gap: var(--o-2); }
.cz-panel-opis { margin: 0; color: var(--tekst-2); font-size: var(--t-s); }
.cz-panel-el { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--ramka); border-radius: var(--r-m); background: #fff; text-decoration: none; color: var(--tekst); font-size: var(--t-s); }
.cz-panel-el span { color: var(--tekst-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cz-panel-el:hover { background: var(--akcent-tlo); color: var(--tekst); }

/* ---------- telefon: jeden widok naraz ---------- */
@media (max-width: 820px) {
  .cz-uklad { grid-template-columns: minmax(0, 1fr); height: clamp(420px, calc(100dvh - 200px), 820px); }
  .cz-uklad[data-widok="lista"] .cz-okno { display: none; }
  .cz-uklad[data-widok="rozmowa"] .cz-lista { display: none; }
  .cz-powrot { display: inline-flex; }
  .cz-dymek { max-width: 88%; }
  .cz-rozmowa { height: clamp(380px, calc(100dvh - 330px), 680px); }
  .cz-strona .strona-naglowek p { display: none; }
}
@media (max-width: 420px) {
  .cz-glowa { padding: var(--o-2) var(--o-3); gap: var(--o-2); }
  .cz-glowa .cz-polaczenie { display: none; }
  .cz-log { padding: var(--o-3); }
  .cz-formularz { padding: var(--o-2) var(--o-3); }
  .cz-podpowiedz { display: none; }
  .cz-wyslij { padding: 10px 14px; }
}
@media (prefers-reduced-motion: reduce) {
  .cz-akcje { transition: none; }
}
.cz-menu-znaczek { display: inline-grid; place-items: center; min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px; border-radius: var(--r-pelny); background: var(--akcent, #ff7a00); color: #fff; font-size: 11px; font-weight: 800; vertical-align: middle; }