/* WORKVEO – asystent AI (static/js/asystent.js, v1.153.0): rozmowa z pytaniami i odpowiedziami, przykładowe pytania,
   historia własnych pytań, mikrofon przy polu pytania (v1.185.0). Wspólny dla wszystkich wyglądów; na telefonie historia jest pod rozmową. */

.as-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:14px;align-items:start}
.as-main{display:flex;flex-direction:column;gap:14px}
.as-chat{display:flex;flex-direction:column;gap:12px;min-height:240px}

/* dymki: pytanie po prawej, odpowiedź po lewej */
.as-q,.as-a{display:flex}
.as-q{justify-content:flex-end}
.as-b{max-width:min(720px,92%);padding:11px 15px;border-radius:16px;font-size:15px;line-height:1.5;overflow-wrap:anywhere}
.as-q .as-b{background:var(--accent);color:#fff;border-bottom-right-radius:5px;white-space:pre-wrap}
.as-a .as-b{background:var(--card,#fff);border:1px solid var(--line);color:var(--ink);border-bottom-left-radius:5px}
.as-a .as-b>p{margin:0 0 8px} .as-a .as-b>p:last-of-type{margin-bottom:4px}
.as-a .as-b ul,.as-a .as-b ol{margin:0 0 8px;padding-left:22px} .as-a .as-b li{margin:2px 0}
.as-tab{margin:4px 0 10px} .as-tab table{font-size:14px} .as-tab th{white-space:nowrap} .as-tab th,.as-tab td{overflow-wrap:normal}
.as-meta{display:flex;align-items:center;gap:10px;margin-top:6px;font-size:12px;color:var(--ink2)}
.as-cost{display:inline-flex;align-items:center}
.as-err{margin:0}

/* czekanie na odpowiedź: trzy kropki */
.as-dots{display:flex;align-items:center;gap:4px;color:var(--ink2)}
.as-dots i{width:7px;height:7px;border-radius:50%;background:var(--ink2);opacity:.35;animation:as-dot 1.2s infinite ease-in-out}
.as-dots i:nth-child(2){animation-delay:.15s} .as-dots i:nth-child(3){animation-delay:.3s;margin-right:6px}
@keyframes as-dot{0%,80%,100%{opacity:.25;transform:translateY(0)}40%{opacity:.9;transform:translateY(-3px)}}
@media (prefers-reduced-motion:reduce){.as-dots i{animation:none;opacity:.6}}

/* pusta rozmowa: przykładowe pytania */
.as-empty{display:flex;flex-direction:column;gap:10px;padding:8px 2px}
.as-empty-t{display:flex;align-items:center;gap:10px;font-size:17px;color:var(--ink)}
.as-empty-t .nav-ic{width:26px;height:26px;color:var(--accent)}
.as-ex{display:flex;flex-wrap:wrap;gap:8px}
.as-chip{padding:9px 14px;border:1px solid var(--line);border-radius:999px;background:var(--card,#fff);color:var(--ink);font:inherit;font-size:14px;text-align:left;cursor:pointer}
.as-chip:hover{border-color:var(--accent);background:var(--accent-soft)}

/* pole pytania z mikrofonem po prawej (v1.185.0) */
.as-form{display:flex;flex-direction:column;gap:8px;padding-top:12px;border-top:1px solid var(--line2)}
.as-in{display:flex;align-items:center;gap:10px}
.as-form textarea{flex:1;min-width:0;width:100%;min-height:58px;font-size:16px;resize:vertical}
.as-mic{flex:none;width:52px;height:52px;padding:0;display:grid;place-items:center;border:2px solid var(--accent);border-radius:50%;background:var(--accent-soft);color:var(--accent);cursor:pointer}
.as-mic .nav-ic{width:28px;height:28px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round}
.as-mic:hover{background:var(--accent);color:#fff}
.as-mic:focus-visible{outline:3px solid var(--accent-soft);outline-offset:2px}
.as-mic.on{border-color:var(--bad);background:var(--bad);color:#fff;animation:as-pulse 1.4s ease-in-out infinite}
@keyframes as-pulse{50%{box-shadow:0 0 0 8px var(--bad-soft)}}
.as-listen{display:flex;align-items:baseline;gap:8px;font-size:14px;color:var(--ink2)}
.as-listen b{color:var(--bad)}
.as-listen i{flex:none;align-self:center;width:9px;height:9px;border-radius:50%;background:var(--bad);animation:as-blink 1.2s ease-in-out infinite}
@keyframes as-blink{50%{opacity:.3}}
.as-form [hidden]{display:none!important}
@media (prefers-reduced-motion:reduce){.as-mic.on,.as-listen i{animation:none}}
.as-act{display:flex;flex-wrap:wrap;align-items:center;gap:8px}
.as-act .btn{min-height:42px}

/* historia własnych pytań */
.as-hist{display:flex;flex-direction:column;gap:6px;margin-bottom:12px;max-height:520px;overflow-y:auto}
.as-h{display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);border-radius:10px;background:var(--card,#fff);font:inherit;text-align:left;cursor:pointer}
.as-h:hover,.as-h.on{border-color:var(--accent)} .as-h.on{background:var(--accent-soft)}
.as-h-q{font-size:14px;color:var(--ink);display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

@media (max-width:860px){
  .as-grid{grid-template-columns:minmax(0,1fr)}   /* szeroka tabela w odpowiedzi przewija się w dymku, nie poszerza strony */
  .as-tab th{white-space:normal}
  .as-b{max-width:100%}
  .as-q .as-b{max-width:88%}
  .as-hist{max-height:none}
}

/* ================= przycisk „Asystent AI” w prawym dolnym rogu (v1.203.0, v1.208.0, v1.239.0) =================
   Zamiast zakładki w menu: animowana kulka (static/index.html, pokazuje ją aiOrbShow() w asystent.js). v1.208.0 (Filip 2026-10-24):
   domyślnie sama kulka, podpis „Asystent AI / Zadaj pytanie” wysuwa się w lewo po najechaniu myszką albo przy przejściu klawiszem
   Tab (kulka zostaje na miejscu, pod kursorem); na telefonie zawsze sama kulka. Nie zasłania numeru wersji (nad nim), dolnego
   paska zakładek na telefonie (nad nim) ani pasków zapisu przyklejonych do dołu strony, paska instalacji i paska „bez internetu”
   (wtedy go nie ma).
   v1.239.0 (Filip 2026-10-30: „żywa”, jak od projektanta, „jak kropla wody w kosmosie”): szklana kropla w granacie marki,
   w środku przelewa się turkusowe i błękitne światło. Kropla unosi się i faluje – wybrzusza się raz z jednej, raz z drugiej
   strony – a na to, co dzieje się dookoła (mysz w pobliżu, najechanie i wysuwany pasek, kliknięcie, przewijanie strony),
   odpowiada rozciągnięciem i drganiem jak galaretka (sprężyna w asystent.js, aiOrbKropla). Po najechaniu kropla rośnie,
   światło w środku przyspiesza, rozchodzi się od niej jedna fala, a biały pasek z podpisem wyrasta zza niej w lewo (napisy
   wjeżdżają po kolei). W spoczynku bez białej obwódki – sama kropla z cieniem. */
.ai-fab{--ai-out:cubic-bezier(.23,1,.32,1);--ai-sprez:cubic-bezier(.34,1.56,.64,1);
  position:fixed;right:22px;bottom:24px;z-index:29;display:flex;flex-direction:row-reverse;align-items:center;gap:0;padding:4px;
  border-radius:999px;text-decoration:none;-webkit-tap-highlight-color:transparent;
  animation:ai-wejscie .5s var(--ai-sprez) backwards;transition:padding .26s var(--ai-out),gap .26s var(--ai-out)}
/* biały pasek pod podpisem: w spoczynku schowany za kulką, po najechaniu pojawia się i rośnie razem z podpisem */
.ai-fab::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;
  background:var(--card,#fff);box-shadow:0 0 0 1px rgba(11,31,63,.1),0 16px 36px -14px rgba(11,31,63,.45),0 3px 10px -4px rgba(11,31,63,.16);
  opacity:0;transform:scale(.92);transform-origin:right center;transition:opacity .16s ease,transform .26s var(--ai-out)}
.ai-fab-t{display:grid;grid-template-columns:0fr;transition:grid-template-columns .26s var(--ai-out)}
.ai-fab-t>span{display:flex;flex-direction:column;min-width:0;overflow:hidden;white-space:nowrap}
.ai-fab-t b,.ai-fab-t small{opacity:0;transform:translateX(10px);transition:opacity .1s ease,transform .2s var(--ai-out)}
.ai-fab-t b{color:var(--ink,#0B1F3F);font:700 15px/1.2 var(--tytul,"Schibsted Grotesk",Inter,system-ui,sans-serif);letter-spacing:-.01em}
.ai-fab-t small{color:var(--ink2,#46566E);font-size:12.5px;line-height:1.3}
/* kulka się budzi: Tab z klawiatury, a na komputerze także najechanie myszką */
.ai-fab:focus-visible{gap:12px;padding-left:20px;outline:2px solid var(--teal,#12C9A4);outline-offset:3px}
.ai-fab:focus-visible::before{opacity:1;transform:none}
.ai-fab:focus-visible .ai-fab-t{grid-template-columns:1fr}
.ai-fab:focus-visible .ai-fab-t :is(b,small){opacity:1;transform:none}
.ai-fab:focus-visible .ai-orb{scale:1.06}
.ai-fab:focus-visible .ai-orb-p{animation-play-state:running}
@media (hover:hover) and (pointer:fine){
  .ai-fab:hover{gap:12px;padding-left:20px}
  .ai-fab:hover::before{opacity:1;transform:none}
  .ai-fab:hover .ai-fab-t{grid-template-columns:1fr}
  .ai-fab:hover .ai-fab-t b{opacity:1;transform:none;transition:opacity .22s ease .05s,transform .32s var(--ai-out) .05s}
  .ai-fab:hover .ai-fab-t small{opacity:1;transform:none;transition:opacity .22s ease .1s,transform .32s var(--ai-out) .1s}
  .ai-fab:hover .ai-orb{scale:1.06}
  .ai-fab:hover .ai-orb-p{animation-play-state:running}
  .ai-fab:hover .ai-orb::after{animation:ai-fala .9s var(--ai-out)}
}
.ai-fab:active .ai-orb{scale:.92;transition-duration:.12s;transition-timing-function:var(--ai-out)}

/* kropla: granatowa szklana kula, w środku trzy plamy światła (turkus, błękit, mięta) krążą każda w swoim tempie. .ai-orb:
   rozciąganie i drganie z asystent.js (transform) oraz powiększenie po najechaniu (scale); .ai-orb-k: falujący brzeg
   (border-radius – mały element, rysowanie tanie) i unoszenie się */
.ai-orb{--ai-d:48px;position:relative;z-index:0;flex:none;width:var(--ai-d);height:var(--ai-d);border-radius:50%;transition:scale .45s var(--ai-sprez)}
.ai-orb::before{content:"";position:absolute;inset:-12px;z-index:-1;border-radius:50%;pointer-events:none;   /* poświata wokół kulki */
  background:radial-gradient(closest-side,rgba(18,201,164,.5),rgba(34,184,230,.2) 58%,transparent);animation:ai-oddech 5s ease-in-out infinite}
.ai-orb::after{content:"";position:absolute;inset:0;border-radius:50%;pointer-events:none;   /* fala po najechaniu */
  box-shadow:0 0 0 1.5px rgba(18,201,164,.7),0 0 12px rgba(34,184,230,.45);opacity:0}
.ai-orb-k{position:absolute;inset:0;border-radius:50%;overflow:hidden;background:var(--navy,#0B1F3F);
  box-shadow:0 10px 22px -8px rgba(11,31,63,.75),0 2px 5px rgba(11,31,63,.25);animation:ai-fale 7s ease-in-out infinite,ai-plyw 6s ease-in-out infinite}
.ai-orb-k::before{content:"";position:absolute;inset:-30%;   /* wolno wirujące tło: głęboki granat z morskim odcieniem */
  background:conic-gradient(from 0deg,#0B1F3F,#0B5E73,#12306A,#0A8F80,#0B1F3F);filter:blur(4px);animation:ai-wir 18s linear infinite}
.ai-orb-p{position:absolute;inset:0;transition:translate .7s var(--ai-out);animation:ai-wir 2.6s linear infinite paused}   /* po najechaniu wiruje szybciej */
.ai-orb-p i{position:absolute;width:78%;height:78%;border-radius:50%;mix-blend-mode:screen}   /* światło się sumuje, nie zamazuje */
.ai-orb-p i:nth-child(1){left:-14%;top:-10%;background:radial-gradient(closest-side,var(--teal,#12C9A4),transparent);animation:ai-p1 7s ease-in-out infinite alternate}
.ai-orb-p i:nth-child(2){right:-18%;top:18%;background:radial-gradient(closest-side,var(--cyan,#22B8E6),transparent);animation:ai-p2 9.5s ease-in-out infinite alternate}
.ai-orb-p i:nth-child(3){left:10%;bottom:-22%;width:60%;height:60%;background:radial-gradient(closest-side,#9CF5DF,transparent);animation:ai-p3 12s ease-in-out infinite alternate}
.ai-orb-k::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;   /* szkło: odblask, jaśniejszy dół, cienka krawędź */
  background:radial-gradient(circle at 32% 22%,rgba(255,255,255,.75),rgba(255,255,255,.18) 20%,transparent 38%),
    radial-gradient(circle at 50% 118%,rgba(156,245,223,.45),transparent 52%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.22),inset 0 0 8px 1px rgba(34,184,230,.35),inset 0 -5px 10px rgba(4,12,30,.4)}
@keyframes ai-wejscie{from{opacity:0;transform:scale(.85)}}
@keyframes ai-oddech{0%,100%{opacity:.5;transform:scale(.9)}50%{opacity:1;transform:scale(1.1)}}
@keyframes ai-fale{   /* brzeg kropli wybrzusza się z różnych stron */
  0%,100%{border-radius:50% 50% 50% 50%/50% 50% 50% 50%}
  20%{border-radius:58% 42% 50% 50%/46% 54% 46% 54%}
  40%{border-radius:44% 56% 58% 42%/56% 44% 54% 46%}
  60%{border-radius:52% 48% 42% 58%/44% 58% 42% 56%}
  80%{border-radius:42% 58% 54% 46%/54% 46% 58% 42%}}
@keyframes ai-plyw{0%,100%{transform:none}30%{transform:translateY(-1.5px) scale(1.025,.975)}65%{transform:translateY(1px) scale(.98,1.02)}}   /* unoszenie się */
@keyframes ai-wir{to{transform:rotate(360deg)}}
@keyframes ai-p1{0%{transform:none}50%{transform:translate(30%,22%) scale(1.15)}100%{transform:translate(12%,48%) scale(.9)}}
@keyframes ai-p2{0%{transform:none}50%{transform:translate(-38%,-26%) scale(.85)}100%{transform:translate(-20%,22%) scale(1.12)}}
@keyframes ai-p3{0%{transform:none}50%{transform:translate(42%,-36%) scale(1.2)}100%{transform:translate(-8%,-60%) scale(.95)}}
@keyframes ai-fala{0%{opacity:1;transform:none}100%{opacity:0;transform:scale(1.75)}}

/* miejsce pod przyciskiem na końcu strony; strony z paskiem zapisu przyklejonym do dołu, pasek instalacji, brak internetu
   i otwarte menu na telefonie („Więcej”): bez przycisku */
body:has(#aiOrb:not(.hidden)) #app{padding-bottom:116px}
body:has(.grp-save,.mx-foot,.ga-bar,.install-bar,.off-bar,.top.open) .ai-fab{display:none}

/* telefon: sama kulka nad dolnym paskiem zakładek */
@media (max-width:760px){
  .ai-fab{right:14px;bottom:calc(74px + env(safe-area-inset-bottom))}
  .ai-orb{--ai-d:46px}
  body:has(#aiOrb:not(.hidden)) #app{padding-bottom:156px}
}
/* ograniczony ruch w systemie: kulka stoi w miejscu (bez oddechu, wirowania, fali i zerkania), pasek z podpisem tylko się
   pojawia, bez wysuwania */
@media (prefers-reduced-motion:reduce){
  .ai-fab,.ai-orb::before,.ai-orb::after,.ai-orb-k,.ai-orb-k::before,.ai-orb-p,.ai-orb-p i{animation:none!important}
  .ai-fab,.ai-fab-t,.ai-orb,.ai-orb-p{transition:none}
  .ai-fab .ai-orb,.ai-fab::before,.ai-fab-t b,.ai-fab-t small{transform:none!important}
  .ai-fab .ai-orb{scale:none!important}
  .ai-fab::before,.ai-fab-t b,.ai-fab-t small{transition:opacity .15s ease}
}
@media print{.ai-fab{display:none!important}}