/* =====================================================================================================
   LAUNCHER v3 (12.10.2026): „Zdzich zagląda znad karty”. Mała biała karta-zachęta (jedno zdanie + żółta pigułka) w prawym dolnym rogu,
   a DUŻY Zdzich do pasa wychyla się zza jej górnej krawędzi (okno zasłania mu dół, więc krawędź karty ucina postać naturalnie).
   Stan zwężony (klasa --sam): sam Zdzich wychylony zza dolnej krawędzi ekranu, bez karty. Ładować PO agent-ui.css i okno-v6.css.
   Animacje tylko transform i opacity. Wymiary postaci w jednostce --u (komputer 1px, telefon .8px).
   ===================================================================================================== */
.zd4-baner{--u:1px;--s:.71;--W:340px;--Hc:84px;--tp:4.4s;--tt:.55s;--g:calc(14px + env(safe-area-inset-bottom));--zny:#132F52;--zol:#FFC72C;right:max(16px,env(safe-area-inset-right));bottom:var(--g)}
@media (max-width:640px){.zd4-baner{--u:.8px;--s:.89;--W:min(78vw,304px);--Hc:72px;--tp:5.6s;--tt:.7s;--g:calc(10px + env(safe-area-inset-bottom));right:max(12px,env(safe-area-inset-right))}}

/* rezerwa na dole strony: stan zwężony (60 px) + zapas; na samym dole strony launcher i tak zwęża się (JS), więc stopka nie jest zasłonięta */
.sf{padding-bottom:calc(84px + env(safe-area-inset-bottom))}

.zd4-baner .zd4-l3{position:relative}
.zd4-baner .zd4-launcher{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:0;min-height:0;padding:0;margin:0;border:0;border-radius:0;background:none;box-shadow:none;color:var(--zny);animation:none;font:inherit;text-align:left;-webkit-tap-highlight-color:transparent;touch-action:manipulation;cursor:pointer;pointer-events:none}
.zd4-baner .zd4-launcher:hover{background:none}
.zd4-baner:not(.zd4-baner--pauza) .zd4-launcher{animation:none}
.zd4-baner .zd4-launcher:focus-visible{outline:0;border-radius:0}

/* ---- postać: okno przycina ją u dołu (to jest „krawędź ściany”) ---- */
.zd4-l3-postac{display:block;margin-left:calc(14*var(--u));width:calc(190*var(--u));position:relative;z-index:1;pointer-events:none}
.zd4-l3-okno{position:relative;display:block;width:calc(190*var(--u));height:calc(142*var(--u));overflow:hidden;pointer-events:none}
.zd4-l3-ruch{position:absolute;left:0;top:0;display:block;width:100%;height:calc(146*var(--u));transform-origin:50% 100%}
.zd4-l3-poza{position:absolute;left:0;top:0;width:100%;height:100%;max-width:none;pointer-events:auto;user-select:none;-webkit-user-drag:none;transform-origin:calc(190*var(--u)) calc(142*var(--u));clip-path:inset(0 0 0 0);transition:transform var(--tt) cubic-bezier(.3,.7,.3,1),clip-path var(--tt) cubic-bezier(.3,.7,.3,1)}
.zd4-l3-poza--b{opacity:0}

/* ---- karta ---- */
.zd4-l3-karta{position:relative;z-index:2;display:flex;align-items:center;gap:10px;box-sizing:border-box;width:var(--W);height:var(--Hc);padding:0 12px 0 14px;border:2px solid var(--zny);border-radius:16px;
  background:#fff radial-gradient(#D5E1F3 1px,transparent 1.4px) 0 0/10px 10px;box-shadow:0 3px 0 var(--zny),0 14px 28px rgba(13,43,85,.25);pointer-events:auto}
.zd4-l3-zdanie{flex:1;min-width:0;font:700 .9375rem/1.3 var(--zd-font);color:var(--zny);text-wrap:balance}
.zd4-baner .zd4-launcher__t{flex:none;display:inline-flex;align-items:center;gap:8px;box-sizing:border-box;min-height:44px;margin:0;padding:0 12px 0 14px;border:2.5px solid var(--zny);border-radius:999px;background:var(--zol);color:var(--zny);font:800 .875rem/1.1 var(--zd-font);white-space:nowrap;
  box-shadow:0 3px 0 var(--zny);transition:transform .16s ease,box-shadow .16s ease}
.zd4-baner .zd4-launcher__t::after{content:"";flex:none;width:8px;height:8px;border:solid var(--zny);border-width:3px 3px 0 0;transform:rotate(45deg) translate(-1px,1px);border-radius:1px}
.zd4-baner .zd4-launcher:hover .zd4-launcher__t{transform:translateY(-2px);box-shadow:0 5px 0 var(--zny)}
.zd4-baner .zd4-launcher:active .zd4-launcher__t{transform:translateY(2px);box-shadow:0 1px 0 var(--zny)}
.zd4-baner .zd4-launcher:hover .zd4-l3-ruch{transform:translateY(-3px) scale(1.02)}
.zd4-baner .zd4-launcher:active .zd4-l3-ruch{transform:scale(.98)}
.zd4-l3-ruch{transition:transform .16s ease}
@media (max-width:640px){
  .zd4-l3-karta{padding:0 10px 0 12px;gap:8px;border-radius:14px}
  .zd4-l3-zdanie{font-size:.8125rem;line-height:1.28}
  .zd4-baner .zd4-launcher__t{min-height:44px;padding:0 11px 0 13px;font-size:.875rem}
}

/* ---- X karty: na narożniku karty, cel dotyku 44 px ---- */
.zd4-baner .zd4-l3-x{position:absolute;z-index:3;top:calc(142*var(--u) - 22px);right:-8px;width:44px;height:44px;display:grid;place-items:center;border:0;border-radius:50%;background:radial-gradient(circle,var(--zny) 0 11px,transparent 11.5px);color:#fff;cursor:pointer}
.zd4-baner .zd4-l3-x .zd4-ik{width:12px;height:12px}
.zd4-baner .zd4-l3-x:focus-visible{outline:3px solid #0B3D91;outline-offset:-4px;background:radial-gradient(circle,var(--zny) 0 11px,#fff 11.5px);color:var(--zny)}

/* ---- plakietka „Masz wyniki” (stan po opłaconym wyniku; data-hist=1): zielona, na krawędzi karty przy ramieniu Zdzicha ---- */
.zd4-baner .zd5-badge{top:calc(142*var(--u) - 15px);right:auto;left:calc(168*var(--u));z-index:3;padding:3px 10px;border:2px solid #fff;border-radius:999px;background:#0F7A52;color:#fff;font:800 .75rem/1.3 var(--zd-font);transform:rotate(-5deg);box-shadow:0 3px 8px rgba(13,43,85,.3)}

/* ---- komunikat tylko dla czytnika ekranu ---- */
.zd4-baner .zd4-lau-dymek{position:absolute;width:1px;height:1px;margin:-1px;padding:0;border:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;box-shadow:none;background:none;animation:none}
.zd4-baner .zd4-lau-dymek[hidden]{display:none}

/* ---- stan zwężony: sam Zdzich wychylony zza dolnej krawędzi ekranu (głowa i ramiona, ok. 60 px). Układ się NIE zmienia (CLS 0): karta tylko znika (visibility),
        a postać przesuwa się, skaluje i przycina transformacją i clip-path do prawego dolnego rogu ---- */
.zd4-baner--sam .zd4-l3-karta,.zd4-baner--sam .zd4-l3-x,.zd4-baner--sam .zd5-badge{visibility:hidden;opacity:0}
.zd4-baner--sam .zd4-launcher{width:auto;height:auto;min-height:0;border-radius:0;justify-content:flex-start}
.zd4-baner--sam .zd4-l3-okno{overflow:visible}
.zd4-baner--sam .zd4-l3-poza--a{clip-path:inset(0 calc(56*var(--u)) calc(61.5*var(--u)) calc(13*var(--u)));
  transform:translate(calc(var(--W) - 204*var(--u) + 56*var(--u)*var(--s)),calc(var(--Hc) + var(--g) + 57.5*var(--u)*var(--s))) scale(var(--s))}
.zd4-baner--sam .zd4-l3-poza--b{clip-path:inset(0 calc(12*var(--u)) calc(61.5*var(--u)) calc(57*var(--u)));
  transform:translate(calc(var(--W) - 204*var(--u) + 12*var(--u)*var(--s)),calc(var(--Hc) + var(--g) + 57.5*var(--u)*var(--s))) scale(var(--s))}
.zd4-baner:not(.zd4-baner--sam) .zd4-l3-karta{animation:zd4-l3-karta-in var(--tt) cubic-bezier(.2,1.1,.4,1) both}
.zd4-baner--sam .zd4-l3-postac{animation:zd4-l3-pop-a var(--tt) ease both}
.zd4-baner:not(.zd4-baner--sam) .zd4-l3-postac{animation:zd4-l3-pop-b var(--tt) ease both}

/* ---- fokus klawiaturą: biały + niebieski pierścień na karcie, a w stanie zwężonym na całej postaci ---- */
.zd4-baner .zd4-launcher:focus-visible .zd4-l3-karta{outline:3px solid #0B3D91;outline-offset:3px;box-shadow:0 3px 0 var(--zny),0 0 0 7px #fff}
.zd4-baner--sam .zd4-launcher:focus-visible .zd4-l3-poza--a,.zd4-baner--sam .zd4-launcher:focus-visible .zd4-l3-poza--b{filter:drop-shadow(0 0 0 #0B3D91) drop-shadow(0 0 3px #0B3D91) drop-shadow(0 0 2px #fff)}

/* ---- animacje (wyłączone w prefers-reduced-motion, wstrzymane gdy karta w tle: --pauza, i gdy piszesz: --pisze) ---- */
/* v3.2 (płynność): oddychanie na osobnym elemencie (okno) i bez przerwy, także podczas wychylania, więc nie ma skoku skali na starcie ruchu */
.zd4-baner:not(.zd4-baner--pauza):not(.zd4-baner--pisze) .zd4-l3-okno{animation:zd4-l3-oddech 3.6s ease-in-out infinite;transform-origin:50% 100%}
.zd4-baner.zd4-baner--macha:not(.zd4-baner--pisze) .zd4-l3-ruch{animation:zd4-l3-peek var(--tp) cubic-bezier(.3,.7,.4,1) 1}
.zd4-baner.zd4-baner--macha:not(.zd4-baner--pisze) .zd4-l3-poza--a{animation:zd4-l3-poza-a var(--tp) linear 1}
.zd4-baner.zd4-baner--macha:not(.zd4-baner--pisze) .zd4-l3-poza--b{animation:zd4-l3-poza-b var(--tp) linear 1}
.zd4-baner--pauza *,.zd4-baner--pauza{animation-play-state:paused!important}
@keyframes zd4-l3-oddech{0%,100%{transform:scale(1)}50%{transform:scale(1.025)}}
@keyframes zd4-l3-peek{0%{transform:translateY(0)}16%{transform:translateY(104%)}38%{transform:translateY(104%)}60%{transform:translateY(-4%)}74%{transform:translateY(0)}100%{transform:translateY(0)}}
@keyframes zd4-l3-poza-a{0%,32%{opacity:1}34%,80%{opacity:0}100%{opacity:1}}
@keyframes zd4-l3-poza-b{0%,32%{opacity:0}34%,80%{opacity:1}100%{opacity:0}}
@keyframes zd4-l3-karta-in{from{opacity:0;transform:translateY(10px) scale(.97)}to{opacity:1;transform:none}}
@keyframes zd4-l3-pop-a{from{opacity:.55}to{opacity:1}}
@keyframes zd4-l3-pop-b{from{opacity:.75}to{opacity:1}}
@media (prefers-reduced-motion:reduce){
  .zd4-baner *,.zd4-baner{animation:none!important;transition:none!important}
}

/* v3.1: zwężony Zdzich większy (ok. 85 px zamiast 60) */
.zd4-baner--sam{--s:1}
@media (max-width:640px){.zd4-baner--sam{--s:1.05}}

/* v3.2 (płynność): pozy zmieniają się płynnie (zamiana w ukryciu, powrót wygaszeniem), karta i znaczki wygasają zamiast znikać nagle, warstwy ruchu na GPU */
.zd4-baner--sam .zd4-l3-karta,.zd4-baner--sam .zd4-l3-x,.zd4-baner--sam .zd5-badge{transition:opacity .4s ease,visibility 0s linear .4s}
.zd4-baner--macha .zd4-l3-ruch,.zd4-baner .zd4-l3-okno{will-change:transform}
.zd4-baner .zd4-l3-poza{backface-visibility:hidden}

/* v3.4: gdy otwarty jest duży widget, karta i jej krzyżyk są ukryte (nie wystaje zbłąkany X) */
.zd4-baner[data-tryb=pelny] .zd4-l3{visibility:hidden}