/* ============================================================================
   9-telefon/4-projekty-zadania-czat.css — TELEFON: PROJEKTY, ZADANIA, NOTATKI, ROZMOWA
   ----------------------------------------------------------------------------
   Część domu telefonu (K18, v14, 26.09.2026) — zasady i kolejność plików: 9-telefon/1-podstawa.css.
   Działa wyłącznie przy :root[data-ui="mobile"].
   ============================================================================ */

/* ============================ 1. PROJEKTY — LISTA I KARTA PROJEKTU ======== */
/* Markup: public/js/widoki/projekty-lista.js (renderProjectCardMobile); karta projektu — widoki/projekty-karta.js (v15, style 10c-projekty-karta.css). */
:root[data-ui="mobile"] .project-main-grid { gap: 0; }
:root[data-ui="mobile"] .project-main-grid > .toolbar { padding: var(--s-1) 0 var(--s-3); }
:root[data-ui="mobile"] .project-cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; padding: 0; }
:root[data-ui="mobile"] .project-main-grid.is-card-mode .pager { padding: var(--s-3) 4px 0; border: 0; background: transparent; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui="mobile"] .project-main-grid .pager .projekty-kolejne { width: 100%; min-height: 48px; }   /* POPR-n11: kciukiem, na całą szerokość */
:root[data-ui="mobile"] .project-main-grid .pager > [data-projekty-kolejne-miejsce] { flex: 1 1 100%; }
/* v15 P9: karta listy (renderProjectCardMobile): numer · czat z liczbą · kwota „razem” | nazwa (2 linie) | klient · norma, etap, status. */
.mkarta { display: grid; gap: 6px; padding: var(--s-3); border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); color: var(--text); cursor: pointer; transition: transform 140ms cubic-bezier(0.23, 1, 0.32, 1); -webkit-tap-highlight-color: transparent; }
.mkarta:active { transform: scale(.985); }
.mkarta:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.mkarta-gora { display: flex; align-items: flex-start; gap: var(--s-2); min-width: 0; }
.mkarta-nr { flex: none; color: var(--accent-strong); font-size: var(--t-sm); font-weight: 700; line-height: 22px; font-variant-numeric: tabular-nums; }
.mkarta-czat { display: inline-flex; flex: none; align-items: center; gap: 2px; color: var(--accent-strong); font-size: var(--t-xs); font-weight: 700; line-height: 22px; }
.mkarta-czat .icon { width: 14px; height: 14px; }
.mkarta-kwota { display: grid; justify-items: end; min-width: 0; margin-left: auto; font-size: var(--t-md); font-weight: 700; text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mkarta-kwota :is(.kwota-brak, .kwota-w-przygotowaniu) { color: var(--text-muted); font-size: var(--t-sm); font-weight: 500; line-height: 22px; white-space: normal; }
.mkarta-kwota small { font-size: var(--t-xs); font-weight: 600; white-space: normal; }
.mkarta-nazwa { margin: 0; font-size: var(--t-md); font-weight: 600; line-height: 1.28; letter-spacing: -0.005em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mkarta-dane { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-2) var(--s-3); min-width: 0; }
.mkarta-klient { flex: 1 1 100%; min-width: 0; max-width: 100%; overflow: hidden; color: var(--text-muted); font-size: var(--t-sm); text-overflow: ellipsis; white-space: nowrap; }
:root[data-ui="mobile"][data-telefon-poziomo] .project-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* ============================ 2. EKRAN PROJEKTU (telefon i komputer, DEC-06) ==== */
.mgrupa { border-radius: var(--r-lg); background: var(--surface); overflow: hidden; }
/* Panel „Dodaj etap” ustawia skrypt (position: fixed, lewa krawędź = prawa krawędź przycisku − szerokość panelu, z marginesem
   od ekranu). Dawne „right: 0; left: auto” zasłaniało tę pozycję: na stronie projektu (komputer) menu wisiało przy prawej
   krawędzi ekranu, nad kwotami, zamiast pod przyciskiem; na telefonie dotykało krawędzi ekranu (przegląd E1, 27.09). */
.mwiersz { position: relative; display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 16px; }
.mwiersz + .mwiersz::before { content: ""; position: absolute; top: 0; right: 0; left: 60px; height: 1px; background: var(--kreska-wlos, var(--line)); }
.mwiersz-tekst { display: grid; min-width: 0; }
.mwiersz-tekst strong { font-size: var(--t-md); font-weight: 600; }
.mwiersz-tekst small { color: var(--text-muted); font-size: var(--t-sm); }

/* Etapy w ekranie projektu: lista wierszy w białej grupie, kropka koloru etapu zamiast paska. */
:root[data-ui] .mprojekt-etapy .tile-stage-list { display: block; border-radius: var(--r-lg); background: var(--surface); overflow: visible; }
:root[data-ui] .mprojekt-etapy .tile-stage-list > .tile-stage-item { position: relative; display: block; max-width: none; min-width: 0; border: 0; border-radius: 0; background: transparent; overflow: visible; }
:root[data-ui] .mprojekt-etapy .tile-stage-item + .tile-stage-item::before { content: ""; position: absolute; top: 0; right: 0; left: 40px; height: 1px; background: var(--kreska-wlos, var(--line)); }
:root[data-ui] .mprojekt-etapy .tile-stage-accent { position: absolute; top: 22px; left: 16px; width: 10px; height: 10px; border-radius: 50%; background: var(--stage); }
:root[data-ui] .mprojekt-etapy .tile-stage-main { padding: 12px 4px 12px 40px; }
:root[data-ui] .mprojekt-etapy .tile-stage-name { font-size: var(--t-md); font-weight: 600; }
:root[data-ui] .mprojekt-etapy .tile-stage-sub { margin-top: 2px; gap: 10px; color: var(--text-muted); }
:root[data-ui] .mprojekt-etapy .tile-stage-count { font-size: var(--t-sm); }
:root[data-ui] .mprojekt-etapy .tile-menu-btn { width: 40px; height: 40px; border-radius: var(--r); }
:root[data-ui] .mprojekt-etapy .tile-constr-name { font-size: var(--t-base); }
:root[data-ui] .mprojekt-etapy .tile-stage-empty { padding: 16px; color: var(--text-muted); }
:root[data-ui="mobile"] .tile-menu-panel { border: 0; border-radius: var(--r-lg); box-shadow: 0 12px 32px -8px color-mix(in srgb, var(--text) 30%, transparent); }
:root[data-ui="mobile"] .tile-menu-panel button { min-height: 44px; font-size: var(--t-base); font-weight: 500; }
:root[data-ui] .mprojekt-etapy :is(.tile-stage-row, .tile-design-head, .tile-constr-item) { min-width: 0; }
/* Strzałki rozwijania designów / ofert: ikona zamiast znaku „⌄". */
:root[data-ui="mobile"] :is(.tile-design-chevron, .tile-stage-chevron),
:root:not([data-ui="mobile"]) .mprojekt-etapy :is(.tile-design-chevron, .tile-stage-chevron) { display: inline-grid; place-items: center; width: 20px; height: 20px; color: var(--text-muted); }
:root[data-ui="mobile"] :is(.tile-design-chevron, .tile-stage-chevron) > .icon,
:root:not([data-ui="mobile"]) .mprojekt-etapy :is(.tile-design-chevron, .tile-stage-chevron) > .icon { width: 18px; height: 18px; }
:root[data-ui="mobile"] .tile-design-group.open .tile-design-chevron, :root:not([data-ui="mobile"]) .mprojekt-etapy .tile-design-group.open .tile-design-chevron { transform: rotate(180deg); }
/* Wnętrze etapu to lista wierszy z włosową kreską — bez szarych kart w białej grupie.
   Wiersz oferty / designu: nazwa, pod nią liczba konstrukcji; kwota, strzałka i ⋮ po prawej w jednej linii
   (wcześniej ⋮ spadał do drugiej linii, bo cztery elementy nie mieściły się w 310 px). */
:root[data-ui] .mprojekt-etapy .tile-stage-item.open .tile-constr-wrap { margin: 8px 0 0; }
:root[data-ui] .mprojekt-etapy .tile-constr-list { gap: 0; }
:root[data-ui] .mprojekt-etapy :is(.tile-design-group, .tile-constr-item) { position: relative; border: 0; border-radius: 0; background: transparent; }
:root[data-ui] .mprojekt-etapy .tile-constr-list > :is(.tile-design-group, .tile-constr-item)::before,
:root[data-ui] .mprojekt-etapy .tile-constr-sublist > .tile-constr-item + .tile-constr-item::before { content: ""; position: absolute; top: 0; right: 0; left: 0; height: 1px; background: var(--kreska-wlos, var(--line)); }
:root[data-ui] .mprojekt-etapy .tile-design-head { display: grid; grid-template-columns: minmax(0, 1fr) auto 20px 40px; grid-template-rows: auto auto; column-gap: 6px; row-gap: 1px; align-items: center; align-content: center; min-height: 56px; padding: 6px 0; border-radius: 0; background: transparent; }
:root[data-ui] .mprojekt-etapy .tile-design-label { grid-column: 1; grid-row: 1; align-self: end; font-size: var(--t-base); font-weight: 600; }
:root[data-ui] .mprojekt-etapy .tile-design-count { grid-column: 1; grid-row: 2; align-self: start; color: var(--text-muted); font-size: var(--t-sm); }
:root[data-ui] .mprojekt-etapy .tile-design-cost { grid-column: 2; grid-row: 1 / 3; margin: 0; font-size: var(--t-base); font-weight: 600; }
:root[data-ui] .mprojekt-etapy .tile-design-chevron { grid-column: 3; grid-row: 1 / 3; margin: 0; }
:root[data-ui] .mprojekt-etapy .tile-design-head > .tile-menu { grid-column: 4; grid-row: 1 / 3; margin: 0; }
:root[data-ui] .mprojekt-etapy .tile-constr-sublist { gap: 0; padding: 0 0 6px 12px; }
:root[data-ui] .mprojekt-etapy .tile-constr-item { gap: 0; padding-right: 0; }
:root[data-ui] .mprojekt-etapy .tile-constr-item:hover { background: transparent; }
:root[data-ui] .mprojekt-etapy .tile-constr-open { min-height: 52px; padding: 6px 6px 6px 0; }
:root[data-ui] .mprojekt-etapy .tile-constr-cost { font-size: var(--t-base); font-weight: 600; }

/* ============================ 3. ZADANIA ================================== */
/* Markup: public/js/zadania/akcje-zadan-i-notatki.js (renderZnZadania). Widok lista / szczegół ustawia public/js/ui/aplikacja-mobilna.js §7.
   Na telefonie jedno naraz: lista zadań albo szczegół/formularz na cały ekran z „‹ Zadania".
   Przycisk „Nowe zadanie" pod listą zastępuje pływające „+" (klika ten sam przycisk). */
:root[data-ui="mobile"] .zn-two { display: block; }
/* Zakładki (Moje / Zlecone / Gotowe), przełącznik widoku i pasek zapisanych filtrów chowają się nad szczegółem. Rodzeństwo
   „~”, nie „+”: od paska filtrów (.fz-pasek, zadania/filtry-zadan.js) między .zn-sub a .zn-two reguła z „+” przestała działać. */
:root[data-ui="mobile"] .zn-two[data-mobilny-widok="lista"] > .zn-detail,
:root[data-ui="mobile"] .zn-two[data-mobilny-widok="szczegol"] > .zn-tree,
:root[data-ui="mobile"] :is(.zn-sub, .fz-pasek):has(~ .zn-two[data-mobilny-widok="szczegol"]) { display: none; }
:root[data-ui="mobile"] .zn-tree { max-height: none; overflow: visible; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-ui="mobile"] .zn-tree-top { flex-direction: row; align-items: center; gap: 8px; padding: 12px 0 10px; border: 0; }
:root[data-ui="mobile"] .zn-tree-top > .tree-search { order: -1; flex: 1 1 auto; min-width: 0; }
/* Sortowanie (lista z wyszukiwaniem — pole tekstowe ma domyślnie ~220 px) bierze najwyżej 40 % wiersza (mieści „Nazwa A–Z”); resztę dostaje
   szukajka. Dotąd sortowanie zajmowało 223 z 358 px, a z „Szukaj zadania…” zostawało „Szukaj za” (przegląd E1, 27.09). */
:root[data-ui="mobile"] .zn-tree-top-row { flex: 0 1 40%; min-width: 0; flex-wrap: nowrap; }
:root[data-ui="mobile"] .zn-tree-top-row > .combo { flex: 1 1 auto; min-width: 0; }
:root[data-ui="mobile"] .zn-tree-top-row .combo-input { width: 100%; text-overflow: ellipsis; }
/* Zapas na szerszy krój zastępczy (zanim wczyta się DM Sans albo na telefonie bez niego): „Szukaj zadania…” mieści się
   w całości na 360–390 px, bez ucięcia do „Szukaj z” (tura 3 E1, 27.09). */
:root[data-ui="mobile"] .zn-tree-top > .tree-search input { text-overflow: ellipsis; }
:root[data-ui="mobile"] .zn-tree-top select.zn-sort-select { width: auto; min-height: 42px; height: 42px; padding-left: 14px; border-radius: var(--r-lg); background-color: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); font-size: var(--t-base); font-weight: 500; }
:root[data-ui="mobile"] .zn-tree-body { overflow: visible; padding: 4px 0; border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] .zn-tree-body > .todo-empty { padding: 36px 20px; }
:root[data-ui="mobile"] .zn-group { min-height: 48px; padding: 10px 16px; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }
:root[data-ui="mobile"] .zn-tree-body > .zn-group:not(:first-child) { border-top: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"] .zn-group:hover { background: transparent; }
/* Tura 4 (26.09): tytuł był ucięty po kilku słowach (w jednym rzędzie z licznikami, awatarami i „+"), a terminu
   w wierszu nie było. Teraz: pełny tytuł (do 2 linii), pod nim termin, postęp, osoby i „+ podzadanie". */
:root[data-ui="mobile"] .todo-node { flex-wrap: wrap; row-gap: 4px; min-height: 52px; margin: 0; padding: 8px 12px 8px 12px; border-radius: 0; }
:root[data-ui="mobile"] .todo-node:hover, :root[data-ui="mobile"] .todo-node.is-sel { background: transparent; box-shadow: none; }
:root[data-ui="mobile"] .todo-node:active { background: var(--surface-2); }
:root[data-ui="mobile"] .todo-node-title { flex: 1 1 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; white-space: normal; overflow-wrap: anywhere; font-size: var(--t-md); line-height: 1.3; }
:root[data-ui="mobile"] .todo-node-act { opacity: 1; }
:root[data-ui="mobile"] .todo-node-meta { display: flex; flex: 1 1 100%; align-items: center; gap: 8px; min-width: 0; padding-left: 46px; }   /* = strzałka 22 + odstęp 8 + kropka 8 + odstęp 8: termin pod tytułem */
:root[data-ui="mobile"] .todo-node-meta > .todo-node-act { margin-left: auto; }
:root[data-ui="mobile"] .todo-node-termin { display: inline-flex; flex: none; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; font-variant-numeric: tabular-nums; }
:root[data-ui="mobile"] .todo-node-termin.is-over { color: var(--danger); }
:root[data-ui="mobile"] .todo-kids { margin-left: 34px; }
/* Na ekranie Zadania „+ Nowe zadanie" przejmuje pływający „+". W oknie „Zadania projektu" pływającego „+" nie ma
   (okno go zasłania), więc tam przycisk pod listą zostaje — inaczej nie dało się dodać drugiego zadania (tura 4). */
:root[data-ui="mobile"] .zn-tree .zn-tree-add { display: none; }

/* Szczegół zadania: nagłówek na tle ekranu, opis w białej grupie, akcje pod spodem. */
:root[data-ui="mobile"] .zn-detail { display: block; overflow: visible; padding: 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; }
:root[data-ui="mobile"] .zn-detail > .zn-wstecz { min-height: 40px; margin: 0 0 4px -6px; padding: 0 8px 0 0; font-size: var(--t-md); font-weight: 500; color: var(--accent); }
:root[data-ui="mobile"] .zn-detail .todo-d-head { align-items: center; margin: 0 4px 6px; }
:root[data-ui="mobile"] .zn-detail .todo-d-title { font-size: var(--t-xl); font-weight: 700; letter-spacing: -0.015em; }
:root[data-ui="mobile"] .todo-pill { padding: 0; background: transparent; color: var(--text); font-size: var(--t-sm); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
:root[data-ui="mobile"] .todo-pill::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--ton); }
:root[data-ui="mobile"] .zn-detail .todo-d-meta { gap: 6px 8px; margin: 0 4px 12px; padding: 0; border: 0; font-size: var(--t-base); }
:root[data-ui="mobile"] .zn-detail .todo-d-tools { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; width: 100%; margin: 8px 0 0; }
:root[data-ui="mobile"] .zn-detail .todo-d-tools > .button { justify-content: center; min-height: 44px; border: 0; }
:root[data-ui="mobile"] .zn-detail .todo-d-tools > .button.ghost { background: var(--btn-2); color: var(--text); }
:root[data-ui="mobile"] .zn-detail .todo-block { margin: 0; padding: 14px 16px 16px; border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] .todo-block-lbl { color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }
:root[data-ui="mobile"] .todo-foot { flex-direction: column; align-items: stretch; margin-top: 12px; } :root[data-ui="mobile"] .task-modal :is(.todo-detail, .todo-block-main, .todo-desc-form) { flex: 0 0 auto; }   /* okno Zadania projektu: kolumna przewija się sama — bloki nie zwijają się do 0 i nie nakładają przycisków */
/* Jeden pod drugim — „Oznacz jako niegotowe" nie mieści się w pół szerokości ekranu. */
:root[data-ui="mobile"] .todo-foot-acts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; margin: 0; }
:root[data-ui="mobile"] .todo-foot-acts > .button { justify-content: center; min-height: var(--stopka-btn-h); border-radius: var(--r-lg); font-size: var(--t-md); }
:root[data-ui="mobile"] .zn-detail .todo-dz { margin: 10px 4px 0; padding: 0; border: 0; font-size: var(--t-sm); }

/* Formularz zadania: tytuł i pola w białej grupie, akcje jak stopka okna. */
:root[data-ui="mobile"] .zn-detail > .zn-form { padding: 14px 16px 16px; border-radius: var(--grupa-r); background: var(--surface); }
:root[data-ui="mobile"] .zn-form-sub, :root[data-ui="mobile"] .zn-flbl { color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }
:root[data-ui="mobile"] .zn-head { padding-bottom: 8px; border-color: var(--kreska-wlos); }
:root[data-ui="mobile"] .zn-form input.zn-h-title:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]) { min-height: 0; padding: 4px 0; border: 0; border-radius: 0; background: transparent; box-shadow: none; font-size: var(--t-lg); font-weight: 700; }
:root[data-ui="mobile"] .zn-fields { grid-template-columns: minmax(0, 1fr); gap: 12px; margin: 12px 0; }
:root[data-ui="mobile"] .zn-isel { min-height: 46px; border: 1px solid var(--pole-ramka); border-radius: var(--r); background-color: var(--pole-tlo); box-shadow: none; }
:root[data-ui="mobile"] .zn-form-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
:root[data-ui="mobile"] .zn-form-actions > .button { justify-content: center; min-height: var(--stopka-btn-h); border-radius: var(--r-lg); font-size: var(--t-md); }
:root[data-ui="mobile"] .zn-form .todo-dz { border-color: var(--kreska-wlos); }

/* ============================ 4. NOTATKI — w 4c-notatki.css (v15-b5) ============================ */

/* ============================ 5. ROZMOWA (czat projektu, wiadomości prywatne) ==== */
/* Markup: public/js/czat/okno-rozmowy.js renderChatPanel. Tło ekranu, wątki jako chipy (aktywny ciemny), tytuł i osoby w jednym
   pasku bez kresek, dymki: moje jasnoniebieskie, cudze białe. Na telefonie nie ma najechania kursorem —
   „Odpowiedz" i „Zleć jako zadanie" pokazują się po stuknięciu w dymek (public/js/ui/aplikacja-mobilna.js §8).
   Własny awatar przy moich dymkach jest na telefonie ukryty (to zawsze ta sama osoba — ja). */
:root[data-ui="mobile"] .project-chat-panel,
:root[data-ui="mobile"] .project-chat-main { background: var(--tlo-telefonu); }
:root[data-ui="mobile"] .chat-thread-rail { border: 0; background: var(--tlo-telefonu); }
:root[data-ui="mobile"] .chat-thread-rail-head { min-height: 36px; padding: 4px 8px 0 20px; border: 0; color: var(--text-muted); font-size: var(--t-sm); font-weight: 600; }
:root[data-ui="mobile"] .chat-thread-rail-head .icon-button { width: 36px; height: 36px; border-radius: 50%; background: var(--surface); color: var(--accent); }
:root[data-ui="mobile"] .chat-thread-rail-list { gap: 8px; padding: 6px 16px 10px; scrollbar-width: none; }
:root[data-ui="mobile"] .chat-thread-item { flex: none; width: auto; height: 32px; padding: 0 12px; border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); color: var(--text); font-size: var(--t-sm); font-weight: 500; white-space: nowrap; }
:root[data-ui="mobile"] .chat-thread-item.is-active { background: var(--text); box-shadow: none; color: var(--surface); }
:root[data-ui="mobile"] .chat-thread-item .chat-thread-badge { min-width: 18px; height: 18px; background: var(--accent); font-size: var(--t-xs); }
:root[data-ui="mobile"] .project-chat-title { min-height: 56px; padding: 6px 8px 6px 20px; border-bottom: 1px solid var(--kreska-wlos); background: var(--surface); }
:root[data-ui="mobile"] .project-chat-title span:first-child { font-size: var(--t-md); }
:root[data-ui="mobile"] .project-chat-title span:last-child { font-size: var(--t-xs); font-weight: 500; }
:root[data-ui="mobile"] .project-chat-people { padding: 6px 12px 6px 0; border-bottom: 1px solid var(--kreska-wlos); background: var(--surface); }
/* v15-b6 CZ8 (wzór): na telefonie pionowo nagłówek rozmowy = „‹” | tytuł | „N os. ⚙” — awatary schodzą (widać je w „N os.”). */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .project-chat-people .project-people-summary { display: none; }
:root[data-ui="mobile"] .project-chat-people .avatar-stack .avatar + .avatar { margin-left: 0; }
:root[data-ui="mobile"] .project-chat-people .avatar { box-shadow: 0 0 0 2px var(--tlo-telefonu); }
:root[data-ui="mobile"] .project-chat-history { gap: 6px; padding: 12px 12px 16px; background: var(--tlo-telefonu); }
:root[data-ui="mobile"] .chat-message.own > .avatar,
:root[data-ui="mobile"] .chat-message.own > .user-badge { display: none; }
:root[data-ui="mobile"] .chat-message .avatar { width: 28px; height: 28px; font-size: var(--t-xs); }
/* Kształt i kolor dymków ma już komputer (4-widoki/17-czat.css, W2) — telefon dokłada tylko szerokość, wcięcie i pismo. */
:root[data-ui="mobile"] .chat-bubble { max-width: 80%; padding: 8px 12px 6px; font-size: var(--t-base); }
:root[data-ui="mobile"] .chat-sender { font-size: var(--t-xs); font-weight: 600; }
:root[data-ui="mobile"] .chat-stamp { font-size: var(--t-xs); }
:root[data-ui="mobile"] .chat-bubble-actions { position: static; justify-content: flex-end; gap: 6px; max-height: 0; overflow: hidden; opacity: 0; transition: none; }
:root[data-ui="mobile"] .chat-message[data-makcje] .chat-bubble-actions { max-height: 52px; margin: 0 0 6px; opacity: 1; }
:root[data-ui="mobile"] .chat-act-btn { width: 44px; height: 44px; }   /* ZK4: cel 44 px także zanim wiersz akcji się rozwinie (było 30 × 30) */
:root[data-ui="mobile"] .chat-message[data-makcje] .chat-act-btn { display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--surface); color: var(--accent); }   /* v15-b6: 44 px (było 40×36) */
:root[data-ui="mobile"] .chat-quote { padding-block: 6px; }
/* ZK7c: załącznik i pozycje jego menu („Otwórz”, „Zapisz”) — pole dotyku 44 px (było 36 i 35 px). */
:root[data-ui="mobile"] :is(.chat-attachment, .chat-attachment-action) { min-height: 44px; }
:root[data-ui="mobile"] .project-chat-compose { gap: 8px; padding: 8px 12px 10px; border-top: 1px solid var(--kreska-wlos); background: var(--tlo-telefonu); }
:root[data-ui="mobile"] .chat-public-note { gap: 6px; padding: 0 4px; font-size: var(--t-xs); line-height: 1.35; }
:root[data-ui="mobile"] .chat-public-note .icon { width: 16px; height: 16px; color: var(--text-muted); }
:root[data-ui="mobile"] .project-chat-compose .rich-editor { border-radius: var(--r-lg); background: var(--surface); box-shadow: inset 0 0 0 1px var(--kreska-wlos); }
/* ZK7c: bez skrótu „padding” — prawy odstęp (miejsce na kółko „Wyślij”) zostaje z 4-widoki/17-czat.css (.chat-pole). */
:root[data-ui="mobile"] .project-chat-compose .rich-editable { min-height: 44px; max-height: 30dvh; overflow-y: auto; padding-block: 10px; padding-left: 14px; }
/* FRO-29: telefon obrócony poziomo (ekran ~390–430 px wysokości). Wątki nad rozmową i pole pisania pod nią
   zabierały całą wysokość: w „Czat projektu" przycisk „Wyślij" wypadał poza ekran, a na historię zostawało
   ~30 px. W poziomie wątki stoją z lewej (jak na komputerze), „Wyślij" obok pola, historia bierze resztę. */
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .project-chat-panel.has-thread-rail { flex-direction: row; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .chat-thread-rail { flex: 0 0 var(--watki-w); min-height: 0; border-right: 1px solid var(--kreska-wlos); }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .chat-thread-rail-list { flex-direction: column; overflow-x: hidden; overflow-y: auto; padding: 6px 8px 10px 12px; }
:root[data-ui="mobile"]:where([data-telefon-poziomo]) .project-chat-compose .rich-editable { max-height: 22dvh; }

/* ============================ 6. POPR-n29: CZAT NA TELEFONIE — SYGNAŁ PRZEWIJANIA, CELE 44 PX, SZKICOWNIK ==== */
/* Wątki (chipy) i pasek edytora przewijają się w bok — prawa krawędź wygasa, więc widać, że dalej coś jest (dotąd były ucięte
   krawędzią bez sygnału). Zapas z prawej = ostatni element da się wysunąć spod wygaszenia. */
/* Wątki pionowo: lista rozwijana „Wątek: Ogólny ▾” zamiast chipów (poziomo zostaje belka z lewej). */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-rail-list { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-rail { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-rail-head { grid-row: 1; grid-column: 2; padding: 0 16px 0 0; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-rail-head > span { display: none; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-rail-head .icon-button { width: 44px; height: 44px; }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-wybor { grid-row: 1; grid-column: 1; display: flex; align-items: center; gap: var(--s-2); padding: 8px 8px 8px 16px; color: var(--text-muted); font-size: var(--t-sm); font-weight: var(--w-bold); }
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .chat-thread-wybor select { flex: 1; min-width: 0; height: 44px; border-radius: var(--r-lg); background-color: var(--surface); color: var(--text); font-size: var(--t-base); font-weight: var(--w-medium); }
/* „Aa”: w czacie formatowanie schowane pod jednym przyciskiem; widać Aa, szkic, załącznik i „Zleć jako zadanie”. */
:root[data-ui="mobile"] .chat-rich-editor .rich-aa-toggle { display: inline-grid; place-items: center; min-width: 44px; height: 44px; font-size: var(--t-base); font-weight: var(--w-strong); }
:root[data-ui="mobile"] .chat-rich-editor.is-format-open .rich-aa-toggle { background: var(--accent-soft); color: var(--accent-strong); }
:root[data-ui="mobile"] .chat-rich-editor:not(.is-format-open) .rich-toolbar > :is([data-rich-command], [data-rich-font-size], [data-rich-image-size], .rich-image-button:not(.rich-attach-button), [data-action="rich-checklist"], .rich-emoji-wrap, .rich-authors-toggle, .combo:has([data-rich-font-size], [data-rich-image-size])) { display: none; }
:root[data-ui="mobile"] .chat-rich-editor .rich-toolbar :is(.rich-sketch-toggle, .rich-attach-button) { min-width: 44px; height: 44px; }
:root[data-ui="mobile"] .chat-rich-editor .rich-toolbar :is(button, .rich-image-button, .rich-attach-button) { border-radius: var(--r-sm); }   /* wzór: promień 8 */
:root[data-ui="mobile"] .rich-toolbar { padding-right: 40px; -webkit-mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); mask-image: linear-gradient(to right, black calc(100% - 32px), transparent); }
:root[data-ui="mobile"] .chat-thread-item { height: 44px; border-radius: var(--r-lg); }
/* „6 os.” (osoby w wątku) — cel 44 px zamiast 65×18. */
:root[data-ui="mobile"] .chat-thread-manage { min-height: 44px; padding: 0 var(--s-3); }
/* Szkicownik: pełny ekran, płótno nieskończone na całe wolne miejsce (18.10.2026). Narzędzia i ustawienia są w DOKU
   (17b-szkicownik.css: pion = na dole, telefon poziomo = po lewej), a Wstaw/Anuluj w nagłówku (skrócone do „Wstaw").
   Przyciski 44 px. Skrótów klawiszowych na telefonie nie ma. */
:root[data-ui="mobile"] .rich-sketch-overlay { padding: 0; }
:root[data-ui="mobile"] .rich-sketch-panel { width: 100%; height: 100dvh; max-height: none; border-radius: 0; }
:root[data-ui="mobile"] .rich-sketch-hint { display: none; }
:root[data-ui="mobile"] .rich-sketch-head { min-height: 52px; padding-right: 188px; }   /* 188 = „Anuluj” + „Wstaw” (172 px) + odstęp; przełącznik papieru stoi tuż przed nimi */
:root[data-ui="mobile"] :is(.rich-sketch-rail button, .rich-sketch-ikona) { height: 44px; }
:root[data-ui="mobile"] .rich-sketch-toolbar .rich-sketch-ikona { width: 44px; }
:root[data-ui="mobile"] .rich-sketch-color { width: 44px; height: 44px; }
:root[data-ui="mobile"] .rich-sketch-width input[type="range"] { height: 44px; }
:root[data-ui="mobile"] .rich-sketch-foot { position: absolute; top: 0; right: var(--s-2); z-index: 7; height: 52px; padding: 0; border: 0; background: transparent; }
:root[data-ui="mobile"] .rich-sketch-foot .button { min-height: 44px; padding-inline: var(--s-4); }
:root[data-ui="mobile"] .rich-sketch-wstaw-pelny { display: none; }
:root[data-ui="mobile"] .rich-sketch-wstaw-krotki { display: inline; }
/* ZK3 (v15 b19): pole pisania wiadomości w spoczynku jak we wzorze (14 px); 16 px tylko podczas pisania (:focus) — iPhone nie powiększa strony. */
:root[data-ui="mobile"] .message-hub-thread .chat-rich-editor [contenteditable="true"]:not(:focus) { --pole-dotyk: var(--t-base); }