/* KAMAR AI Chat Widget
   Brand: granat #103547 · zieleń #059239 · żółć #F6B767 · czerwień #D40513
         · bladoniebieski #f4f7ff · bladoszary #cccccc
   Zasady: border-radius 10px na buttonach/inputach/kontenerach, spójne paddingi. */

#kamar-chat-root {
    position: fixed;
    /* LEWA strona — po prawej sklep ma side-menu i sidecart.
       Odsunięte od dołu, żeby nie zasłaniać widgetu opinii Ceneo.
       ZAKŁADKA JEST STANEM DOMYŚLNYM (left:0) — nie czekamy na JS, więc nie ma
       przebłysku „najpierw duży FAB z labelem, potem skok do zakładki". */
    left: 0;
    right: auto;
    bottom: 92px;
    z-index: 99990;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Atrybut hidden MUSI wygrywać z naszymi regułami display. */
#kamar-chat-panel[hidden],
.kamar-chat-typing[hidden] { display: none !important; }

/* ---------- FAB = zakładka wystająca z lewej krawędzi ----------
   STAŁA wysokość: rozwinięcie labelu na hover zmienia tylko szerokość, nigdy
   wysokość — inaczej zakładka „podskakiwała" przy pokazywaniu/chowaniu. */
#kamar-chat-fab {
    display: flex;
    align-items: center;
    gap: 0;
    cursor: pointer;
    height: 56px;
    box-sizing: border-box;
    padding: 0 13px 0 10px;
    /* glassmorphism — bladoniebieskie szkło, czytelne na ciemnych i jasnych tłach */
    background: rgba(244, 247, 255, 0.95);
    -webkit-backdrop-filter: blur(14px) saturate(1.6);
    backdrop-filter: blur(14px) saturate(1.6);
    border: 2px solid #103547;
    border-left: 0;
    color: #103547;
    border-radius: 0 14px 14px 0;
    font-size: 14px;
    font-weight: 800;
    box-shadow: 3px 4px 20px rgba(16, 53, 71, 0.34);
    transition: padding .32s cubic-bezier(.4, 0, .2, 1),
                gap .32s cubic-bezier(.4, 0, .2, 1),
                background .15s ease;
}
.kamar-chat-fab-icon { font-size: 24px; display: flex; align-items: center; }
.kamar-chat-fab-icon img { width: 30px; height: 30px; display: block; }
.kamar-chat-fab-label {
    max-width: 0;
    opacity: 0;
    overflow: hidden;
    white-space: nowrap;
    line-height: 1;
    /* Płynne rozwijanie: tekst wchodzi po rozsunięciu, nie równolegle. */
    transition: max-width .38s cubic-bezier(.4, 0, .2, 1), opacity .22s ease;
}
#kamar-chat-root.is-open .kamar-chat-fab-label { display: none; }

/* Label pokazujemy WYŁĄCZNIE na hover i tylko tam, gdzie jest kursor.
   Na dotyku nie ma hovera, więc zakładka zostaje kompaktowa. */
@media (hover: hover) and (pointer: fine) {
    #kamar-chat-fab:hover {
        padding: 0 18px 0 12px;
        gap: 9px;
        background: #fff;
    }
    #kamar-chat-fab:hover .kamar-chat-fab-label { max-width: 220px; opacity: 1; }
}

/* ---------- Panel (tryb narożny) ---------- */
#kamar-chat-panel {
    position: absolute;
    left: 0;
    bottom: 62px;
    width: min(380px, calc(100vw - 32px));
    height: min(600px, calc(100vh - 170px));
    background: rgba(255, 255, 255, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(1.5);
    backdrop-filter: blur(18px) saturate(1.5);
    border: 1px solid rgba(255, 255, 255, 0.7);
    border-radius: 10px;
    box-shadow: 0 12px 44px rgba(16, 53, 71, 0.28);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

/* ---------- Tryb powiększony: popup na środku ekranu ---------- */
#kamar-chat-root.is-max #kamar-chat-panel {
    position: fixed;
    left: 50%;
    top: 50%;
    bottom: auto;
    transform: translate(-50%, -50%);
    width: min(78vw, 1100px);
    height: min(84vh, 860px);
    box-shadow: 0 20px 70px rgba(0, 0, 0, 0.45);
}
@media (max-width: 900px) {
    #kamar-chat-root.is-max #kamar-chat-panel { width: 90vw; height: 86vh; }
}

/* ---------- Nagłówek ---------- */
.kamar-chat-head {
    background: rgba(244, 247, 255, 0.78);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    color: #103547;
    border-bottom: 1px solid rgba(16, 53, 71, 0.1);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}
.kamar-chat-head-title { font-weight: 800; font-size: 15px; display: flex; flex-direction: column; }
.kamar-chat-head-sub { font-size: 11px; font-weight: 600; color: #75795E; margin-top: 2px; }
.kamar-chat-head-btns { display: flex; gap: 6px; }
.kamar-chat-hbtn {
    border: 0 !important;
    background: rgba(16, 53, 71, 0.08) !important;
    color: #103547 !important;
    font-size: 22px !important;
    line-height: 1 !important;
    cursor: pointer;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
}
.kamar-chat-hbtn:hover { background: rgba(16, 53, 71, 0.16) !important; }
/* `display:flex` wyżej wygrywa z atrybutem `hidden` — bez tej reguły przycisk
   powrotu do tematów byłby widoczny także na ekranie startowym. */
.kamar-chat-hbtn[hidden] { display: none !important; }
/* „Zmień temat" jest podpisany, więc nie może być kwadratem 38×38 jak ikony. */
.kamar-chat-restart {
    width: auto !important;
    min-width: 0;
    gap: 6px;
    padding: 0 12px !important;
    font-size: 13px !important;
    font-weight: 700;
}
.kamar-chat-restart span[aria-hidden] { font-size: 16px; line-height: 1; }
/* Tematy już na ekranie = nie ma czego zmieniać. Wygaszamy zamiast chować,
   żeby przycisk nie znikał spod kursora. */
.kamar-chat-restart:disabled { opacity: .4; cursor: default; }
.kamar-chat-restart:disabled:hover { background: rgba(16, 53, 71, 0.08) !important; }
/* Na wąskich ekranach zostaje sama strzałka — podpis zjadłby nagłówek. */
@media (max-width: 420px) {
    .kamar-chat-restart-lbl { display: none; }
    .kamar-chat-restart { padding: 0 !important; width: 38px !important; min-width: 38px; }
}
.kamar-chat-max { font-size: 17px !important; }
.kamar-chat-x { font-size: 26px !important; }

/* ---------- Treść ---------- */
.kamar-chat-body {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    background: rgba(244, 247, 255, 0.55);
}

.kamar-chat-note {
    font-size: 10.5px;
    color: #5b6675;
    background: #fff;
    border: 1px solid #e2e8f4;
    border-radius: 10px;
    padding: 8px 12px;
    line-height: 1.45;
}
.kamar-chat-note a { color: #103547; }

.kamar-chat-msg {
    max-width: 84%;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: 13.5px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.kamar-chat-msg--bot { align-self: flex-start; background: #fff; color: #212529; border: 1px solid #e2e8f4; }
.kamar-chat-msg--human { align-self: flex-start; background: #d9f2e3; color: #065f46; border: 1px solid #b8e6cb; }
.kamar-chat-msg--user { align-self: flex-end; background: #103547; color: #fff; }
.kamar-chat-msg--system { align-self: center; background: #fff; color: #103547; font-size: 12px; border: 1px dashed #b9c8ea; }
.kamar-chat-msg a { color: #059239; font-weight: 600; text-decoration: underline; }
.kamar-chat-msg--user a { color: #F6B767; }

/* ---------- Przyciski szybkiej odpowiedzi (mini-formularz) ---------- */
.kamar-chat-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    align-self: flex-start;
    max-width: 100%;
}
.kamar-chat-chip {
    border: 1.5px solid #103547 !important;
    background: #fff !important;
    color: #103547 !important;
    border-radius: 10px !important;
    padding: 8px 14px !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    cursor: pointer;
    line-height: 1.2 !important;
    transition: background .12s ease, color .12s ease;
}
.kamar-chat-chip:hover { background: #103547 !important; color: #fff !important; }
.kamar-chat-chip--yes {
    border-color: #059239 !important;
    color: #fff !important;
    background: linear-gradient(165deg, #1a7a4a 0%, #10603a 55%, #0a4a2c 100%) !important;
}
.kamar-chat-chip--yes:hover { filter: brightness(1.08); background: linear-gradient(165deg, #1a7a4a 0%, #10603a 55%, #0a4a2c 100%) !important; }

/* ---------- Ślepy zaułek (timeout / brak trafień) ---------- */
/* Przyciski układamy w kolumnę: to nie są równorzędne podpowiedzi, tylko trzy
   różne DROGI WYJŚCIA, a klient jest w tym momencie sfrustrowany. Rząd małych
   chipsów czytałby się jak kolejna lista do przejrzenia. */
.kamar-chat-chips.kamar-chat-deadend {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 300px;
}
.kamar-chat-deadend .kamar-chat-chip { text-align: center; }

/* ---------- Wybór wielokrotny (np. typ zabawki) ---------- */
/* Zaznaczony kafelek wygląda jak wciśnięty przycisk: wypełnienie granatem
   i ptaszek. Sam kolor nie wystarcza — daltonizm i jasne ekrany w słońcu
   sprawiają, że różnica tła bywa niewidoczna, więc dokładamy znak. */
.kamar-chat-chip.is-selected {
    background: #103547 !important;
    color: #fff !important;
    box-shadow: inset 0 2px 6px rgba(0, 0, 0, .25);
}
.kamar-chat-chip.is-selected::before {
    content: "✓ ";
    font-weight: 900;
}

/* Podpowiedź „można wybrać więcej" pokazuje się DOPIERO po pierwszym kliknięciu.
   Wcześniej byłaby instrukcją do niewykonanego jeszcze zadania — a po kliknięciu
   odpowiada na pytanie, które klient właśnie sobie zadaje. */
.kamar-chat-multi-hint {
    width: 100%;
    font-size: 11.5px;
    color: #5b6675;
    margin: 2px 0 0;
    line-height: 1.35;
}
.kamar-chat-multi-hint[hidden] { display: none !important; }

/* Przycisk zatwierdzenia — nieaktywny, dopóki nic nie wybrano. */
.kamar-chat-chip--go {
    border-color: #059239 !important;
    color: #fff !important;
    background: linear-gradient(165deg, #1a7a4a 0%, #10603a 55%, #0a4a2c 100%) !important;
}
.kamar-chat-chip--go:hover { filter: brightness(1.08); }
.kamar-chat-chip--go[disabled] {
    opacity: .45;
    cursor: not-allowed;
    filter: grayscale(.5);
}

/* ---------- Karty produktów ---------- */
/* Desktop (małe okno) i mobile: 2 karty w rzędzie; tryb maks: 3. */
.kamar-chat-products {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
}
#kamar-chat-root.is-max .kamar-chat-products { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.kamar-chat-prod {
    background: #fff;
    border: 1px solid #e2e8f4;
    border-radius: 10px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
    box-shadow: 0 2px 6px rgba(16, 53, 71, 0.06);
}
.kamar-chat-prod-imglink { display: block; background: #fff; border-radius: 10px; }
.kamar-chat-prod img {
    width: 100%;
    height: 140px;
    object-fit: contain;
    border-radius: 10px;
    display: block;
}
#kamar-chat-root.is-max .kamar-chat-prod img { height: 170px; }
.kamar-chat-prod-name {
    font-size: 13px;
    line-height: 1.35;
    font-weight: 700;
    /* max 2 linie nazwy */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    min-height: 2.7em;
}
.kamar-chat-prod-name a { color: #103547; text-decoration: none; }
.kamar-chat-prod-name a:hover { text-decoration: underline; }
.kamar-chat-prod-prices { display: flex; align-items: baseline; gap: 8px; }
.kamar-chat-prod-price { font-size: 15px; font-weight: 800; color: #D40513; }
.kamar-chat-prod-old { font-size: 12px; color: #75795E; }
/* Kolor/gradient/promień/stan „dodane" bierze klasa .kamar-btn--success
   z kamar-brand-ui (jedno źródło prawdy). Tu tylko rozmiar w karcie. */
.kamar-chat-prod-add {
    padding: 8px 16px !important;
    font-size: 12px !important;
    width: auto;
    align-self: center;
    box-sizing: border-box;
}
.kamar-chat-prod-add:disabled { background: #cccccc !important; color: #555 !important; cursor: default; }

/* ---------- Typing: trzy skaczące „piłeczki" w kolorach marki ----------
   Same kolorowe kropki, ZERO tła. Brand KAMAR = zabawki, „bez migających
   świateł" — więc łagodne podskakiwanie ze squash-and-stretch (jak gumowe
   piłeczki), glossy błysk (radial-gradient) i miękka kolorowa poświata (glow).
   Kolory: zieleń · żółć · czerwień (akcentowa trójka KAMAR). */
/* ZERO tła/paska — sama trójka kropek. Cień = KOLOROWA POŚWIATA danej kropki
   (glow wyśrodkowany), a nie szary cień kierunkowy. */
.kamar-chat-typing { display: flex; align-items: flex-end; gap: 7px; padding: 8px 4px 10px;
    background: transparent !important; box-shadow: none !important; border: 0 !important; }
.kamar-chat-typing span {
    width: 9px; height: 9px; border-radius: 50%;
    transform-origin: center bottom;
    animation: kamar-chat-bounce 1.3s cubic-bezier(.3, .7, .4, 1) infinite;
}
/* glossy błysk (jasny punkt u góry) + kolorowa poświata wokół piłeczki */
.kamar-chat-typing span:nth-child(1) {
    background: radial-gradient(circle at 32% 28%, #57d492 0%, #059239 62%);
    box-shadow: 0 0 11px 1px rgba(5, 146, 57, .75);
}
.kamar-chat-typing span:nth-child(2) {
    background: radial-gradient(circle at 32% 28%, #ffdca1 0%, #F6B767 62%);
    box-shadow: 0 0 11px 1px rgba(246, 183, 103, .8);
    animation-delay: .16s;
}
.kamar-chat-typing span:nth-child(3) {
    background: radial-gradient(circle at 32% 28%, #ff7280 0%, #D40513 62%);
    box-shadow: 0 0 11px 1px rgba(212, 5, 19, .72);
    animation-delay: .32s;
}
@keyframes kamar-chat-bounce {
    0%, 55%, 100% { transform: translateY(0) scale(1, 1); }         /* spoczynek na „podłodze" */
    20%           { transform: translateY(-11px) scale(.9, 1.1); }  /* wzlot: lekkie wydłużenie */
    45%           { transform: translateY(0) scale(1.2, .8); }      /* lądowanie: squash */
}
/* Poszanowanie ustawień systemowych — bez ruchu, delikatne pulsowanie krycia. */
@media (prefers-reduced-motion: reduce) {
    .kamar-chat-typing span { animation: kamar-chat-fade 1.2s ease-in-out infinite; }
    @keyframes kamar-chat-fade { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
}

/* ---------- Stopka ---------- */
.kamar-chat-foot {
    display: flex;
    gap: 8px;
    padding: 10px 12px 6px;
    border-top: 1px solid rgba(16, 53, 71, 0.08);
    background: rgba(255, 255, 255, 0.75);
}
#kamar-chat-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
#kamar-chat-input {
    flex: 1;
    resize: none;
    border: 1.5px solid #cccccc;
    border-radius: 10px;
    padding: 10px 13px;
    font-size: 13.5px;
    font-family: inherit;
    line-height: 1.4;
    /* Domyślnie 2 wiersze. min-height jest konieczny, bo auto-height w JS
       ustawia wysokość ze scrollHeight — przy jednej linijce tekstu ścisnąłby
       pole z powrotem do jednego wiersza, ignorując rows="2". */
    min-height: 61px;
    max-height: 128px; /* ~5 linii — dalej scroll wewnątrz pola */
    overflow-y: auto;
    overscroll-behavior: contain; /* scroll w polu nie przewija rozmowy pod spodem */
    scrollbar-width: thin;
    scrollbar-color: #c2c9cf transparent;
    background: #fff;
    color: #212529;
}
/* WebKit/Blink nie zna scrollbar-width — ten sam efekt osobno. */
#kamar-chat-input::-webkit-scrollbar { width: 6px; }
#kamar-chat-input::-webkit-scrollbar-track { background: transparent; }
#kamar-chat-input::-webkit-scrollbar-thumb { background: #c2c9cf; border-radius: 3px; }
#kamar-chat-input::-webkit-scrollbar-thumb:hover { background: #a8b1b8; }
#kamar-chat-input:focus { outline: none; border-color: #103547; box-shadow: 0 0 0 3px rgba(16, 53, 71, .15); }
#kamar-chat-sendbtn {
    border: 0 !important;
    cursor: pointer;
    background: linear-gradient(165deg, #1a7a4a 0%, #10603a 55%, #0a4a2c 100%) !important;
    color: #fff !important;
    border-radius: 10px !important;
    width: 40px;
    min-width: 40px;
    height: 40px;
    align-self: center;
    font-size: 13px !important;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 1px 3px rgba(10, 74, 44, 0.28);
    transition: filter .12s ease;
}
#kamar-chat-sendbtn:hover { filter: brightness(1.08); }


@media (max-width: 900px) {
    #kamar-chat-root.is-max .kamar-chat-products { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* ============================================================================
   MOBILE — czat zawsze pełnoekranowy (~90% ekranu), szklane tło
   ----------------------------------------------------------------------------
   Wcześniej okno zajmowało 68vh i obok niego widać było jeszcze FAB oraz
   fragmenty strony po bokach — wyglądało jak przypadkowo wciśnięty panel.
   Teraz: jedno okno z marginesem 8 px od każdej krawędzi, mocniejszy blur
   (tło strony delikatnie prześwituje), FAB schowany, przycisk „powiększ"
   zbędny (i tak jesteśmy na maksa).
   ========================================================================== */
@media (max-width: 600px) {
    /* Kwadratowy przycisk NA STAŁE w lewym dolnym rogu, 5px od lewej i od dołu.
       To już nie zakładka wystająca z krawędzi (dlatego pełny border-radius i
       przywrócona lewa krawędź). Nisko w rogu = nie zasłania przycisków CTA hero.
       Home-indicator iPhone jest wyśrodkowany, więc nie koliduje z rogiem. */
    #kamar-chat-root { left: 5px; bottom: 5px; }
    #kamar-chat-fab {
        height: 52px; width: 52px; padding: 0; justify-content: center;
        border: 2px solid #103547; border-radius: 14px;
    }
    .kamar-chat-fab-icon img { width: 27px; height: 27px; }

    /* Mini-widget zgody na cookies zniknął 06.08.2026 razem z możliwością
       zamknięcia banera bez wyboru — reguły podnoszące go nad przycisk czatu
       usunięte, bo nie miały już czego pozycjonować. */

    /* ── PRZYKLEJONY PASEK „DO KOSZYKA" NA KARCIE PRODUKTU ──
     *
     * Pasek (`#addcartsection`, Elementor) wjeżdża od dołu przy przewijaniu,
     * gdy oryginalny przycisk zakupu zniknie z ekranu. Ma 52 px wysokości
     * i siedzi przy krawędzi, a przycisk czatu stoi 5 px od dołu — czyli
     * DOKŁADNIE na nim. Zmierzone: przy szerokości 500 px czat zasłaniał
     * lewą część paska razem z ceną.
     *
     * Podnosimy czat tylko wtedy, gdy pasek jest naprawdę widoczny. Pasek
     * sygnalizuje to klasą `viewaddcart` (bez niej ma transform translateY),
     * więc `:has()` pozwala pójść za nim bez ani jednej linii JavaScriptu.
     *
     * Gdyby przeglądarka nie znała `:has()`, reguła po prostu nie zadziała
     * i czat zostanie tam, gdzie jest dziś — czyli nie będzie gorzej niż było.
     */
    body:has(#addcartsection.viewaddcart) #kamar-chat-root {
        bottom: 62px;
    }
    /* Ruch ma być widoczny jako przesunięcie, nie przeskok — inaczej wygląda
       jak błąd renderowania przy szybkim przewijaniu. */
    #kamar-chat-root { transition: bottom .18s ease-out; }

    #kamar-chat-panel,
    #kamar-chat-root.is-max #kamar-chat-panel {
        position: fixed;
        left: 8px;
        right: 8px;
        top: 8px;
        bottom: 8px;
        width: auto;
        height: auto;
        max-height: none;
        transform: none;
        border-radius: 14px;
        /* Glassmorphism: mniej krycia + większy blur = tło strony prześwituje. */
        background: rgba(255, 255, 255, 0.62);
        -webkit-backdrop-filter: blur(26px) saturate(1.7);
        backdrop-filter: blur(26px) saturate(1.7);
        border: 1px solid rgba(255, 255, 255, 0.55);
        box-shadow: 0 18px 60px rgba(16, 53, 71, 0.38);
    }
    /* Warstwy wewnętrzne też półprzejrzyste, inaczej blur nic nie da. */
    #kamar-chat-panel .kamar-chat-head { background: rgba(244, 247, 255, 0.6); }
    #kamar-chat-panel .kamar-chat-body { background: rgba(244, 247, 255, 0.34); }
    #kamar-chat-panel .kamar-chat-foot { background: rgba(255, 255, 255, 0.55); }

    /* Otwarty czat = tylko okno czatu. Zakładka i „powiększ" zbędne. */
    #kamar-chat-root.is-open #kamar-chat-fab { display: none; }
    .kamar-chat-max { display: none !important; }

    /* 2 karty w rzędzie także na telefonie (wcześniej było 1 na pełną szerokość). */
    .kamar-chat-products { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .kamar-chat-prod { padding: 8px; }
    .kamar-chat-prod img { height: 120px; }

    /* iOS auto-zoomuje na fokusie inputa z font-size < 16px (cała strona się
       „przybliżała", okno czatu wychodziło poza ekran). 16px = brak zoomu. */
    #kamar-chat-input { font-size: 16px; }
}