/* K-260c — KOMPONENT „ŻALUZJA” (markup: templates/_zaluzja.html, ruch i API: static/zaluzja.js).
   Roleta wyjeżdża spod kotwicy jak zaciągana żaluzja: krawędź kotwicy tnie (clip-path), płótno zjeżdża zza niej,
   lamele są widoczne w ruchu i przygasają, gdy roleta stanie; dolna listwa z uchwytem = miejsce na gest „zwiń”.
   Kierunek wybiera skrypt atrybutem `data-zl-efekt`: gora | prawo | lewo (boczne na wąskim ekranie przechodzą w „gora”).
   🔴 Zero nowych barw: tokeny `skin.css` i rgba już użyte w `home_scena.css` / `makieta_firma.css`. */

.zl{--zl-krzywa-w:cubic-bezier(.22,1,.36,1);--zl-krzywa-z:cubic-bezier(.65,0,.35,1);--zl-czas-w:.64s;--zl-czas-z:.42s;
  position:fixed;z-index:57;top:var(--zl-gora,0px);pointer-events:none}
.zl[hidden]{display:none}
.zl-roleta{pointer-events:auto;position:relative;display:flex;flex-direction:column;
  max-height:calc(100vh - var(--zl-gora,0px) - 12px);max-height:calc(100dvh - var(--zl-gora,0px) - 12px);
  background:linear-gradient(180deg,rgba(4,21,15,.95),rgba(15,42,31,.93));
  backdrop-filter:blur(18px) saturate(120%);-webkit-backdrop-filter:blur(18px) saturate(120%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 36px 70px -30px rgba(0,0,0,.9),0 0 0 1px rgba(4,21,15,.4);
  transition:transform var(--zl-czas-z) var(--zl-krzywa-z)}
.zl-otwarta .zl-roleta{transition:transform var(--zl-czas-w) var(--zl-krzywa-w)}

/* lamele: delikatne poziome szczeliny, wyraźniejsze w ruchu, przygasają po zatrzymaniu (klasa `zl-spoczynek`) */
.zl-roleta::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:repeating-linear-gradient(180deg,rgba(255,255,255,0) 0 25px,rgba(255,255,255,.035) 25px 26px,rgba(0,0,0,.18) 26px 27px);
  opacity:.95;transition:opacity 1.1s var(--zl-krzywa-w)}
.zl-spoczynek .zl-roleta::before{opacity:.3}
/* krawędź prowadząca: cienkie światło akcentu */
.zl-roleta::after{content:"";position:absolute;pointer-events:none;background:linear-gradient(90deg,rgba(16,185,129,0),rgba(16,185,129,.75),rgba(16,185,129,0));
  box-shadow:0 0 18px rgba(16,185,129,.45)}

.zl-tresc{position:relative;flex:1 1 auto;min-height:0;overflow:auto;overscroll-behavior:contain;scrollbar-width:thin;
  padding:22px 30px 16px;opacity:0;transform:translateY(-8px);transition:opacity .18s linear,transform .2s linear}
.zl-otwarta .zl-tresc{opacity:1;transform:none;transition:opacity .45s .2s var(--zl-krzywa-w),transform .6s .14s var(--zl-krzywa-w)}
.zl-tresc:focus{outline:none}

.zl-zamknij{position:absolute;z-index:2;top:10px;right:12px;padding:6px 9px;border:0;background:none;cursor:pointer;
  font:inherit;font-size:.92rem;line-height:1;color:var(--muted);border-radius:8px;transition:color .2s var(--krzywa)}
.zl-zamknij:hover{color:var(--ink)}
.zl-zamknij:focus-visible{outline:1px solid var(--accent);outline-offset:2px}

/* S35: listwa jest przyciskiem „Zwiń” — reset wyglądu przycisku, kształt jak dotąd */
.zl-listwa{flex:none;position:relative;display:flex;align-items:center;justify-content:center;touch-action:none;cursor:pointer;
  width:100%;margin:0;padding:0;border:0;font:inherit;color:inherit;appearance:none;-webkit-appearance:none;
  background:linear-gradient(180deg,rgba(16,185,129,.09),rgba(16,185,129,0))}
.zl-listwa:active{cursor:grabbing}
.zl-listwa:focus-visible{outline:1px solid var(--accent);outline-offset:-2px}
.zl-uchwyt{display:block;border-radius:999px;background:rgba(255,255,255,.22);transition:background .2s var(--krzywa)}
.zl-listwa:hover .zl-uchwyt{background:rgba(16,185,129,.6)}

/* mgła pod roletą (tylko roleta górna): zaczyna się POD kotwicą, więc menu zostaje klikalne */
.zl-mgla{position:fixed;z-index:56;left:0;right:0;bottom:0;top:var(--zl-gora,0px);background:rgba(4,21,15,.5);
  backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);opacity:0;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 70px);mask-image:linear-gradient(180deg,transparent,#000 70px);pointer-events:none;transition:opacity .45s var(--zl-krzywa-w)}
.zl-mgla.on{opacity:1;pointer-events:auto}

/* ——— GÓRA: opada spod kotwicy ——— */
.zl[data-zl-efekt="gora"]{left:50%;width:min(var(--zl-szer,920px),calc(100vw - 24px));transform:translateX(-50%);
  clip-path:inset(0 -80px -110px -80px)}
.zl[data-zl-efekt="gora"] .zl-roleta{border-top:0;border-radius:0 0 18px 18px;transform:translateY(calc(-100% - 2px))}
.zl[data-zl-efekt="gora"].zl-otwarta .zl-roleta{transform:none}
.zl[data-zl-efekt="gora"] .zl-roleta::after{left:9%;right:9%;bottom:-1px;height:1px}
.zl[data-zl-efekt="gora"] .zl-listwa{height:18px;border-top:1px solid rgba(16,185,129,.22);border-radius:0 0 18px 18px}
.zl[data-zl-efekt="gora"] .zl-uchwyt{width:40px;height:4px}

/* ——— BOK: wyjeżdża zza krawędzi kotwicy (np. tabelka obok okna czatu) ——— */
.zl[data-zl-efekt="prawo"]{left:var(--zl-lewo,0px);width:min(var(--zl-szer,420px),calc(100vw - var(--zl-lewo,0px) - 12px));clip-path:inset(-110px -110px -110px 0)}
.zl[data-zl-efekt="lewo"]{right:var(--zl-prawo,0px);width:min(var(--zl-szer,420px),calc(100vw - var(--zl-prawo,0px) - 12px));clip-path:inset(-110px 0 -110px -110px)}
.zl[data-zl-efekt="prawo"] .zl-roleta{flex-direction:row;border-left:0;border-radius:0 18px 18px 0;transform:translateX(calc(-100% - 2px))}
.zl[data-zl-efekt="lewo"] .zl-roleta{flex-direction:row-reverse;border-right:0;border-radius:18px 0 0 18px;transform:translateX(calc(100% + 2px))}
.zl[data-zl-efekt="prawo"].zl-otwarta .zl-roleta,.zl[data-zl-efekt="lewo"].zl-otwarta .zl-roleta{transform:none}
.zl[data-zl-efekt="prawo"] .zl-roleta::before,.zl[data-zl-efekt="lewo"] .zl-roleta::before{
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0) 0 25px,rgba(255,255,255,.035) 25px 26px,rgba(0,0,0,.18) 26px 27px)}
.zl[data-zl-efekt="prawo"] .zl-roleta::after{top:9%;bottom:9%;right:-1px;width:1px;background:linear-gradient(180deg,rgba(16,185,129,0),rgba(16,185,129,.75),rgba(16,185,129,0))}
.zl[data-zl-efekt="lewo"] .zl-roleta::after{top:9%;bottom:9%;left:-1px;width:1px;background:linear-gradient(180deg,rgba(16,185,129,0),rgba(16,185,129,.75),rgba(16,185,129,0))}
.zl[data-zl-efekt="prawo"] .zl-tresc,.zl[data-zl-efekt="lewo"] .zl-tresc{transform:translateX(-8px)}
.zl[data-zl-efekt="prawo"].zl-otwarta .zl-tresc,.zl[data-zl-efekt="lewo"].zl-otwarta .zl-tresc{transform:none}
.zl[data-zl-efekt="prawo"] .zl-listwa,.zl[data-zl-efekt="lewo"] .zl-listwa{width:18px;background:none}
.zl[data-zl-efekt="prawo"] .zl-listwa{border-left:1px solid rgba(16,185,129,.22)}
.zl[data-zl-efekt="lewo"] .zl-listwa{border-right:1px solid rgba(16,185,129,.22)}
.zl[data-zl-efekt="prawo"] .zl-uchwyt,.zl[data-zl-efekt="lewo"] .zl-uchwyt{width:4px;height:40px}

/* ——— DÓŁ (K-279): kotwica na dole (wąska stopka), roleta jedzie W GÓRĘ znad jej górnej krawędzi ———
   Listwa z uchwytem stoi u GÓRY — to krawędź prowadząca, tak jak przy rolecie opadającej jest u dołu. */
.zl[data-zl-efekt="dol"]{top:auto;bottom:var(--zl-dol,0px);left:var(--zl-x,8px);width:min(var(--zl-szer,320px),calc(100vw - 16px));
  clip-path:inset(-110px -80px 0 -80px)}
.zl[data-zl-efekt="dol"] .zl-roleta{flex-direction:column-reverse;border-bottom:0;border-radius:14px 14px 0 0;transform:translateY(calc(100% + 2px));
  max-height:calc(100vh - var(--zl-dol,0px) - 12px);max-height:calc(100dvh - var(--zl-dol,0px) - 12px)}
.zl[data-zl-efekt="dol"].zl-otwarta .zl-roleta{transform:none}
.zl[data-zl-efekt="dol"] .zl-roleta::after{left:9%;right:9%;top:-1px;height:1px}
.zl[data-zl-efekt="dol"] .zl-listwa{height:14px;border-bottom:1px solid rgba(16,185,129,.22);border-radius:14px 14px 0 0;
  background:linear-gradient(0deg,rgba(16,185,129,.09),rgba(16,185,129,0))}
.zl[data-zl-efekt="dol"] .zl-uchwyt{width:32px;height:3px}
.zl[data-zl-efekt="dol"] .zl-tresc{padding:14px 34px 14px 20px;transform:translateY(8px)}
.zl[data-zl-efekt="dol"].zl-otwarta .zl-tresc{transform:none}
.zl[data-zl-efekt="dol"] .zl-zamknij{top:18px;right:8px}
/* pasek na całą szerokość (np. „Kontakt” w stopce): cienki, bez ✕ (zwija drugi klik, Esc, klik obok, gest w dół) */
.zl.zl-pasek[data-zl-efekt="dol"]{left:0;width:100vw;clip-path:inset(-110px 0 0 0)}
.zl.zl-pasek[data-zl-efekt="dol"] .zl-roleta{border-radius:0;border-left:0;border-right:0}
.zl.zl-pasek[data-zl-efekt="dol"] .zl-listwa{height:8px;border-radius:0}
.zl-pasek .zl-uchwyt{width:26px;height:2px}
.zl-pasek .zl-zamknij{display:none}
.zl.zl-pasek[data-zl-efekt="dol"] .zl-tresc{padding:7px 24px 9px;overflow:hidden}

@media (max-width:700px){
  .zl-tresc{padding:18px 18px 12px}
  .zl[data-zl-efekt="gora"]{width:calc(100vw - 16px)}
}
@media (prefers-reduced-motion:reduce){
  .zl-roleta,.zl-tresc,.zl-mgla,.zl-roleta::before{transition:none!important}
}