/* ==========================================================================
   WYKRYWACZ — WIDGET ASYSTENTA (dymek + panel rozmowy). Piąty sklep z agentem
   po Glovii/Seeku/Guide/PowerNeed (24.08.2026) — panel doszyty do istniejącej
   animacji dymka, port mechaniki z `storefronts/powerneed/assets/css/assistant.css`
   (jasny panel, jak Glovii/PowerNeed — strona Wykrywacza jest biała).

   Klasy celowo takie same jak w glovii (`gv-ai`), żeby port widgetu i `assistant.js`
   był kopiowaniem, a nie przemianowywaniem.

   Motyw dymka: tarcza w pomarańczu `#ee8137`, znak i obwódka w szarości `#6c6c6c`.
   ⚠ Tarcza jest JAŚNIEJSZA niż markowy `#e06a10`, i to nie jest niedopatrzenie: szarość
   `#6c6c6c` na markowym pomarańczu daje kontrast ~1,3:1 i znak zlewa się w brąz. Szary
   znak na pomarańczu jest z natury niskokontrastowy — jaśniejsza tarcza to minimum,
   przy którym w ogóle się czyta. ⚠ Znak marki jest tu ODWRÓCONY względem favicony:
   w źródle pomarańczowy na przezroczystym, w dymku szary na pomarańczowym. Sklep ma biały
   motyw, więc cień jest słabszy.
   ========================================================================== */

.gv-ai { position: fixed; right: 18px; bottom: 18px; z-index: 900; font-family: var(--font-body, system-ui); }

/* --- dymek --- */
.gv-ai__bubble {
    position: relative; width: 58px; height: 58px; border-radius: 50%;
    border: none; padding: 0; cursor: pointer; overflow: hidden;
    /* Tarcza I OBWÓDKA są TŁEM przycisku, a nie częścią animowanego znaku — pliki znaków
       zawierają WYŁĄCZNIE sam znak na przezroczystym tle. Krążek narysowany wewnątrz
       znaku wirowałby razem z nim i ramka jechałaby do środka zamiast stać w miejscu.
       Ta sama lekcja co w glovii (23.08). */
    background: #ee8137;
    box-shadow: 0 6px 18px rgba(0, 0, 0, .28), inset 0 0 0 3px #6c6c6c;
    transition: transform .18s ease;
}
.gv-ai__bubble:hover { transform: scale(1.06); }
.gv-ai__ico {
    position: absolute; inset: 0; width: 100%; height: 100%; transform-origin: 50% 50%;
    /* Trzy znaki jadą JEDNĄ klatkową animacją przesuniętą opóźnieniem — dodanie czwartego
       to jedna linijka `animation-delay` plus 1,5 s do `animation-duration`, a nie kolejny
       komplet `@keyframes`.
       `backwards` jest tu obowiązkowe: bez niego znaki z dodatnim opóźnieniem stoją przez
       pierwsze sekundy w stanie spoczynkowym (pełna skala, opacity 1) i na starcie strony
       wszystkie trzy leżą jeden na drugim. */
    animation-name: gv-ai-swirl;
    animation-duration: 4.5s;                 /* 3 znaki × 1,5 s — tak jak w pozostałych sklepach */
    animation-timing-function: cubic-bezier(.55, 0, .35, 1);
    animation-iteration-count: infinite;
    animation-fill-mode: backwards;
}
/* Odstęp między znakami to równe 1,5 s. Znak marki ma UJEMNE opóźnienie o czas rozwijania
   (0,4 s), żeby przy wejściu na stronę stał już rozwinięty — inaczej pierwsze pół sekundy
   dymek jest pustym krążkiem i wygląda to jak niedoładowana ikona. */
.gv-ai__ico--mark { animation-delay: -.4s; }
.gv-ai__ico--ai   { animation-delay: 1.1s; }
.gv-ai__ico--q    { animation-delay: 2.6s; }

/* WIR: znak przyspiesza obracając się i wciąga do środka, po czym z centrum rozwija się
   następny. Zassanie jednego i rozwinięcie kolejnego trwają DOKŁADNIE w tym samym oknie
   (33,33% → 41,83% u poprzednika = 0% → 8,5% u następnego), więc na tarczy nigdy nie ma pustki. */
@keyframes gv-ai-swirl {
    0%              { transform: rotate(-540deg) scale(.05); opacity: 0; }   /* rozwija się z centrum */
    8.5%,  33.33%   { transform: rotate(0) scale(1);         opacity: 1; }   /* stoi ~1,1 s */
    41.83%          { transform: rotate(540deg) scale(.05);  opacity: 0; }   /* zassany */
    41.84%, 100%    { transform: rotate(-540deg) scale(.05); opacity: 0; }   /* czeka poza sceną */
}
/* Systemowe „ogranicz animacje" zatrzymuje wir na znaku marki — dymek dalej działa,
   po prostu stoi. Ruch w pętli potrafi męczyć, a to element widoczny na każdej stronie. */
@media (prefers-reduced-motion: reduce) {
    .gv-ai__ico { animation: none; }
    .gv-ai__ico--ai,
    .gv-ai__ico--q { opacity: 0; }
}

/* --- panel — jasny motyw, jak reszta strony (port z Glovii/PowerNeed) --- */
.gv-ai__panel {
    position: absolute; right: 0; bottom: 72px;
    width: 380px; max-width: calc(100vw - 36px); height: 560px; max-height: calc(100vh - 120px);
    display: flex; flex-direction: column; overflow: hidden;
    background: #fff; border-radius: 16px; border: 1px solid var(--line);
    box-shadow: 0 18px 48px rgba(0, 0, 0, .22);
}
.gv-ai__panel[hidden] { display: none; }

.gv-ai__head {
    display: flex; align-items: flex-start; justify-content: space-between; gap: 10px;
    padding: 14px 16px; background: #e06a10; color: #fff;
}
.gv-ai__head strong { display: block; font-size: 15px; }
/* Jawne oznaczenie AI: w nagłówku, nie drobnym drukiem na dole. */
.gv-ai__note { display: block; font-size: 11.5px; opacity: .9; margin-top: 2px; }
.gv-ai__close { background: none; border: none; color: #fff; font-size: 26px; line-height: 1; cursor: pointer; padding: 0 2px; }

.gv-ai__log { flex: 1; overflow-y: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.gv-ai__msg { max-width: 88%; padding: 10px 13px; border-radius: 14px; font-size: 14px; line-height: 1.5; }
.gv-ai__msg--bot  { background: var(--bg-panel); color: var(--text); border-bottom-left-radius: 4px; align-self: flex-start; }
.gv-ai__msg--user { background: #e06a10; color: #fff; border-bottom-right-radius: 4px; align-self: flex-end; }
.gv-ai__msg a { color: #b4530a; text-decoration: underline; }
.gv-ai__msg--user a { color: #fff; }
.gv-ai__msg p { margin: 0 0 8px; }
.gv-ai__msg p:last-child { margin-bottom: 0; }
.gv-ai__msg ul { margin: 6px 0; padding-left: 18px; }

/* Status „szukam w katalogu…" — kursywa i przygaszony tekst, żeby nie mylił się z odpowiedzią. */
.gv-ai__status { font-size: 12.5px; color: var(--text-muted); font-style: italic; align-self: flex-start; }
.gv-ai__status::after { content: ''; display: inline-block; width: 1em; text-align: left; animation: gv-ai-dots 1.2s steps(4) infinite; }
@keyframes gv-ai-dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } }

.gv-ai__form { display: flex; gap: 8px; padding: 12px; border-top: 1px solid var(--line); }
.gv-ai__form input {
    flex: 1; border: 1px solid var(--line); border-radius: 10px;
    padding: 10px 12px; font-size: 14px; font-family: inherit; min-width: 0;
}
.gv-ai__form input:focus { outline: none; border-color: #e06a10; }
.gv-ai__send {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; border: none; border-radius: 10px; background: #e06a10; color: #fff; cursor: pointer;
}
.gv-ai__send[disabled] { opacity: .5; cursor: default; }

/* Na telefonie panel bierze cały ekran — okienko 380 px zostawiałoby paski po bokach
   i chowałoby klawiaturę. Dymek zostaje na wierzchu jako przycisk zamknięcia. */
@media (max-width: 560px) {
    .gv-ai { right: 12px; bottom: 12px; }
    .gv-ai__panel {
        position: fixed; inset: 0; width: 100%; max-width: none;
        height: 100%; max-height: none; border-radius: 0; border: none;
    }
}