/* A Fonalda Tündér (AI-asszisztens) stíluslapja.
   2026-09-05-ig a widget sablonjában, <style> blokkban élt: 12,4 kB ment ki
   MINDEN lap HTML-jébe, benne 5,4 kB kommenttel, és cache-elni sem lehetett.
   Itt külön fájl: a böngésző egyszer tölti le, a build pedig kiszedi a
   kommenteket. A CSOMAGBA szándékosan nem kerül, mert a widget kapcsolóval
   ki-be kapcsolható (AI_ASSISTANT_ACTIVE), és kikapcsolva nulla bájt. */

#ai-assistant-wrapper {
    position: fixed;
    /* A ragadós vásárló-sáv (.bottomAddtoCart, a színlapon) fölé kerül: a
       --ragados-sav a sáv MÉRT magassága (fonalda.js::ragadosSav), 0, ha nincs
       sáv. Enélkül a chat-gomb eltakarta a Kosárba gombot és a
       mennyiség-léptetőt — mérve az érintés a gomb képére esett. */
    bottom: calc(40px + var(--ragados-sav, 0px));
    /* A TARTALOM jobb széléhez mérve, nem a képernyőhöz: nagy felbontáson a
       tartalom-doboz 1 370 képpont, a maradék a bolt zöld háttere, és a gomb
       ott a lapon kívül, a zöld sávban állt (mérve 235 képponttal). A
       --tunder-jobb értékét a fonalda.js::tunderHelye() írja, resize-ra is.
       Ahol a tartalom kitölti az ablakot, ez pontosan a régi 20 képpont. */
    right: var(--tunder-jobb, 20px);
    z-index: 9999;
    font-family: 'Open Sans', sans-serif;
}
/* A gomb CSUKOTT alapállapota: a logó (70 px) + 5 px rózsaszín gyűrű, tehát
   egy 80x80 képpontos kör. A felirat max-width: 0-val van összecsukva, nem
   display: none-nal — így a szélessége animálható, és a képernyőolvasó
   számára is ott marad a szöveg.

   Rámutatásra (és FÓKUSZRA, billentyűzethez) fél másodperc alatt kinyílik a
   feliratos alakra, elhúzva a kurzort visszacsukódik. A korábbi
   transform: scale(1.05) elmaradt: a nagyítás a kinyílással szemben dolgozott. */
#ai-assistant-button {
    background: #C2185B;
    color: white;
    padding: 5px;
    border-radius: 50%;
    cursor: pointer;
    box-shadow: 0 4px 10px rgba(0,0,0,0.2);
    display: flex;
    align-items: center;
    overflow: hidden;
    transition: padding .5s ease, border-radius .5s ease;
}
#ai-assistant-button img {
    width: 70px;
    height: 70px;
    flex: none;
    margin: 0;
}
#ai-assistant-button > span {
    max-width: 0;
    margin-left: 0;
    opacity: 0;
    white-space: nowrap;
    overflow: hidden;
    transition: max-width .5s ease, margin-left .5s ease, opacity .35s ease;
}
/* Rámutatásra és fókuszra nyílik ki. Sima :hover, NEM
   `@media (hover: hover)`: a média-lekérdezés több böngészőben (és a
   fejlesztői headless futtatásban is) `hover: none`-t jelent, és akkor a
   felirat asztalon SEM nyílna ki. Érintőképernyőn nincs mutató, tehát ott a
   kör alak marad — és a chat megnyitásakor a gomb display: none-ra vált,
   ami a hover-állapotot is elengedi. */
#ai-assistant-button:hover,
#ai-assistant-button:focus-visible {
    padding: 10px 20px;
    border-radius: 30px;
}
#ai-assistant-button:hover > span,
#ai-assistant-button:focus-visible > span {
    /* 170 px: a felirat 134 képpont, tehát ennyi elég neki. A korábbi 260-nál
       a max-width már 134 fölött járt az animáció felénél, és onnantól a
       szélesedés nem LÁTSZOTT — a fél másodperc fele üresen telt. */
    max-width: 170px;
    margin-left: 10px;
    opacity: 1;
}
/* ---- „ITT VAGYOK, HA KELL" — a figyelemfelhívó villanás ----

   A megrendelő kérése (2026-09-04): 20 másodpercenként villantsa meg magát a
   gomb, de „ne agresszíven, ne erőszakosan, ne nyíljon meg automatikusan,
   csak olyan kis cukisan, tündéresen".

   Három elem fut együtt 2 másodpercig:
   - SZÁRNYCSAPÁS: a gomb ±7 fokot billen és visszaáll (nem ugrik, nem nő —
     a méretváltás a szomszédos gombokat is „lökné", a billenés nem),
   - FÉNYGYŰRŰ: egy halvány rózsaszín gyűrű fut ki a gombból és halványul el,
   - CSILLÁM: három apró csillag jelenik meg a gomb körül, felszáll, elfogy.

   Amit szándékosan NEM tesz: nem nyitja meg a chatet, nem ad hangot, nem
   jelenít meg szövegbuborékot a lap fölé, és nem tol el semmit — a mozgás
   végig `transform` és `opacity`, tehát a lap elrendezése változatlan. */

/* A csillám a CSUKOTT gomb 80x80 képpontos körére van igazítva, a wrapper
   jobb aljához — a gomb a wrapperben mindig ott áll. */
.ai-csillam {
    position: absolute;
    right: 0;
    bottom: 0;
    width: 80px;
    height: 80px;
    pointer-events: none;
}
/* NÉGYÁGÚ CSILLAG, nem kör: a kör fénylő buboréknak látszott, a csillám
   viszont csillag. A clip-path levágná a box-shadow-t, ezért a fénye
   drop-shadow szűrővel megy.

   HÉT csillag, a gomb KÖRÜL elszórva (a megrendelő erőteljesebb szórást kért):
   mindegyiknek saját mérete, indulási ideje és pályája van, ezért nem
   „lélegzik" együtt a hét, hanem tényleg szórásnak látszik. A pályát a --csx
   és --csy egyedi értéke adja.

   JOBBRA szándékosan alig lóg túl bármelyik: a gomb 20 képpontra áll a
   képernyő szélétől, és egy kilógó csillag vízszintes csúszkát hozna a lapra.
   A hely a BAL és a FELSŐ oldalon van. */
.ai-csillam i {
    position: absolute;
    width: 11px;
    height: 11px;
    background: #F06292;
    opacity: 0;
    --csx: 3px;
    --csy: -20px;
    clip-path: polygon(50% 0%, 60% 40%, 100% 50%, 60% 60%,
                       50% 100%, 40% 60%, 0% 50%, 40% 40%);
    filter: drop-shadow(0 0 4px rgba(255, 255, 255, .95))
            drop-shadow(0 0 8px rgba(194, 24, 91, .5));
}
/* A szórás területe KÉTSZERES (a megrendelő kérése): a csillagok a gomb
   körétől kétszer olyan messze indulnak és kétszer olyan messzire szállnak.

   JOBBRA viszont nem: a gomb 20 képpontra áll a képernyő szélétől, és egy
   jobbra kilógó csillag vízszintes csúszkát hozna az egész lapra. A terület
   ezért BALRA és FELFELÉ nyílik ki, jobbra legfeljebb 12 képponttal lép a
   kör vonalán túl. */
.ai-csillam i:nth-child(1) { top: -18px; left:  66px; width: 14px; height: 14px; --csx:  6px; --csy: -40px; }
.ai-csillam i:nth-child(2) { top:  14px; left:  78px; width: 10px; height: 10px; --csx:  4px; --csy: -30px; }
.ai-csillam i:nth-child(3) { top:  56px; left:  74px; width: 12px; height: 12px; --csx:  6px; --csy: -46px; }
.ai-csillam i:nth-child(4) { top: -34px; left:  30px; width: 16px; height: 16px; --csx: -4px; --csy: -36px; }
.ai-csillam i:nth-child(5) { top: -12px; left: -18px; width: 10px; height: 10px; --csx:-16px; --csy: -40px; }
.ai-csillam i:nth-child(6) { top:  30px; left: -40px; width: 13px; height: 13px; --csx:-26px; --csy: -30px; }
.ai-csillam i:nth-child(7) { top:  66px; left: -14px; width: 11px; height: 11px; --csx:-14px; --csy: -50px; }

/* KÉT fénygyűrű, egymás után indulva: egyetlen gyűrű halkabb volt annál,
   amit a megrendelő kért. A ::before és a ::after ugyanaz az alak. */
.ai-csillam::before,
.ai-csillam::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid #C2185B;
    opacity: 0;
}

/* A VILLANÁS HOSSZA 2,8 másodperc (a megrendelő kérése: kétszer annyi ideig
   tartson, mint az eddigi 1,4).

   A szárnycsapás KÉTSZER fut 1,4 másodperces ütemben, nem egyszer lassabban:
   egy 2,8 másodpercig tartó egyetlen lengés vontatott lett volna. A csillagok
   és a gyűrűk viszont egyszer futnak, kétszer olyan lassan — ők így tovább
   LÁTSZANAK, ami a kérés lényege. */
#ai-assistant-wrapper.ai-villan #ai-assistant-button {
    animation: ai-szarnycsapas 1s ease-in-out 2;
}
#ai-assistant-wrapper.ai-villan .ai-csillam::before {
    animation: ai-fenygyuru 2s ease-out;
}
#ai-assistant-wrapper.ai-villan .ai-csillam::after {
    animation: ai-fenygyuru 2s ease-out .45s;
}
#ai-assistant-wrapper.ai-villan .ai-csillam i {
    animation: ai-csillag 2s ease-out;
}
/* A késleltetés CSAK ilyen erős szelektorral él: az `animation` rövidítés
   fentebb `animation-delay: 0s`-t is beállít, és felülírta volna a
   nth-child szabályokat — mind a hét csillag egyszerre indult. */
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(2) { animation-delay: .13s; }
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(3) { animation-delay: .26s; }
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(4) { animation-delay: .07s; }
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(5) { animation-delay: .31s; }
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(6) { animation-delay: .19s; }
#ai-assistant-wrapper.ai-villan .ai-csillam i:nth-child(7) { animation-delay: .45s; }

@keyframes ai-szarnycsapas {
    0%, 100% { transform: rotate(0); }
    15%      { transform: rotate(-7deg); }
    35%      { transform: rotate(6deg); }
    55%      { transform: rotate(-4deg); }
    75%      { transform: rotate(2deg); }
}
@keyframes ai-fenygyuru {
    0%   { opacity: .5; transform: scale(1); }
    100% { opacity: 0;  transform: scale(1.4); }
}
@keyframes ai-csillag {
    0%   { opacity: 0; transform: translate(0, 0) scale(.2) rotate(0); }
    22%  { opacity: 1; transform: translate(calc(var(--csx) * .3), calc(var(--csy) * .3)) scale(1.15) rotate(40deg); }
    100% { opacity: 0; transform: translate(var(--csx), var(--csy)) scale(.4) rotate(110deg); }
}

/* Aki kevesebb mozgást kért a rendszerében, annak azonnal váltson — és a
   figyelemfelhívó villanás nála EGYÁLTALÁN nem fut le. */
@media (prefers-reduced-motion: reduce) {
    #ai-assistant-button,
    #ai-assistant-button > span {
        transition: none;
    }
    #ai-assistant-wrapper.ai-villan #ai-assistant-button,
    #ai-assistant-wrapper.ai-villan .ai-csillam::before,
    #ai-assistant-wrapper.ai-villan .ai-csillam i {
        animation: none;
    }
}
#ai-assistant-chat {
    width: 350px;
    height: 500px;
    background: white;
    border-radius: 15px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 10px;
}
.ai-footer {
    padding: 10px;
    display: flex;
    gap: 5px;
    border-top: 1px solid #ddd;
}

@media (max-width: 480px) {
    #ai-assistant-wrapper {
        bottom: 0;
        right: 0;
        width: 100%;
        z-index: 2147483641; /* Minden felett legyen */
    }
    #ai-assistant-button {
        /* Telefonon is a vásárló-sáv FÖLÉ, nem rá. A z-index itt szándékosan
           magas (a chat-ablak miatt), ezért a gombot nem z-index-szel, hanem
           a sáv mért magasságával toljuk el. */
        bottom: calc(40px + var(--ragados-sav, 0px));
        right: var(--tunder-jobb, 20px);
        position: fixed;
    }
    /* A CSILLÁMSZÓRÁS a gombbal együtt mozog.

       A gomb telefonon `fixed`-re vált (a ragadós vásárló-sáv FÖLÉ kell
       kerülnie), a burok viszont a képernyő alján áll: NULLA magasan, teljes
       szélességben. A csillám a burok jobb alsó sarkához igazodott, nem a
       gombhoz — mérve 20 képponttal jobbra és 40-nel lejjebb szórt, tehát a
       csillagok a gomb mellett jelentek meg (a megrendelő észrevétele,
       2026-09-05). Ugyanazt a rögzítést kapja, mint a gomb. */
    .ai-csillam {
        position: fixed;
        bottom: calc(40px + var(--ragados-sav, 0px));
        right: var(--tunder-jobb, 20px);
    }
    #ai-assistant-chat {
        width: 100%;
        height: 100vh;
        height: -webkit-fill-available; /* iOS fix */
        max-height: 100vh;
        border-radius: 0;
        margin-bottom: 0;
        position: fixed;
        top: 0;
        left: 0;
        padding-top: 80px; /* Hely a fix fejlécnek mobilon */
    }
    .ai-footer {
        padding-bottom: env(safe-area-inset-bottom, 10px);
    }
}
.ai-header {
    background: #C2185B;
    color: white;
    padding: 15px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.ai-title {
    font-weight: bold;
}
.ai-close {
    background: none;
    border: none;
    color: white;
    font-size: 28px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
}
#ai-chat-body {
    flex: 1;
    padding: 15px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: #f9f9f9;
}
.ai-message {
    padding: 10px 15px;
    border-radius: 15px;
    max-width: 80%;
    font-size: 14px;
    line-height: 1.4;
    word-wrap: break-word;
}
.ai-message.assistant {
    background: #eee;
    align-self: flex-start;
    border-bottom-left-radius: 0;
}
.ai-header img {
    width: 40px;
    margin-right: 10px;
}
.ai-message.user {
    background: #C2185B;
    color: white;
    align-self: flex-end;
    border-bottom-right-radius: 0;
}

#ai-user-input {
    flex: 1;
    padding: 8px 12px;
    border: 1px solid #ddd;
    border-radius: 20px;
    resize: none;
    max-height: 150px;
    line-height: 1.4;
    font-family: inherit;
    overflow-y: hidden;
}

/* Látható fókuszjelzés (WCAG 2.4.7). Itt korábban `outline: none` állt
   pótlás nélkül: aki billentyűzettel érkezett a chathez, nem látta, hogy
   a beviteli mezőben áll. A fejléc keresőjénél ez rendben van — ott a
   körülvevő pirula vált keretszínt (:focus-within) —, itt nem volt semmi. */
#ai-user-input:focus-visible {
    outline: 2px solid #A02351;
    outline-offset: 2px;
}
#ai-send-btn {
    background: #C2185B;
    color: white;
    border: none;
    padding: 8px 15px;
    border-radius: 20px;
    cursor: pointer;
    align-self: flex-end; /* A gomb maradjon alul */
    height: 36px; /* Fix magasság */
    flex-shrink: 0; /* Ne menjen össze */
}
#ai-send-btn:disabled {
    background: #ccc;
    cursor: not-allowed;
}
.ai-typing {
    font-style: italic;
    font-size: 12px;
    color: #888;
}