/* Pasek asystenta strony (projekt MONIKA) — na dole ekranu, wyśrodkowany. JEDNA powierzchnia w trzech stanach:
     spoczynek  — wąska pigułka (360 px), akcent prawie niewidoczny;
     .mk-szeroki — po kliknięciu w pole rośnie TYLKO NA SZEROKOŚĆ (560 px), nic w górę;
     .mk-otwarty — po Enter rozwija się W GÓRĘ w kartę rozmowy, sufit 1/2 ekranu (50 vh / połowa visualViewport).
   Polecenie Piotra 2026-09-13 00:3x: „subtelne kolory, po kliknięciu w pole tekstowe delikatne rozszerzenie okna, po kliknięciu
   enter w prompt delikatne rozwinięcie okna do góry max 1/2 strony -> delikatnie przezroczyste, to ma wyglądać TOP TOP TOP".
   Poprzednio (2026-09-10): klik w pole otwierał od razu w górę, sufit listy min(300px,42vh), tło pełne — bez przezroczystości.
   Bez imienia, znak „›" jak w wierszu poleceń (PD-828).

   TRZY WARIANTY WYGLĄDU (data-wariant na <script> albo ?pasek=<nazwa> w adresie — do wyboru przez Piotra, mechanika identyczna):
     szklo  — mrożone szkło: strona prześwituje rozmyta (blur 18 px, tło 72 %), cienka jasna krawędź, ruch 420 ms;
     papier — matowa kartka: prawie kryjące (90 %, blur 8 px), zero obramowania, sam cień, najspokojniejszy ruch (520 ms);
     aura   — najbardziej powietrzne (tło 70 %, blur 26 px), obwódka w kolorze akcentu, po fokusie delikatna poświata, 380 ms.
   Bez data-wariant = szklo. Przezroczystość WYŁĄCZNIE tam, gdzie jest backdrop-filter I color-mix (@supports) — inaczej tło pełne,
   tekst nigdy nie ląduje na nieczytelnym podłożu.

   KOLORY WPISANE WPROST z palet stron (nie var() gospodarza): produkcyjny build winemarkets ma w trybie ciemnym --ink:#fff bez
   --card/--paper-2/--line — tekst brał biel ze strony, tło biel z zapasu = białe litery na białym tle (Piotr 2026-09-10 21:0x).
   Obszary: silvanos (zawsze ciemny), wino (ZAWSZE jasny), casali (casali.agency, zawsze jasny).
   wino ZAWSZE JASNY (decyzja PREZESA 2026-09-13, wariant a, po pomiarze D-20260913-0225): 18 stron wm (/, /pl/, /ka/, faq…)
   ładuje wm.css z JEDNĄ kremową paletą bez wariantu ciemnego, więc widget przełączony po prefers-color-scheme: dark lądował
   ciemną pigułką 70 % na kremowej stronie — znak › 2,11:1, placeholder 3,99:1, tytuł 4,12:1 (próg 4,5). Do 2026-09-13 były tu
   dwie reguły (@media prefers-color-scheme:dark + :root[data-theme="dark"]) z paletą #231A1F/#F6EEF1/#D26A8E — usunięte, nie
   dopisywać z powrotem bez ciemnego wariantu w wm.css (dług strony, nie widgetu). */
.mk{--mk-bg:#fff;--mk-fg:#1b1f23;--mk-fg2:#4d5560;--mk-akcent:#1f6f5f;--mk-na-akcent:#fff;--mk-linia:#dde1e5;--mk-bańka:#f1f3f5;--mk-bańka-ja:#e6efec;
  --mk-blysk:rgba(255,255,255,.55);--mk-cien-k:0,0,0;
  --mk-r:18px;--mk-r-ctl:8px;--mk-r-okr:999px;--mk-font:system-ui,sans-serif;--mk-t2:14px;--mk-t1:12px;
  --mk-ruch:420ms;--mk-krzywa:cubic-bezier(.32,.72,0,1);--mk-alfa:72%;--mk-blur:18px;--mk-nasyc:140%;
  --mk-szer:360px;--mk-szer-otw:560px;--mk-dol:16px;--mk-sufit:50vh}
.mk[data-obszar="silvanos"]{--mk-bg:#0F211A;--mk-fg:#EAF3EE;--mk-fg2:#B3CABF;--mk-akcent:#10B26D;--mk-na-akcent:#07100C;--mk-linia:rgba(125,180,156,.28);
  --mk-bańka:rgba(234,243,238,.07);--mk-bańka-ja:rgba(16,178,109,.18);--mk-blysk:rgba(255,255,255,.09);--mk-cien-k:0,0,0;--mk-r:12px;--mk-r-ctl:6px;--mk-r-okr:999px;
  --mk-font:var(--sans,-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Inter,sans-serif);--mk-t2:13.5px;--mk-t1:11.5px}
.mk[data-obszar="wino"]{--mk-bg:#FFFFFF;--mk-fg:#17121A;--mk-fg2:#4F4149;--mk-akcent:#6E1E3C;--mk-na-akcent:#F8F1F4;--mk-linia:#E3D6DB;
  --mk-bańka:rgba(23,18,26,.05);--mk-bańka-ja:rgba(110,30,60,.09);--mk-blysk:rgba(255,255,255,.6);--mk-cien-k:23,18,26;--mk-r:18px;--mk-r-ctl:10px;
  --mk-font:var(--body,"Instrument Sans",ui-sans-serif,system-ui,sans-serif);--mk-t2:14px;--mk-t1:12px}
.mk[data-obszar="casali"]{--mk-bg:#FFFDF8;--mk-fg:#1B1F1A;--mk-fg2:#454B43;--mk-akcent:#B83F1B;   /* --accent-2 strony (#C2451F) przyciemniony o krok: jasny tekst na przycisku 4,95:1, na #C2451F było 4,47 */--mk-na-akcent:#F5F1E8;--mk-linia:#D9D2C2;
  --mk-bańka:rgba(27,31,26,.05);--mk-bańka-ja:rgba(224,85,43,.09);--mk-blysk:rgba(255,255,255,.6);--mk-cien-k:27,31,26;--mk-r:10px;--mk-r-ctl:6px;
  --mk-font:var(--body,"IBM Plex Sans","Helvetica Neue",Arial,sans-serif);--mk-t2:14px;--mk-t1:12px}
.mk .mk-pasek input,.mk .mk-msg,.mk .mk-chip,.mk .mk-handoff input{color:var(--mk-fg)}   /* jawnie, żeby żadna reguła strony (input{color}) nie wygrała */

/* --- warianty: tylko liczby i cienie, mechanika wspólna --- */
.mk[data-wariant="szklo"]{--mk-alfa:72%;--mk-blur:18px;--mk-nasyc:140%;--mk-ruch:420ms;--mk-krzywa:cubic-bezier(.32,.72,0,1);
  --mk-cien:0 1px 2px rgba(var(--mk-cien-k),.05),0 12px 36px -14px rgba(var(--mk-cien-k),.32)}
.mk[data-wariant="papier"]{--mk-alfa:90%;--mk-blur:8px;--mk-nasyc:110%;--mk-ruch:520ms;--mk-krzywa:cubic-bezier(.22,.61,.36,1);--mk-r:14px;
  --mk-cien:0 1px 1px rgba(var(--mk-cien-k),.04),0 10px 24px -10px rgba(var(--mk-cien-k),.22),0 30px 60px -30px rgba(var(--mk-cien-k),.28)}
.mk[data-wariant="aura"]{--mk-alfa:70%;--mk-blur:26px;--mk-nasyc:160%;--mk-ruch:380ms;--mk-krzywa:cubic-bezier(.32,.72,0,1);
  --mk-cien:0 0 0 1px color-mix(in srgb,var(--mk-akcent) 22%,transparent),0 14px 40px -18px rgba(var(--mk-cien-k),.4)}

/* miejsce pod paskiem, żeby ostatnie CTA strony dało się przewinąć NAD pasek */
html.mk-on body{padding-bottom:calc(var(--mk-dol,16px) + 64px)}

/* --- jedna powierzchnia: pigułka ⇄ szeroka pigułka ⇄ karta --- */
.mk{position:fixed;left:50%;bottom:var(--mk-dol);transform:translateX(-50%);width:var(--mk-szer);max-width:calc(100vw - 24px);box-sizing:border-box;
  max-height:min(var(--mk-sufit),calc(var(--mk-vvh,100vh) * .5));   /* sufit 1/2 ekranu RAZEM z obramowaniem */
  display:flex;flex-direction:column;z-index:9999;font:var(--mk-t2)/1.45 var(--mk-font);color:var(--mk-fg);
  background:var(--mk-bg);border:1px solid var(--mk-linia);border-radius:26px;box-shadow:var(--mk-cien);overflow:hidden;
  transition:width var(--mk-ruch) var(--mk-krzywa),border-radius var(--mk-ruch) var(--mk-krzywa),transform var(--mk-ruch) var(--mk-krzywa),
    opacity var(--mk-ruch) ease,border-color var(--mk-ruch) ease,box-shadow var(--mk-ruch) ease,background-color var(--mk-ruch) ease}
.mk.mk-szeroki,.mk.mk-otwarty{width:var(--mk-szer-otw)}
.mk.mk-otwarty{border-radius:var(--mk-r)}
.mk:focus-within{border-color:color-mix(in srgb,var(--mk-akcent) 28%,var(--mk-linia))}
.mk.mk-start,.mk.mk-schowany{transform:translate(-50%,calc(100% + var(--mk-dol) + 8px));opacity:0}
.mk.mk-schowany{pointer-events:none}
.mk.mk-intro{display:none}   /* intro strony trwa (monika.js: introTrwa) — pasek nie istnieje na ekranie, żadnych przejść; wraca wjazdem .mk-start */
.mk *{box-sizing:border-box}

/* przezroczystość — tylko gdy przeglądarka umie rozmyć tło I zmieszać kolor; inaczej zostaje pełne var(--mk-bg) z reguły wyżej */
@supports ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))) and (background:color-mix(in srgb,#000 50%,transparent)){
  .mk{background:color-mix(in srgb,var(--mk-bg) var(--mk-alfa),transparent);
    -webkit-backdrop-filter:blur(var(--mk-blur)) saturate(var(--mk-nasyc));backdrop-filter:blur(var(--mk-blur)) saturate(var(--mk-nasyc))}
  .mk[data-wariant="szklo"]{box-shadow:var(--mk-cien),inset 0 1px 0 var(--mk-blysk)}
  .mk[data-wariant="szklo"]{border-color:color-mix(in srgb,var(--mk-fg) 14%,transparent)}
  .mk[data-wariant="szklo"]:focus-within{border-color:color-mix(in srgb,var(--mk-akcent) 40%,transparent)}
  .mk[data-wariant="papier"]{border-color:transparent}
  .mk[data-wariant="papier"]:focus-within{border-color:transparent}
  .mk[data-wariant="aura"]{border-color:transparent}
  .mk[data-wariant="aura"]:focus-within{border-color:transparent;
    box-shadow:0 0 0 1px color-mix(in srgb,var(--mk-akcent) 48%,transparent),0 0 28px -6px color-mix(in srgb,var(--mk-akcent) 40%,transparent),0 14px 40px -18px rgba(var(--mk-cien-k),.4)}
  .mk[data-wariant="aura"].mk-otwarty{box-shadow:0 0 0 1px color-mix(in srgb,var(--mk-akcent) 34%,transparent),0 18px 48px -18px rgba(var(--mk-cien-k),.42)}
}

/* --- pasek (zawsze na dole powierzchni) --- */
.mk-pasek{display:flex;align-items:center;gap:6px;margin:0;padding:6px 6px 6px 14px;background:transparent;color:var(--mk-fg)}
.mk-pasek .mk-znak{width:14px;height:24px;color:var(--mk-fg2);display:grid;place-items:center;flex:none;transition:color var(--mk-ruch) ease;
  font:700 calc(var(--mk-t2) + 3px)/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.mk:focus-within .mk-pasek .mk-znak,.mk.mk-ma-tekst .mk-pasek .mk-znak{color:var(--mk-akcent)}   /* akcent dopiero, gdy ktoś pisze — „subtelne kolory" */
.mk:focus-within .mk-pasek .mk-znak{animation:mk-kursor 1.1s steps(1) infinite}
@keyframes mk-kursor{50%{opacity:.35}}
.mk-pasek input{flex:1;min-width:0;border:0;background:transparent;color:var(--mk-fg);font:inherit;padding:8px 4px;outline:none;text-overflow:ellipsis}
.mk-pasek input::placeholder{color:var(--mk-fg2);opacity:1;text-overflow:ellipsis}
.mk-pasek button{width:34px;height:34px;border:0;border-radius:var(--mk-r-okr);background:var(--mk-bańka);color:var(--mk-fg2);cursor:pointer;
  display:grid;place-items:center;flex:none;transition:background var(--mk-ruch) ease,color var(--mk-ruch) ease,opacity var(--mk-ruch)}
.mk.mk-ma-tekst .mk-pasek button{background:var(--mk-akcent);color:var(--mk-na-akcent)}
.mk-pasek button:disabled{opacity:.5;cursor:default}
.mk-pasek button svg{width:16px;height:16px}
.mk input:focus-visible,.mk button:focus-visible,.mk a:focus-visible{outline:2px solid var(--mk-akcent);outline-offset:2px}
.mk-pasek input:focus-visible{outline:none}

/* --- rozmowa nad paskiem: siatka 0fr → 1fr = płynne rozwinięcie do RZECZYWISTEJ wysokości treści; sufit trzyma max-height na .mk --- */
.mk-panel{display:grid;grid-template-rows:0fr;opacity:0;min-height:0;transition:grid-template-rows var(--mk-ruch) var(--mk-krzywa),opacity 260ms ease}
.mk.mk-otwarty .mk-panel{grid-template-rows:1fr;opacity:1;transition:grid-template-rows var(--mk-ruch) var(--mk-krzywa),opacity 320ms ease 80ms}
.mk[data-wariant="papier"].mk-otwarty .mk-panel{transition:grid-template-rows var(--mk-ruch) var(--mk-krzywa),opacity 420ms ease 120ms}
.mk-wnetrze{min-height:0;overflow:hidden;display:flex;flex-direction:column}
.mk-glowa{display:flex;align-items:center;gap:8px;padding:10px 10px 8px 16px;border-bottom:1px solid var(--mk-linia);flex:none}
.mk-glowa .mk-znak{color:var(--mk-akcent);font:700 calc(var(--mk-t2) + 2px)/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.mk-glowa b{font-size:var(--mk-t1);font-weight:600;letter-spacing:.04em;text-transform:uppercase;color:var(--mk-fg2);display:block}
.mk-glowa small{display:none}
.mk-glowa .mk-x{margin-left:auto;width:30px;height:30px;border:0;background:transparent;color:var(--mk-fg2);border-radius:var(--mk-r-ctl);cursor:pointer;font-size:var(--mk-t2);line-height:1}
.mk-glowa .mk-x:hover{color:var(--mk-fg);background:var(--mk-bańka)}
.mk-lista{flex:1 1 auto;min-height:0;overflow-y:auto;padding:12px 14px;display:flex;flex-direction:column;gap:8px;overscroll-behavior:contain;scrollbar-width:thin}
.mk-msg{max-width:86%;padding:8px 12px;border-radius:14px;white-space:pre-wrap;overflow-wrap:anywhere;line-height:1.45;font-size:var(--mk-t2);flex:none}
.mk-bot{background:var(--mk-bańka);color:var(--mk-fg);align-self:flex-start;border-bottom-left-radius:4px}
.mk-user{background:var(--mk-bańka-ja);color:var(--mk-fg);align-self:flex-end;border-bottom-right-radius:4px}
.mk[data-wariant="papier"] .mk-msg{border-radius:10px}
.mk[data-wariant="papier"] .mk-bot{border-bottom-left-radius:3px}.mk[data-wariant="papier"] .mk-user{border-bottom-right-radius:3px}
.mk-pisze{color:var(--mk-fg2);font-style:italic}
.mk-meta{font-size:var(--mk-t1);color:var(--mk-fg2);align-self:flex-start;margin-top:-4px;flex:none}
.mk-link{align-self:flex-start;color:var(--mk-akcent);font-weight:600;text-decoration:underline;text-underline-offset:3px;font-size:var(--mk-t2);flex:none}

/* chipy startowe — nad polem w stanie rozwiniętym */
.mk-chipy{display:flex;flex-wrap:wrap;gap:6px;padding:0 14px 10px;flex:none}
.mk-chipy[hidden]{display:none}
.mk-chip{border:1px solid var(--mk-linia);background:transparent;color:var(--mk-fg2);font:inherit;font-size:var(--mk-t1);padding:5px 10px;border-radius:var(--mk-r-okr);cursor:pointer;
  transition:border-color 160ms,color 160ms,background 160ms}
.mk-chip:hover{border-color:var(--mk-akcent);color:var(--mk-akcent)}
.mk[data-wariant="aura"] .mk-chip{border-color:transparent;background:var(--mk-bańka)}
.mk[data-wariant="aura"] .mk-chip:hover{background:var(--mk-bańka-ja)}

/* handoff: pole e-mail w tej samej rozmowie */
.mk-handoff{align-self:stretch;border:1px solid var(--mk-linia);border-radius:14px;padding:10px 12px;display:flex;flex-direction:column;gap:6px;background:var(--mk-bańka);flex:none}
.mk-handoff b{font-size:var(--mk-t2)}
.mk-handoff .mk-zgoda{font-size:var(--mk-t1);color:var(--mk-fg2);margin:0}
.mk-handoff form{display:flex;gap:6px;margin:0}
.mk-handoff input{flex:1;min-width:0;border:1px solid var(--mk-linia);border-radius:var(--mk-r-ctl);background:transparent;color:var(--mk-fg);font:inherit;padding:7px 10px}
.mk-handoff input::placeholder{color:var(--mk-fg2);opacity:1}
.mk-handoff button{border:0;border-radius:var(--mk-r-ctl);background:var(--mk-akcent);color:var(--mk-na-akcent);font:inherit;font-weight:600;padding:7px 12px;cursor:pointer;white-space:nowrap}
.mk-handoff .mk-blad{color:var(--mk-fg);font-size:var(--mk-t1);margin:0}
.mk-handoff.mk-wyslane form,.mk-handoff.mk-wyslane .mk-zgoda{display:none}

@media (max-width:640px){
  .mk{--mk-szer:min(360px,calc(100vw - 24px));--mk-szer-otw:calc(100vw - 24px);--mk-dol:12px}
  .mk-msg{max-width:92%}
  .mk-handoff form{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.mk,.mk-panel,.mk-chip,.mk-pasek button,.mk-pasek .mk-znak{transition:none!important}.mk-pasek .mk-znak{animation:none!important}}