/* Pasek asystenta strony (projekt MONIKA) — na dole ekranu, wyśrodkowany. JEDNA powierzchnia: w spoczynku wąska pigułka (360 px),
   po kliknięciu w pole rośnie PŁYNNIE na szerokość (560 px) i W GÓRĘ w kartę rozmowy (Piotr 2026-09-10 20:xx: „kompaktowy, węższy,
   ma się rozciągnąć płynnie na szerokość i do góry po kliknięciu w pole tekstu”; poprzednia wersja: osobny panel 600 px na max-height —
   skok zamiast ruchu, zasłaniał stronę). Rozmowa ma wysokość TREŚCI (na starcie ok. 200 px razem z chipami), sufit 300 px / 42 vh — nie zasłania strony.
   Bez imienia, znak „›" jak w wierszu poleceń (PD-828). Kolory stonowane, WPISANE WPROST z palet stron (patrz blok niżej — dlaczego nie var()). */
.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-r:18px;--mk-r-ctl:8px;--mk-r-okr:999px;--mk-font:system-ui,sans-serif;--mk-t2:14px;--mk-t1:12px;
  --mk-cien:0 1px 2px rgba(0,0,0,.06),0 10px 30px -14px rgba(0,0,0,.28);--mk-ruch:380ms;--mk-krzywa:cubic-bezier(.32,.72,0,1);
  --mk-szer:360px;--mk-szer-otw:560px;--mk-dol:16px;--mk-wys-listy:min(300px,42vh)}
/* KOLORY WPROST, nie przez var() gospodarza: produkcyjny build winemarkets (starszy niż dist/) ma w trybie ciemnym --ink: #fff,
   ale NIE MA --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).
   Wartości = liczby z site.css (jasny + ciemny) i konsola.css; tryb ciemny po prefers-color-scheme ORAZ data-theme strony. */
.mk[data-obszar="silvanos"]{--mk-bg:#0F211A;--mk-fg:#EAF3EE;--mk-fg2:#93AEA2;--mk-akcent:#10B26D;--mk-na-akcent:#07100C;--mk-linia:rgba(125,180,156,.28);
  --mk-bańka:#0B1712;--mk-bańka-ja:rgba(16,178,109,.16);--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-cien:0 1px 2px rgba(0,0,0,.3),0 14px 40px -18px rgba(0,0,0,.7);--mk-t2:13.5px;--mk-t1:11px}
.mk[data-obszar="wino"]{--mk-bg:#FFFFFF;--mk-fg:#17121A;--mk-fg2:#7A6B72;--mk-akcent:#6E1E3C;--mk-na-akcent:#F8F1F4;--mk-linia:#E3D6DB;
  --mk-bańka:#F3EDEF;--mk-bańka-ja:#F6ECF0;--mk-r:18px;--mk-r-ctl:10px;--mk-font:var(--body,"Instrument Sans",ui-sans-serif,system-ui,sans-serif);
  --mk-cien:0 1px 2px rgba(23,18,26,.06),0 10px 30px -14px rgba(23,18,26,.28);--mk-t2:14px;--mk-t1:12px}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]) .mk[data-obszar="wino"]{--mk-bg:#231A1F;--mk-fg:#F6EEF1;--mk-fg2:#A8949D;--mk-akcent:#C9527A;--mk-na-akcent:#17121A;--mk-linia:#3A2C33;
    --mk-bańka:#1F171B;--mk-bańka-ja:#2B1E25;--mk-cien:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6)}
}
:root[data-theme="dark"] .mk[data-obszar="wino"]{--mk-bg:#231A1F;--mk-fg:#F6EEF1;--mk-fg2:#A8949D;--mk-akcent:#C9527A;--mk-na-akcent:#17121A;--mk-linia:#3A2C33;
  --mk-bańka:#1F171B;--mk-bańka-ja:#2B1E25;--mk-cien:0 1px 2px rgba(0,0,0,.3),0 10px 30px -14px rgba(0,0,0,.6)}
.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 */

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

/* --- jedna powierzchnia: pigułka ⇄ karta --- */
.mk{position:fixed;left:50%;bottom:var(--mk-dol);transform:translateX(-50%);width:var(--mk-szer);max-width:calc(100vw - 24px);
  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}
.mk.mk-otwarty{width:var(--mk-szer-otw);border-radius:var(--mk-r);border-color:color-mix(in srgb,var(--mk-akcent) 35%,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 *{box-sizing:border-box}

/* --- 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-akcent);display:grid;place-items:center;flex:none;
  font:700 calc(var(--mk-t2) + 3px)/1 ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,monospace}
.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 (bez zgadywania max-height) --- */
.mk-panel{display:grid;grid-template-rows:0fr;opacity:0;transition:grid-template-rows var(--mk-ruch) var(--mk-krzywa),opacity 240ms ease}
.mk.mk-otwarty .mk-panel{grid-template-rows:1fr;opacity:1}
.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{min-height:72px;max-height:var(--mk-wys-listy);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)}
.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-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}
.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)}

/* 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}
.mk-chip:hover{border-color:var(--mk-akcent);color:var(--mk-akcent)}

/* 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-bg)}
.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-wys-listy:min(280px,40vh)}
  .mk-msg{max-width:92%}
  .mk-handoff form{flex-direction:column}
}
@media (prefers-reduced-motion:reduce){.mk,.mk-panel,.mk-chip,.mk-pasek button{transition:none}.mk-pasek .mk-znak{animation:none!important}}