/* ============================================================================
   3-komponenty/05b-dymki-dotyk.css — DYMKI (TOASTY) NA TELEFONIE I TABLECIE: u DOŁU, nad paskami, najwyżej dwa naraz
   ----------------------------------------------------------------------------
   Po co (29.10.2026): dymki stały u GÓRY ekranu, więc kilka naraz przykrywało nagłówek okna (tytuł, „×”) i górny pasek aplikacji —
   okno dało się zamknąć dopiero po zniknięciu dymków. Teraz (telefon pion i poziom, tablet):
   · dymki stoją u DOŁU, nad dolnym paskiem zakładek, stopką okna, paskiem ceny Kalkulatora i przyciskiem „+” — wysokość tego, co zajmuje dół
     okna, liczy js/ui/dymki-dotyk.js i podaje w --toast-dol (tu jest tylko wartość zastępcza, zanim skrypt zmierzy);
   · najwyżej DWA widoczne naraz (starsze znikają albo, gdy to błędy, chowają się do czasu zamknięcia nowszych) — robi to skrypt;
   · jeden–dwa wiersze tekstu (dłuższy tekst kończy się wielokropkiem; stuknięcie rozwija go całego), pismo 14 px;
   · zamknięcie: „×” (każdy dymek), przeciągnięcie w bok albo w dół (skrypt); przycisk akcji („Cofnij”) ma wysokość kontrolki;
   · wjazd od dołu, krótki (ease-out); przy „ogranicz ruch” bez animacji.
   KOMPUTER (data-ui="desktop") nie widzi z tego pliku ani jednej reguły — dymki stoją u góry, jak dotąd (05-komponenty §6).
   Wszystkie wymiary z tokenów (--s-*, --h-control, --t-base); bez !important.
   ============================================================================ */

/* ============================ 1. KONTENER: DÓŁ OKNA, ŚRODEK, NAD PASKAMI ======= */
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast-root {
  --toast-w: 440px;
  --toast-dol: env(safe-area-inset-bottom, 0px);   /* zastępcza: tablet i telefon poziomo; skrypt podmienia na zmierzoną */
  top: auto;
  right: calc(var(--s-3) + var(--bezp-prawo, 0px));
  bottom: calc(var(--toast-dol) + var(--s-3));
  left: calc(var(--s-3) + var(--bezp-lewo, 0px));
  width: auto;
  max-width: var(--toast-w);
  margin-inline: auto;
  align-content: end;
  gap: var(--s-2);
  transform: none;
}
/* Telefon pionowo: dolny pasek zakładek stoi na dole, dopóki skrypt nie zmierzy, co naprawdę zajmuje dół. */
:root[data-ui="mobile"]:not([data-telefon-poziomo]) .toast-root { --toast-dol: var(--tabbar-h); }
/* Telefon poziomo: szyna ikon z lewej (--sidebar-w-waski) — dymki stoją w polu roboczym obok niej, nie na niej. */
:root[data-ui="mobile"][data-telefon-poziomo] .toast-root { left: calc(var(--sidebar-w-waski) + var(--s-3)); }

/* ============================ 2. DYMEK: ZWARTY, JEDEN–DWA WIERSZE ============ */
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast {
  align-items: center;
  min-height: var(--h-control);
  padding: var(--s-2) var(--s-2) var(--s-2) var(--s-3);
  font-size: var(--t-base);
  line-height: var(--lh-tight);
  touch-action: none;   /* gest zamykania (skrypt) bierze każdy ruch palca; stuknięcie i przyciski działają jak zwykle */
  animation: toast-wjazd-dol var(--wolno) ease-out;
}
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast-tekst {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  overflow-wrap: anywhere;
}
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-rozwiniety .toast-tekst { -webkit-line-clamp: unset; overflow: visible; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast[data-dlugi]:not(.is-rozwiniety) .toast-tekst { cursor: pointer; }
/* „×” w każdym dymku: cel dotyku = wysokość kontrolki, bez powiększania dymka (ujemne marginesy jak w bazie). */
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast-zamknij { flex: none; width: var(--h-control); height: var(--h-control); margin: calc(var(--s-1) * -1) 0; }
/* Przycisk akcji („Cofnij”) — wysokość kontrolki z tokenu (telefon: 1-podstawa.css, tablet: ten sam token). */
:root[data-ui="tablet"] .toast .toast-akcja { min-height: var(--h-control); }
/* Przeciąganie palcem: bez przejścia, żeby dymek szedł za palcem; puszczony wraca albo odlatuje (skrypt ustawia transform i opacity). */
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-przeciagany { animation: none; transition: none; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-odlot { animation: none; transition: transform var(--szybko) ease-out, opacity var(--szybko) linear; }
:root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-powrot { animation: none; transition: transform var(--wolno) ease-out, opacity var(--wolno) ease-out; }

/* ============================ 3. RUCH ======================================== */
/* Wjazd od dołu (dymek stoi nad paskiem, więc „wyrasta” z niego): ruch mówi „to nowy komunikat”. */
@keyframes toast-wjazd-dol {
  from { opacity: 0; transform: translateY(var(--s-3)); }
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  :root:is([data-ui="mobile"], [data-ui="tablet"]) .toast { animation: none; }
  :root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-odlot, :root:is([data-ui="mobile"], [data-ui="tablet"]) .toast.is-powrot { transition: none; }
}
/* Komputer: „×” tylko przy błędzie i dymku, który zostaje (jak dotąd) — dymek znikający sam go nie potrzebuje. */
:root[data-ui="desktop"] .toast:not(.danger):not([data-zostaje]) .toast-zamknij { display: none; }