/*
 * WP Chat – bublina a okno. Čisté CSS, žiadny framework (ako všetko naše).
 * Farbu si berie z parametra doplnku, tmavý režim ide podľa systému aj podľa šablóny.
 */

.wpchat {
    --wpchat-farba: #1f6feb;
    --wpchat-text: #12141a;
    --wpchat-pozadie: #fff;
    --wpchat-linka: #e3e6ea;
    --wpchat-tlmene: #5b6470;
    --wpchat-host: #1f6feb;
    --wpchat-host-text: #fff;
    --wpchat-ai: #f2f4f7;

    --wpchat-odsadenie: 0px;

    position: fixed;
    bottom: calc(1rem + var(--wpchat-odsadenie));
    z-index: 9980;
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    font-size: 15px;
    line-height: 1.45;
    color: var(--wpchat-text);
}

.wpchat--vpravo { right: 1rem; }
.wpchat--vlavo { left: 1rem; }

/* `hidden` musí prebiť `display` z tried. Bez toho je okno vidieť od načítania stránky
   a krížik ním nepohne – JS atribút nastaví, ale pravidlo triedy má vyššiu špecificitu
   než štýl prehliadača. (Robert to videl naživo na web20, 23. 9. 2026.) */
.wpchat [hidden],
.wpchat__okno[hidden] { display: none !important; }

@media (prefers-color-scheme: dark) {
    .wpchat:not([data-theme="light"]) {
        --wpchat-text: #e7eaf0;
        --wpchat-pozadie: #161a21;
        --wpchat-linka: #2b313b;
        --wpchat-tlmene: #9aa4b2;
        --wpchat-ai: #222834;
    }
}

[data-theme="dark"] .wpchat {
    --wpchat-text: #e7eaf0;
    --wpchat-pozadie: #161a21;
    --wpchat-linka: #2b313b;
    --wpchat-tlmene: #9aa4b2;
    --wpchat-ai: #222834;
}

/* ---------------------------------------------------------------- bublina */

.wpchat__bublina {
    position: relative;
    display: grid;
    place-items: center;
    width: 3.5rem;
    height: 3.5rem;
    border: 0;
    border-radius: 50%;
    background: var(--wpchat-farba);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 20px rgb(0 0 0 / 22%);
    transition: transform .15s ease;
}

.wpchat__bublina:hover { transform: scale(1.05); }
.wpchat__bublina svg { width: 1.6rem; height: 1.6rem; fill: currentColor; }
.wpchat__bublina--aktivna { transform: scale(.92); }

.wpchat__odznak {
    position: absolute;
    top: -.2rem;
    inset-inline-end: -.2rem;
    min-width: 1.25rem;
    padding: 0 .25rem;
    border-radius: 999px;
    background: #d7263d;
    color: #fff;
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.25rem;
}

/* ---------------------------------------------------------------- okno */

.wpchat__okno {
    position: absolute;
    bottom: 4.25rem;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    width: min(23rem, calc(100vw - 2rem));
    height: min(32rem, calc(100vh - 7rem));
    overflow: hidden;
    border: 1px solid var(--wpchat-linka);
    border-radius: .9rem;
    background: var(--wpchat-pozadie);
    box-shadow: 0 18px 48px rgb(0 0 0 / 26%);
}

.wpchat--vlavo .wpchat__okno { inset-inline-end: auto; inset-inline-start: 0; }

.wpchat__hlavicka {
    display: flex;
    gap: .5rem;
    align-items: center;
    padding: .75rem 1rem;
    background: var(--wpchat-farba);
    color: #fff;
}

.wpchat__nadpis { font-weight: 600; }

.wpchat__stav {
    margin-inline-start: auto;
    font-size: .8rem;
    opacity: .85;
}

.wpchat__zavriet {
    padding: 0 .25rem;
    border: 0;
    background: none;
    color: inherit;
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
}

.wpchat__spravy {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: .85rem;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.wpchat__sprava { max-width: 85%; }
.wpchat__text { padding: .5rem .7rem; border-radius: .75rem; white-space: pre-wrap; overflow-wrap: anywhere; }

.wpchat__sprava--host { align-self: flex-end; }
.wpchat__sprava--host .wpchat__text { background: var(--wpchat-host); color: var(--wpchat-host-text); border-bottom-right-radius: .2rem; }

.wpchat__sprava--ai .wpchat__text,
.wpchat__sprava--agent .wpchat__text { background: var(--wpchat-ai); border-bottom-left-radius: .2rem; }

.wpchat__sprava--agent .wpchat__text { border-inline-start: 3px solid var(--wpchat-farba); }

.wpchat__sprava--system {
    align-self: center;
    max-width: 100%;
    color: var(--wpchat-tlmene);
    font-size: .82rem;
    text-align: center;
}

/* ---------------------------------------------------------------- produkty v odpovedi */

.wpchat__produkty { display: flex; flex-direction: column; gap: .35rem; margin-top: .4rem; }

.wpchat__produkt {
    display: flex;
    justify-content: space-between;
    gap: .5rem;
    padding: .45rem .6rem;
    border: 1px solid var(--wpchat-linka);
    border-radius: .6rem;
    color: inherit;
    text-decoration: none;
}

.wpchat__produkt:hover { border-color: var(--wpchat-farba); }
.wpchat__produkt-cena { color: var(--wpchat-tlmene); white-space: nowrap; }

/* ---------------------------------------------------------------- lišta a formulár */

.wpchat__lista { padding: 0 .85rem .5rem; }

.wpchat__clovek {
    padding: .35rem .7rem;
    border: 1px solid var(--wpchat-linka);
    border-radius: 999px;
    background: none;
    color: var(--wpchat-tlmene);
    font-size: .82rem;
    cursor: pointer;
}

.wpchat__clovek:hover { border-color: var(--wpchat-farba); color: var(--wpchat-farba); }

.wpchat__formular {
    display: flex;
    gap: .5rem;
    align-items: flex-end;
    padding: .6rem .85rem;
    border-top: 1px solid var(--wpchat-linka);
}

.wpchat__vstup {
    flex: 1;
    max-height: 6rem;
    padding: .5rem .6rem;
    border: 1px solid var(--wpchat-linka);
    border-radius: .6rem;
    background: var(--wpchat-pozadie);
    color: inherit;
    font: inherit;
    resize: none;
}

.wpchat__odoslat {
    padding: .5rem .9rem;
    border: 0;
    border-radius: .6rem;
    background: var(--wpchat-farba);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.wpchat__formular--caka .wpchat__odoslat { opacity: .6; pointer-events: none; }

.wpchat__suhlas {
    margin: 0;
    padding: 0 .85rem .7rem;
    color: var(--wpchat-tlmene);
    font-size: .72rem;
}

.wpchat__suhlas a { color: inherit; }

/* ---------------------------------------------------------------- formulár na e-mail */

.wpchat__kontakt {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .7rem;
    border: 1px dashed var(--wpchat-linka);
    border-radius: .7rem;
}

.wpchat__kontakt input {
    padding: .45rem .6rem;
    border: 1px solid var(--wpchat-linka);
    border-radius: .5rem;
    background: var(--wpchat-pozadie);
    color: inherit;
    font: inherit;
}

.wpchat__kontakt button {
    padding: .45rem .7rem;
    border: 0;
    border-radius: .5rem;
    background: var(--wpchat-farba);
    color: #fff;
    font: inherit;
    cursor: pointer;
}

.wpchat__chyba { margin: .2rem 0 0; color: #d7263d; font-size: .8rem; }

/* ---------------------------------------------------------------- mobil */

@media (max-width: 30rem) {
    .wpchat { bottom: calc(.75rem + var(--wpchat-odsadenie)); }
    .wpchat--vpravo { right: .75rem; }
    .wpchat--vlavo { left: .75rem; }

    .wpchat__okno {
        position: fixed;
        inset: 0;
        width: 100vw;
        height: 100dvh;
        border: 0;
        border-radius: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .wpchat__bublina { transition: none; }
}

.wpchat__hodnotenie {
    display: flex;
    gap: .4rem;
    align-items: center;
    align-self: center;
    padding: .4rem .6rem;
    border: 1px solid var(--wpchat-linka);
    border-radius: .6rem;
    color: var(--wpchat-tlmene);
    font-size: .82rem;
}

.wpchat__hodnotenie button {
    padding: .1rem .3rem;
    border: 0;
    background: none;
    font-size: 1.1rem;
    cursor: pointer;
}

/* „píše…" – tri bodky, po chvíli s textom, nech je vidieť, že poradca hľadá */
.wpchat__pise .wpchat__text { display: flex; gap: .15rem; align-items: center; color: var(--wpchat-tlmene); }
.wpchat__bodky { display: inline-flex; gap: .2rem; }

.wpchat__bodky i {
    width: .35rem;
    height: .35rem;
    border-radius: 50%;
    background: currentColor;
    animation: wpchat-bodka 1.2s infinite ease-in-out;
}

.wpchat__bodky i:nth-child(2) { animation-delay: .2s; }
.wpchat__bodky i:nth-child(3) { animation-delay: .4s; }
.wpchat__pise-text { font-size: .8rem; }

@keyframes wpchat-bodka {
    0%, 60%, 100% { opacity: .3; transform: translateY(0); }
    30% { opacity: 1; transform: translateY(-.15rem); }
}

@media (prefers-reduced-motion: reduce) {
    .wpchat__bodky i { animation: none; opacity: .6; }
}