/* ============================================================
   MESHUGA — kot-asystent cybersory (03.11.2026, artefakt)
   Prawy dolny róg: kot w segmentowanym cyber-kółku (sam CSS, jeden obieg
   skanu co 6 s, bez poświaty). Klik → małe okienko szybkich pytań
   z przyciskiem „Czatuj” do pełnej aplikacji. Na telefonie arkusz od dołu.
   Paleta zamknięta: ink / krew / hot / kość (+ ich mieszanki).
   Warstwa 40: nad treścią i paskiem (30), pod lightboxem (200),
   oknem Sadzonek (300) i grą (500).
   ============================================================ */
.kot{
  --k-ink:#0e0e12; --k-ink2:color-mix(in srgb, #f6f2f3 5%, #0e0e12); --k-line:rgba(246,242,243,.12);
  --k-krew:#e11d33; --k-hot:#ff3a52; --k-kosc:#f6f2f3;
  position:fixed; z-index:40;
  right:max(18px, env(safe-area-inset-right)); bottom:max(18px, env(safe-area-inset-bottom));
  font-family:var(--f-sans); color:var(--k-kosc);
}
/* Kontakt na telefonie/tablecie: przyklejony pasek konfiguratora (Wstecz/cena/Dalej, ~64 px)
   → kot staje nad nim, żeby nie zasłaniać „Dalej” */
@media (max-width:900px){
  html[data-route="contact"]:has(.contact-wrap:not([data-mode="quick"]) .konf-nav) .kot{
    bottom:calc(84px + env(safe-area-inset-bottom));}
}
@media (min-width:481px) and (max-width:900px){
  html[data-route="contact"]:has(.contact-wrap:not([data-mode="quick"]) .konf-nav) .kot__panel{
    max-height:min(620px, calc(100dvh - 214px));}
}
/* menu na telefonie / panel Przewodnika otwarty → kot się chowa */
.nav__scrim.on ~ .kot{opacity:0; pointer-events:none;}
html[data-route="soraos"] .kot, html[data-route="polityka"] .kot{display:none;}
/* okno Meshugi (#meshuga) na ekranie → kot w rogu znika, żeby nie było dwóch czatów naraz */
.kot.kot--przy-oknie:not(.kot--open){opacity:0; pointer-events:none; visibility:hidden;}

/* ---------- przycisk: kot + cyber-kółko ---------- */
.kot__btn{
  position:relative; width:64px; height:64px; padding:0; border:0; border-radius:50%;
  background:var(--k-ink) url("assety/kot-128.webp") center/cover no-repeat;
  cursor:pointer; display:block;
  box-shadow:0 0 0 5px var(--k-ink), 0 12px 26px rgba(0,0,0,.5);
  transition:transform .2s cubic-bezier(.2,.8,.2,1), opacity .2s;
}
.kot__btn:hover{transform:translateY(-2px);}
.kot__btn:focus-visible{outline:3px solid var(--k-kosc); outline-offset:12px;}

/* pierścień: łuki krew o różnej długości, przerwy jak w złączu */
.kot__ring, .kot__skan{
  position:absolute; inset:-10px; border-radius:50%; pointer-events:none;
  -webkit-mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
          mask:radial-gradient(farthest-side, transparent calc(100% - 4px), #000 calc(100% - 4px));
}
.kot__ring{
  background:conic-gradient(from -18deg,
    var(--k-krew) 0 74deg, transparent 0 82deg,
    var(--k-krew) 0 96deg, transparent 0 104deg,
    var(--k-krew) 0 158deg, transparent 0 182deg,
    var(--k-krew) 0 254deg, transparent 0 262deg,
    var(--k-krew) 0 276deg, transparent 0 284deg,
    var(--k-krew) 0 338deg, transparent 0 360deg);
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
/* skan: jasna głowica kość z ogonem, jeden obieg, potem przerwa */
.kot__skan{
  background:conic-gradient(from 0deg, transparent 0 250deg, rgba(246,242,243,.55) 330deg, var(--k-kosc) 356deg, transparent 0);
  opacity:0; animation:kot-skan 6s cubic-bezier(.45,0,.25,1) 1.2s infinite;
}
@keyframes kot-skan{
  0%   {transform:rotate(0deg);   opacity:1;}
  24%  {transform:rotate(360deg); opacity:1;}
  27%, 100% {transform:rotate(360deg); opacity:0;}
}
.kot__btn:hover .kot__ring{transform:rotate(30deg);}
.kot--open .kot__ring{transform:rotate(90deg);}
.kot--open .kot__skan{animation:none; opacity:0;}

/* ---------- żywy kot (meshuga-kot.js), wariant A z 04.11 ----------
   Dysk 64 px = przycisk, kółko SVG z aplikacji wystaje o 10 px (całość 84 px), jak stare kółko CSS.
   Style modułu .mk* tylko w przestrzeni .kot, kolory z tokenów --k-*. */
.kot{--mk-futro:var(--k-ink); --mk-obrys:var(--k-kosc); --mk-disk:color-mix(in srgb, var(--k-ink) 90%, var(--k-kosc));}
.kot__btn--zywy{background:var(--k-ink);}
.kot .kot__mk{position:absolute; inset:-10px; display:block; border-radius:50%;}
.kot .mk-ring-slot{position:absolute; inset:0; transition:transform .5s cubic-bezier(.2,.8,.2,1), opacity .45s ease;}
.kot .mk.mk-mysli .mk-ring-slot{opacity:.28;}   /* 04.11: „Meshuga myśli” — gra wstęga, kółko przygasa */
.kot .mk-ring{width:100%; height:100%; display:block; overflow:visible;}
.kot .mk-disk{position:absolute; inset:0; border-radius:50%; overflow:hidden; background:var(--mk-disk);}
.kot .mk-has-ring .mk-disk{inset:12%;}
.kot .mk-kot{position:absolute; left:4%; width:92%; bottom:0; overflow:visible;}
.kot .mk-obrys{stroke:var(--mk-obrys); opacity:.9;}
.kot .mk-wasy{stroke:var(--mk-obrys); opacity:.45;}
.kot .mk-futro{fill:var(--mk-futro);}
.kot .mk-oko{fill:var(--k-hot); transform-box:fill-box; transform-origin:center; transition:transform .25s cubic-bezier(.22,.8,.24,1);}
.kot .mk-squint .mk-oko{transform:scaleY(.42);}
.kot .mk-blysk{fill:var(--k-kosc); opacity:0;}
.kot .mk-oczy{transition:transform .18s linear;}
.kot .mk-ucho-p{transform-box:fill-box; transform-origin:20% 100%;}
.kot .mk-krew{stroke:var(--k-krew);} .kot .mk-kosc{stroke:var(--k-kosc);} .kot .mk-hot-f{fill:var(--k-hot);}
.kot__btn:hover .mk-ring-slot{transform:rotate(30deg);}
.kot--open .kot__btn .mk-ring-slot{transform:rotate(90deg);} /* otwarcie wygrywa z najechaniem */

/* kropka „mam coś dla Ciebie” */
.kot__dot{position:absolute; top:-4px; right:-4px; width:16px; height:16px; border-radius:50%;
  background:var(--k-hot); border:3px solid var(--k-ink); display:none;}
.kot--tip .kot__dot{display:block;}

/* ---------- dymek podpowiedzi ---------- */
.kot__tip{
  position:absolute; right:0; bottom:90px; width:min(300px, calc(100vw - 36px));
  background:var(--k-ink2); border:1px solid var(--k-line); border-radius:14px;
  padding:14px 14px 12px; font-size:15px; line-height:1.45;
  box-shadow:0 14px 34px rgba(0,0,0,.55);
  opacity:0; transform:translateY(8px); pointer-events:none;
  transition:opacity .25s, transform .25s cubic-bezier(.2,.8,.2,1);
}
.kot--tip .kot__tip{opacity:1; transform:none; pointer-events:auto;}
.kot__tip::after{content:""; position:absolute; right:26px; bottom:-7px; width:12px; height:12px;
  background:var(--k-ink2); border-right:1px solid var(--k-line); border-bottom:1px solid var(--k-line);
  transform:rotate(45deg);}
.kot__tipRow{display:flex; gap:8px; margin-top:12px;}

.kot__b{ /* przyciski w dymku i okienku */
  min-height:44px; padding:0 16px; border-radius:999px; border:1px solid var(--k-line);
  background:transparent; color:var(--k-kosc); font:600 14px/1 var(--f-sans); cursor:pointer;
}
.kot__b--main{background:var(--k-krew); border-color:var(--k-krew); color:#fff;}
.kot__b:hover{border-color:var(--k-kosc);}
.kot__b:focus-visible{outline:2px solid var(--k-kosc); outline-offset:2px;}

/* ---------- okienko Meshugi ---------- */
.kot__tlo{display:none;}
.kot__panel{
  position:absolute; right:0; bottom:90px;
  width:min(360px, calc(100vw - 36px)); max-height:min(620px, calc(100dvh - 130px));
  display:flex; flex-direction:column;
  background:var(--k-ink); border:1px solid var(--k-line); border-radius:18px;
  box-shadow:0 20px 50px rgba(0,0,0,.6); overflow:hidden;
  opacity:0; transform:translateY(12px) scale(.98); transform-origin:bottom right; pointer-events:none;
  transition:opacity .22s, transform .26s cubic-bezier(.2,.8,.2,1);
}
.kot--open .kot__panel{opacity:1; transform:none; pointer-events:auto;}
.kot--open .kot__tip{display:none;}
.kot__uchwyt{display:none;}
.kot__head{display:flex; align-items:center; gap:12px; padding:14px 12px 12px 16px; border-bottom:1px solid var(--k-line); flex:none;}
.kot__ava{width:40px; height:40px; border-radius:50%; flex:none; background:url("assety/kot-72.webp") center/cover;
  box-shadow:0 0 0 2px var(--k-ink), 0 0 0 3px var(--k-krew);}
.kot__name{font-weight:700; font-size:17px; line-height:1.2; color:#f6f2f3;}   /* 04.11 maisa: biało-czerwony, kolory cybersory */
.kot__name small{display:block; font:500 13px/1.3 var(--mono); color:#ff3a52; margin-top:2px; font-weight:500;}
.kot__x{margin-left:auto; width:44px; height:44px; border-radius:50%; border:0; background:transparent;
  color:var(--k-kosc); font-size:22px; cursor:pointer; flex:none;}
.kot__x:hover{background:rgba(246,242,243,.07);}
.kot__x:focus-visible{outline:2px solid var(--k-kosc);}

.kot__log{flex:1 1 auto; min-height:64px; overflow-y:auto; padding:14px 16px 10px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain;}
.kot__m{max-width:88%; padding:10px 13px; border-radius:14px; font-size:15px; line-height:1.45; white-space:pre-line;}
.kot__m--kot{align-self:flex-start; background:var(--k-ink2); border:1px solid var(--k-line); border-top-left-radius:4px;}
.kot__m--ty{align-self:flex-end; background:var(--k-krew); color:#fff; border-top-right-radius:4px;}
.kot__m a{color:var(--k-hot); font-weight:600;}
.kot__m--kot .kot__go{display:inline-flex; align-items:center; min-height:44px; margin-top:8px; padding:0 14px;
  border-radius:999px; border:1px solid var(--k-krew); color:var(--k-kosc); text-decoration:none; font-size:14px;}
.kot__m--kot .kot__go:hover{background:var(--k-krew);}
.kot__pisze{align-self:flex-start; font:500 13px var(--mono); color:rgba(246,242,243,.6);}

.kot__etykieta{margin:0; padding:4px 16px 8px; font:500 13px/1 var(--mono); color:rgba(246,242,243,.6); flex:none;}
.kot__chips{display:grid; grid-template-columns:1fr 1fr; gap:8px; padding:0 16px 14px; flex:none;}
.kot__chips .kot__b{min-height:44px; padding:8px 12px; border-radius:12px; font-size:14px; line-height:1.25;
  text-align:left; white-space:normal; background:var(--k-ink2);}
.kot__chips .kot__b:hover{border-color:var(--k-krew);}

.kot__form{display:flex; gap:8px; padding:12px 12px 10px; border-top:1px solid var(--k-line); flex:none;}
.kot__in{flex:1; min-width:0; min-height:44px; border-radius:999px; border:1px solid var(--k-line); background:var(--k-ink2);
  color:var(--k-kosc); padding:0 16px; font:16px var(--f-sans);} /* 16px: iOS nie przybliża */
.kot__in::placeholder{color:rgba(246,242,243,.55);}
.kot__in:focus{outline:none; border-color:var(--k-kosc);}
.kot__send{width:44px; height:44px; flex:none; border-radius:50%; border:1px solid var(--k-line); background:var(--k-ink2);
  color:var(--k-kosc); font-size:18px; cursor:pointer;}
.kot__send:hover{border-color:var(--k-kosc);}
.kot__send:focus-visible{outline:2px solid var(--k-kosc); outline-offset:2px;}

/* duży „Czatuj” → pełna aplikacja Meshugi */
.kot__czatuj{
  display:flex; align-items:center; justify-content:space-between; gap:12px; flex:none;
  margin:2px 12px 0; min-height:54px; padding:0 18px; border-radius:14px;
  background:var(--k-krew); border:1px solid var(--k-krew); color:#fff; text-decoration:none; cursor:pointer;
  transition:background .2s, transform .2s cubic-bezier(.2,.8,.2,1);
}
.kot__czatuj:hover{background:var(--k-hot); border-color:var(--k-hot);}
.kot__czatuj:active{transform:scale(.985);}
.kot__czatuj:focus-visible{outline:2px solid var(--k-kosc); outline-offset:3px;}
.kot__czatujT{font:700 17px/1 var(--f-sans);}
.kot__czatujS{font:500 13px/1.2 var(--mono); opacity:.85; text-align:right;}
.kot--bezApp .kot__czatuj{background:transparent; color:var(--k-kosc); border-color:rgba(225,29,51,.7); cursor:default;}
.kot--bezApp .kot__czatuj:hover{background:rgba(225,29,51,.1); border-color:var(--k-krew);}
.kot--bezApp .kot__czatujS{color:rgba(246,242,243,.65); opacity:1;}

/* ---------- profil testowy: nick + awatar ---------- */
.kot__prof{margin-left:auto; width:44px; height:44px; flex:none; border-radius:50%; cursor:pointer;
  border:1px solid var(--k-line); background:var(--k-ink2) center/cover no-repeat; color:var(--k-kosc);
  font:700 17px/1 var(--f-sans); display:grid; place-items:center; padding:0;}
.kot__prof:hover{border-color:var(--k-kosc);}
.kot__prof:focus-visible{outline:2px solid var(--k-kosc); outline-offset:2px;}
.kot__prof:not(.bezObrazka){border:2px solid var(--k-krew);}
.kot__prof + .kot__x{margin-left:0;}
.kot--profil .kot__prof{border-color:var(--k-kosc);}
.kot__profil{display:none; flex-direction:column; gap:8px; padding:14px 16px 4px; overflow-y:auto; min-height:0;}
.kot--profil .kot__profil{display:flex;}
.kot--profil .kot__log, .kot--profil .kot__panel > .kot__etykieta, .kot--profil .kot__chips,
.kot--profil .kot__form, .kot--profil .kot__czatuj, .kot--profil .kot__panel > .kot__note{display:none;}
.kot__profil .kot__etykieta{padding:0 0 2px;}
.kot__pRow{display:flex; align-items:center; gap:14px;}
.kot__pAva{width:72px; height:72px; flex:none; border-radius:50%; background:var(--k-ink2) center/cover no-repeat;
  box-shadow:0 0 0 2px var(--k-ink), 0 0 0 3px var(--k-krew); display:grid; place-items:center; font:700 28px/1 var(--f-sans);}
.kot__pAva.bezObrazka{border:1px dashed rgba(246,242,243,.35); box-shadow:none;}
.kot__pBtns{display:flex; flex-wrap:wrap; gap:8px;}
.kot__pLab{margin-top:6px; font:600 14px/1 var(--f-sans);}
.kot__profil .kot__in{flex:none; width:100%; box-sizing:border-box;}
.kot__pInfo{margin:0; font:500 13px/1.35 var(--mono); color:rgba(246,242,243,.6);}
.kot__blad{margin:0; min-height:0; font-size:14px; line-height:1.35; color:var(--k-hot);}
.kot__blad:empty{display:none;}
.kot__pAkcje{display:flex; flex-wrap:wrap; gap:8px; margin-top:6px;}
.kot__profil .kot__note{padding:6px 0 10px;}
.kot__kto{display:block; margin-bottom:2px; font:600 13px/1.2 var(--mono); color:rgba(255,255,255,.82);}
.kot__go--profil{font:inherit; font-size:14px; background:transparent; cursor:pointer;}

.kot__note{margin:0; padding:10px 16px 14px; font:500 13px/1.35 var(--mono); color:rgba(246,242,243,.55); flex:none;}

/* ---------- telefon: arkusz od dołu z uchwytem ---------- */
@media (max-width:480px){
  .kot__tlo{display:block; position:fixed; inset:0; background:rgba(14,14,18,.66);
    opacity:0; pointer-events:none; transition:opacity .25s;}
  .kot--open .kot__tlo{opacity:1; pointer-events:auto;}
  .kot__panel{position:fixed; left:0; right:0; bottom:var(--kb, 0px); width:auto;
    max-height:calc(var(--vvh, 100dvh) - 48px);
    border-radius:20px 20px 0 0; border-bottom:0; padding-bottom:env(safe-area-inset-bottom);
    opacity:1; transform:translateY(105%); transform-origin:bottom center;
    transition:transform .32s cubic-bezier(.2,.8,.2,1), visibility 0s linear .32s; visibility:hidden;}
  .kot--open .kot__panel{transform:none; visibility:visible; transition:transform .32s cubic-bezier(.2,.8,.2,1);}
  .kot__panel--ciagnij{transition:none !important;}
  .kot__uchwyt{display:block; flex:none; width:100%; height:30px; padding:0; border:0; background:transparent; cursor:grab;
    position:relative; touch-action:none; margin-bottom:-4px;}
  .kot__uchwyt::before{content:""; position:absolute; left:50%; top:12px; width:44px; height:5px; margin-left:-22px;
    border-radius:3px; background:rgba(246,242,243,.35);}
  .kot__uchwyt:focus-visible{outline:2px solid var(--k-kosc); outline-offset:-4px;}
  .kot__head{padding-top:6px;}
  .kot--open .kot__btn{opacity:0; pointer-events:none;}
  .kot__log{max-height:38vh;}
}
@media (prefers-reduced-motion:reduce){
  .kot__btn,.kot__tip,.kot__panel,.kot__ring,.kot__tlo,.kot__czatuj{transition:none !important;}
  .kot__skan{display:none;}
  .kot .mk-ring-slot,.kot .mk-oko,.kot .mk-oczy{transition:none !important;}
}

/* ============================================================
   LOGO W PASKU: kot obok napisu cybersora (zamiast małego C·S)
   ============================================================ */
.nav__kot{width:30px; height:30px; border-radius:50%; flex:none; display:block; margin-right:9px;}
.nav__brand{display:inline-flex; align-items:center;}

/* ============================================================
   WSTĘP STARTU — wariant A (wybór maisy 03.11):
   dwie ścieżki zamiast jednego „Napisz do nas” (to samo jest w pasku),
   fakty w Sorze w kości zamiast drobnego czerwonego mono.
   ============================================================ */
html:root .hero--start .hint{display:none;}
html:root .hero__ctas{display:flex; flex-wrap:wrap; gap:12px; margin-top:1.7rem; pointer-events:auto;}
html:root .hero__ctas .hero__cta{margin-top:0;}
html:root .hero__cta2{display:inline-flex; align-items:center; pointer-events:auto;}
html:root .hero__rail dd{font-family:var(--f-sans); font-size:15px; color:rgba(246,242,243,.72);}
html:root .hero__rail dt{color:var(--th-hot);}
/* telefon: dół wstępu kończy się nad Meshugą (kot 64 px + kółko 10 px + 18 px od dołu),
   inaczej pas faktów wchodził pod kota o 9–22 px; górny zapas trzyma nagłówek pod paskiem */
@media (max-width:480px){
  html:root .hero--start{padding-top:76px; padding-bottom:calc(104px + env(safe-area-inset-bottom,0px));}
}
@media (max-width:480px) and (max-height:760px){
  html:root .hero--start{padding-top:68px;}
  html:root .hero__lead{margin-top:.9rem;}
  html:root .hero__ctas{margin-top:1.2rem; gap:10px;}
  html:root .hero__rail{margin-top:1.25rem;}
  html:root .hero__fact{padding:.55rem 0;}
}