/* public/css/czat.css — F1 (SPEC-v6 §2): panel czatu z trzema rolami (Asystentka · Analityk · Przewodnik). Ładowany z index.html po app.css; korzysta z tokenów motywu app.css (--surface, --ink, --accent, --line, --safe-*, --tabbar-h). Desktop (≥ 900 px): panel wysuwany z prawej (440 px) nad półprzezroczystą zasłoną, animacja 200 ms (prefers-reduced-motion → bez). Mobile (< 900 px): całe okno (100dvh / wysokość visualViewport), własny górny pasek, dolny pasek zakładek aplikacji ukryty, lista przewija się tylko wewnątrz (overscroll-behavior: contain), pole tekstowe przyklejone do dołu nad klawiaturą. Wersja osadzona (.czat-osadzony) — ten sam komponent w treści strony /asystent/:data. Jedyny styl inline: zmienne --czat-vvh / --czat-vvt na (wysokość i przesunięcie visualViewport przy otwartej klawiaturze). */ :root{ --czat-szer:440px; --czat-czas:.2s; --czat-z:65; } /* ---------- zasłona i panel ---------- */ .czat-zaslona{ position:fixed; inset:0; z-index:calc(var(--czat-z) - 1); background:rgba(20,16,19,.38); backdrop-filter:blur(1.5px); opacity:0; transition:opacity var(--czat-czas) ease-out; } .czat-zaslona.on{ opacity:1; } .czat-panel{ position:fixed; inset:0 0 0 auto; width:min(var(--czat-szer), 100vw); z-index:var(--czat-z); display:flex; flex-direction:column; min-height:0; background:var(--surface); color:var(--ink); border-left:1px solid var(--line); box-shadow:var(--shadow-lg); transform:translateX(100%); transition:transform var(--czat-czas) ease-out; overscroll-behavior:contain; font-size:.92rem; line-height:1.45; } .czat-panel.on{ transform:none; } html.czat-otwarty, html.czat-otwarty body{ overflow:hidden; } body.czat-otwarty .tabbar{ display:none !important; } /* wersja osadzona w treści strony (/asystent/:data) */ .czat-panel.czat-osadzony{ position:relative; inset:auto; width:auto; transform:none; transition:none; z-index:auto; height:min(76dvh, 46rem); border:1px solid var(--line); border-radius:12px; box-shadow:var(--shadow); } .czat-osadzony .czat-x, .czat-osadzony .czat-wroc{ display:none !important; } /* ---------- nagłówek: role + kontekst ---------- */ .czat-naglowek{ display:flex; align-items:center; gap:.45rem; padding:.55rem .7rem .45rem; border-bottom:1px solid var(--line); flex:none; padding-top:max(.55rem, var(--safe-t)); } .czat-role{ flex:1; flex-wrap:nowrap; gap:.25rem; min-width:0; } .czat-role button{ flex:1 1 0; min-width:0; min-height:36px; padding:.3rem .35rem; border-radius:999px; font-size:.78rem; font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; display:inline-flex; align-items:center; justify-content:center; gap:.3rem; } .czat-role button .em{ font-size:.95rem; line-height:1; } .czat-role button.niedostepna{ color:var(--muted); } .czat-role button.niedostepna[aria-pressed="true"]{ color:#fff; } .czat-role button.niedostepna::after{ content:'·'; opacity:.7; } .czat-x{ font-size:1.05rem; min-width:40px; min-height:40px; display:inline-flex; align-items:center; justify-content:center; border-radius:999px; } .czat-wroc{ display:none; } .czat-kontekst{ display:flex; flex-wrap:wrap; align-items:center; gap:.3rem .6rem; padding:.45rem .85rem; font-size:.8rem; color:var(--muted); border-bottom:1px solid var(--line); flex:none; } .czat-kontekst b{ color:var(--ink); font-weight:600; font-size:.88rem; } .czat-kontekst .tryb{ font-family:var(--mono); font-size:.66rem; border:1px solid var(--line-2); border-radius:999px; padding:.05rem .5rem; white-space:nowrap; } .czat-kontekst .tryb:empty{ display:none; } .czat-kontekst .czat-od-nowa{ margin-left:auto; min-height:32px; padding:.15rem .55rem; font-size:.74rem; } .czat-okres{ flex-basis:100%; flex-wrap:nowrap; gap:.2rem; } .czat-okres button{ flex:1 1 0; min-width:0; min-height:34px; padding:.2rem .3rem; font-size:.74rem; } .czat-okres button:disabled{ opacity:.45; cursor:default; } /* ---------- ciało: lista wiadomości ---------- */ .czat-cialo{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; -webkit-overflow-scrolling:touch; display:flex; flex-direction:column; gap:.55rem; padding:.8rem .85rem 1rem; scroll-padding-bottom:1rem; } .czat-wstep{ font-size:.82rem; color:var(--muted); line-height:1.4; } .czat-wstep b{ color:var(--ink); font-weight:600; } .czat-uwaga{ font-size:.8rem; padding:.5rem .7rem; border-radius:10px; background:var(--accent-soft); color:var(--accent-ink); } .czat-uwaga a{ color:inherit; font-weight:600; } .czat-lista{ display:flex; flex-direction:column; gap:.45rem; } .dymek{ max-width:85%; padding:.55rem .85rem; border-radius:16px; font-size:.93rem; line-height:1.45; white-space:pre-wrap; word-break:break-word; overflow-wrap:anywhere; position:relative; } .dymek.asystentka, .dymek.agent{ align-self:flex-start; background:var(--surface-2); border:1px solid var(--line); border-bottom-left-radius:5px; } .dymek.ty{ align-self:flex-end; background:var(--accent); color:var(--bg); border-bottom-right-radius:5px; } .dymek.blad{ border-color:var(--warn); } /* 0.6.0 (H1, SPEC-v8 §2.2): godzina dymka zawsze w DOM, poza pudełkiem dymka (position:absolute obok krawędzi, w wolnym pasie między dymkiem a przeciwległym brzegiem listy) — najechanie / tap zmienia TYLKO opacity, nigdy wymiary (dotąd `display:block` dokładało wiersz i dymek „rósł”). Agent: po prawej od dymka; klientka: po lewej. */ .dymek .kiedy{ position:absolute; bottom:.35rem; font-family:var(--mono); font-size:.62rem; color:var(--muted); white-space:nowrap; opacity:0; pointer-events:none; transition:opacity .15s ease-out; line-height:1; } .dymek.asystentka .kiedy, .dymek.agent .kiedy{ left:calc(100% + .45rem); } .dymek.ty .kiedy{ right:calc(100% + .45rem); } .dymek .kiedy:empty{ visibility:hidden; } .dymek.pokaz-czas .kiedy{ opacity:.85; } @media (hover:hover){ .dymek:hover .kiedy{ opacity:.85; } } .dymek .zrodlo{ display:block; font-family:var(--mono); font-size:.62rem; opacity:.6; margin-top:.25rem; } .dymek.strumien .tekst::after{ content:'▍'; margin-left:.08em; opacity:.6; animation:czat-mig 1s steps(2) infinite; } @keyframes czat-mig{ to{ opacity:0; } } .pisze{ align-self:flex-start; display:flex; gap:4px; padding:.75rem .9rem; } .pisze i{ width:6px; height:6px; border-radius:50%; background:var(--muted); animation:czat-kropka 1s infinite; } .pisze i:nth-child(2){ animation-delay:.2s; } .pisze i:nth-child(3){ animation-delay:.4s; } @keyframes czat-kropka{ 0%,80%,100%{ opacity:.25; } 40%{ opacity:1; } } .szybkie{ display:flex; flex-wrap:wrap; gap:.35rem; align-self:flex-start; max-width:92%; padding-left:.1rem; } .szybkie .btn-ghost{ min-height:38px; border-radius:999px; text-align:left; } .czat-karta{ align-self:stretch; padding:.85rem .95rem; border-radius:12px; background:var(--accent-soft); color:var(--accent-ink); display:flex; flex-direction:column; gap:.45rem; font-size:.88rem; } .czat-karta b{ font-size:.95rem; } .czat-karta .btn-main{ align-self:flex-start; min-height:40px; } .czat-karta.wkrotce{ background:var(--surface-2); color:var(--ink-2); border:1px dashed var(--line-2); } .czat-limit{ align-self:flex-start; max-width:92%; padding:.55rem .8rem; border-radius:14px; border:1px solid var(--warn); background:var(--surface-2); font-size:.86rem; display:flex; flex-direction:column; gap:.4rem; } .czat-limit .btn-main{ align-self:flex-start; min-height:38px; } .czat-blad{ align-self:stretch; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; margin-top:0; } .czat-sciaga{ font-size:.85rem; line-height:1.45; padding:.6rem .75rem; border-radius:10px; background:var(--surface-2); border:1px solid var(--line); } .czat-sciaga h4{ font-size:.72rem; font-family:var(--mono); letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin:.45rem 0 .2rem; } .czat-sciaga h4:first-child{ margin-top:0; } .czat-sciaga ul{ margin:0; padding-left:1.1rem; } .czat-sciaga li{ margin:.15rem 0; } .czat-koniec{ flex:none; display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; justify-content:space-between; margin:0 .85rem .6rem; padding:.6rem .8rem; border-radius:10px; background:var(--accent-soft); font-size:.86rem; color:var(--accent-ink); } .czat-koniec .btn-main{ min-height:40px; } /* ---------- pole tekstowe (przyklejone do dołu) ---------- */ .czat-pole{ flex:none; display:flex; gap:.45rem; align-items:flex-end; padding:.5rem .75rem calc(.6rem + var(--safe-b)); border-top:1px solid var(--line); background:var(--surface); } .czat-pole textarea{ flex:1 1 auto; min-width:0; min-height:44px; max-height:8rem; resize:none; font:inherit; font-size:16px; line-height:1.4; color:var(--ink); background:var(--surface-2); border:1px solid var(--line); border-radius:22px; padding:.62rem .95rem; } .czat-pole textarea::placeholder{ white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .czat-pole textarea:focus{ outline:2px solid var(--accent); outline-offset:-1px; } .czat-pole textarea:disabled{ opacity:.55; } .czat-pole .btn-main, .czat-pole .btn-ghost{ flex:none; width:44px; height:44px; min-height:44px; padding:0; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; } .czat-pole .btn-main .ikona, .czat-pole .btn-ghost .ikona{ width:20px; height:20px; } .czat-pole .mik[aria-pressed="true"]{ color:var(--alarm); border-color:var(--alarm); } .czat-podpis{ flex:none; display:flex; flex-wrap:wrap; justify-content:space-between; gap:.2rem .7rem; padding:0 .85rem calc(.4rem + var(--safe-b)); font-size:.7rem; color:var(--muted); background:var(--surface); } .czat-podpis:empty{ display:none; } .czat-podpis .limit{ font-family:var(--mono); white-space:nowrap; } /* ---------- ruch ---------- */ @media (prefers-reduced-motion:reduce){ .czat-panel, .czat-zaslona, .dymek .kiedy{ transition:none !important; } .dymek.strumien .tekst::after, .pisze i{ animation:none; } } /* ---------- telefon i tablet (< 900 px): całe okno, jak natywna aplikacja czatu ---------- */ @media (max-width:899px){ .czat-panel{ inset:auto 0 0 0; top:var(--czat-vvt, 0px); width:100%; height:var(--czat-vvh, 100dvh); max-height:100dvh; border:0; border-radius:0; box-shadow:none; transform:translateX(100%); } .czat-panel.on{ transform:none; } .czat-panel.czat-osadzony{ position:relative; inset:auto; height:calc(100dvh - var(--tabbar-h) - var(--safe-b) - 13.5rem); min-height:20rem; border:1px solid var(--line); border-radius:12px; } .czat-zaslona{ display:none; } .czat-naglowek{ padding:.35rem .5rem .35rem; gap:.3rem; } .czat-wroc{ display:inline-flex; align-items:center; gap:.2rem; min-height:40px; min-width:40px; padding:.2rem .5rem; border:0; font-size:.86rem; color:var(--accent-ink); background:none; } .czat-x{ display:none; } .czat-role button{ min-height:40px; font-size:.74rem; padding:.25rem .25rem; } .czat-role button .nazwa{ display:none; } .czat-role button[aria-pressed="true"] .nazwa{ display:inline; } .czat-kontekst{ padding:.4rem .75rem; flex-wrap:nowrap; } .czat-kontekst b{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; } .czat-kontekst .czat-od-nowa{ flex:none; min-width:36px; min-height:36px; padding:.15rem .45rem; } .czat-kontekst .czat-od-nowa .nazwa{ display:none; } .czat-kontekst .czat-okres{ flex-basis:100%; } .czat-kontekst:has(.czat-okres:not([hidden])){ flex-wrap:wrap; } .czat-cialo{ padding:.7rem .75rem .9rem; } .dymek{ max-width:85%; font-size:.95rem; } .szybkie .btn-ghost{ min-height:44px; } .czat-okres button{ min-height:40px; } .czat-pole{ padding:.45rem .6rem calc(.5rem + var(--safe-b)); } .czat-podpis{ padding-bottom:calc(.3rem + var(--safe-b)); } .czat-podpis .nota{ display:none; } } @media (max-width:899px) and (max-height:520px){ /* klawiatura otwarta na niskim ekranie: chowamy kontekst, zostaje lista i pole */ .czat-podpis{ display:none; } .czat-kontekst .czat-okres{ display:none; } } /* ---------- 0.5.0 (G1, SPEC-v7 §4): Przewodnik — zasłona przezroczysta, strona pod spodem klikalna i przewijalna ---------- */ .czat-zaslona.czat-zaslona--przezroczysta{ background:transparent; backdrop-filter:none; -webkit-backdrop-filter:none; pointer-events:none; } @media (min-width:900px){ html.czat-otwarty.czat-przezroczysty, html.czat-otwarty.czat-przezroczysty body{ overflow:visible; } } /* ---------- 0.5.0 (G1, SPEC-v7 §2): „🕘 Historia” — lista rozmów bieżącej roli w panelu ---------- */ .czat-kontekst .czat-historia{ margin-left:auto; min-height:32px; padding:.15rem .55rem; font-size:.74rem; } .czat-kontekst .czat-historia + .czat-od-nowa{ margin-left:0; } .czat-historia[aria-pressed="true"]{ background:var(--accent-soft); color:var(--accent-ink); } .czat-hist-pasek{ display:flex; align-items:center; justify-content:space-between; gap:.5rem; flex-wrap:wrap; } .czat-hist-pasek .btn-ghost{ min-height:38px; } .czat-hist-tytul{ font-size:.8rem; color:var(--muted); } .czat-hist-lista{ display:flex; flex-direction:column; gap:.4rem; } .czat-hist-poz{ display:flex; flex-direction:column; align-items:flex-start; gap:.15rem; width:100%; text-align:left; padding:.55rem .75rem; border:1px solid var(--line); border-radius:12px; background:var(--surface-2); color:var(--ink); font:inherit; cursor:pointer; min-height:44px; } .czat-hist-poz:hover{ border-color:var(--line-2); } .czat-hist-poz.aktywna{ border-color:var(--accent); } .czat-hist-poz b{ font-size:.9rem; display:flex; align-items:center; gap:.4rem; flex-wrap:wrap; } .czat-hist-poz .czat-hist-pod{ font-size:.72rem; color:var(--muted); font-family:var(--mono); } .czat-hist-poz .czat-hist-pocz{ font-size:.82rem; color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:100%; } .czat-hist-arch{ font-size:.64rem; font-family:var(--mono); border:1px solid var(--line-2); border-radius:999px; padding:.02rem .45rem; color:var(--muted); font-weight:500; } .czat-hist-starsze{ align-self:center; min-height:40px; } .czat-panel.czat-archiwum .czat-koniec{ background:var(--surface-2); color:var(--ink-2); } /* ---------- 0.5.0 (G1, SPEC-v7 §3): nawigacja przewodnika — link w dymku, toast na telefonie ---------- */ .dymek .czat-nawigacja{ display:block; margin-top:.35rem; font-size:.82rem; font-weight:600; color:var(--accent-ink); text-decoration:none; } .dymek .czat-nawigacja:hover{ text-decoration:underline; } .toast .czat-toast{ display:flex; align-items:center; gap:.5rem; flex-wrap:wrap; } .toast .czat-toast-btn{ font:inherit; font-size:.8rem; font-weight:600; background:none; border:1px solid rgba(255,255,255,.55); color:inherit; border-radius:999px; padding:.15rem .65rem; cursor:pointer; min-height:32px; } @media (max-width:899px){ .czat-kontekst .czat-historia{ flex:none; min-width:36px; min-height:36px; padding:.15rem .45rem; } .czat-kontekst .czat-historia .nazwa{ display:none; } } /* ---------- 0.6.0 (H1, SPEC-v8 §2.1): Przewodnik w „Pierwszych krokach” ---------- */ /* Desktop: panel z boku z przezroczystą zasłoną — scena onboardingu robi mu miejsce (padding-right = szerokość panelu), zamiast chować się pod nim. */ @media (min-width:900px){ html.czat-otwarty.czat-przezroczysty body.onboarding{ padding-right:var(--czat-szer); transition:padding-right var(--czat-czas) ease-out; } } /* Telefon: sticky pasek u dołu onboardingu „❓ Zapytaj przewodnika o ten krok” (otwiera pełnoekranowy panel; „wróć” wraca do kroku). Na desktopie ukryty. */ .onb-przewodnik-pasek{ position:sticky; bottom:calc(var(--safe-b, 0px) + .5rem); z-index:20; margin-top:.9rem; display:flex; align-items:center; gap:.5rem; padding:.5rem .6rem; border-radius:12px; background:var(--surface); border:1px solid var(--line-2); box-shadow:var(--shadow-lg); } .onb-przewodnik-pasek .btn-main{ flex:1 1 auto; min-height:44px; } .onb-przewodnik-pasek .krok{ font-family:var(--mono); font-size:.68rem; color:var(--muted); white-space:nowrap; } @media (min-width:900px){ .onb-przewodnik-pasek{ display:none; } } /* „❓ przewodnik” w stopce kroków — tylko desktop (na telefonie jest sticky pasek). */ @media (max-width:899px){ .onb-przewodnik-btn{ display:none; } } /* Pasek postępu: krok pominięty (bez pracy — „Twój tydzień”) kreskowany. */ .onb-pasek i.pominiety{ background:repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 8px); }