/* Copyright (c) 2026 Bc. Jan Krejčí. All rights reserved. */
/* Proprietary and confidential. See LICENSE in the project root. */

/* ══════════════════════════════════════════════════════════════════════════
   AGÁTA — celá obrazovka jako skutečný chat.

   Vlastní soubor, protože jde o rozvržení jedné obrazovky. Základní jazyk
   (tón podle závažnosti, bubliny, důkazy) zůstává v kp-lite.css; tady je
   jen to, co z toho dělá chat: jedna konverzace a ukotvený dok.
   Načítá se PO kp-lite.css, takže přepis vyhrává.

   Proč to vzniklo: obrazovka byla jeden dlouhý sloupec uvnitř `.kp-lite__main`.
   Pole na dotaz proto leželo na konci STRÁNKY — po pár zprávách se k němu
   muselo rolovat. U chatu je to ta nejhorší možná vlastnost; každý chat, který
   lidé znají, drží pole dole.

   Barvy jen z tokenů (--kp-*, --lite-*), aby světlo, tma i panel Vzhled
   dosáhly i sem (trvalé pravidlo v CLAUDE.md).
   ══════════════════════════════════════════════════════════════════════════ */

/* Rolování dělá HLAVNÍ oblast aplikace, ne vnitřní panel.

   Dřív měl rozhovor vlastní scroller. Vypadalo to jako panel v panelu a
   posuvník seděl zanořený uvnitř karty místo u pravého okraje okna, kde ho
   člověk čeká. Teď se roluje `.kp-lite__main` jako na každé jiné obrazovce —
   posuvník je systémový, na svém místě a všude v aplikaci stejný.

   Ukotvení pole na dotaz to neztratilo: dok je `sticky` u spodní hrany
   scrollportu, takže se drží dole a přitom se roluje běžně. */

/* Sloupec, ne mřížka — kvůli LEPIVOSTI. Lepivý prvek uvnitř gridu se drží
   ve své buňce, a řádek `auto` je přesně tak vysoký jako hlavička: nemá kam
   cestovat, takže by `position: sticky` nic neudělalo. Ve flexovém sloupci
   je jeho vztažným rámem celý obsah kontejneru, a hlavička i dok se drží.
   `flex: 1` na rozhovoru dělá totéž co dřív řádek `1fr`. */
.kp-ag--screen {
    display: flex;
    flex-direction: column;
    gap: 0;
    /* Aspoň na výšku SCROLLPORTU, ať dok nevisí uprostřed prázdné obrazovky,
       když je zpráv málo (nový účet, dvě tři zprávy). `100%` by tu neviděl
       přes `.kp-lite__inner` — je to blok bez vlastní výšky, takže procenta
       skrz něj neprojdou (jeho výška je „auto", z pohledu potomků neurčitá).
       `cqb` se dívá skrz jakýkoli počet mezičlánků rovnou na nejbližšího
       předka s `container-type: size` — to je `.kp-lite__main`. Odečtená
       `--kp-lite-content-top` (viz `kp-lite.css`) ze stejného důvodu jako
       u `kp-chat.css`: bez ní byl obsah vždycky o výšku lišty vyšší, než
       kolik se do scrollportu vejde, a stránka měla trvalý svislý posuvník. */
    min-height: calc(100cqb - var(--kp-lite-content-top, 0px));
    /* Vztažný rám rozhovoru. Bez `z-index` schválně — přidat sem číslo (byť
       jen `0`) by ze `.kp-ag--screen` udělalo vlastní řadicí kontext, a
       Agátina hlavička uvnitř (`z-index: 22`) by pak soupeřila s horní
       lištou (`z-index: 20`) jen POD úrovní tohohle kontextu — celý rozhovor
       by se srovnával proti liště jako jedna deska na úrovni „0", a lišta
       (20) by ho i s hlavičkou přebila. Přesně to způsobilo, že rozostřený
       pás pod lištou prosvítal přes samotnou hlavičku, místo aby ji hlavička
       jako opakátnější prvek (22 > 20) sama překryla. */
    position: relative;
}

.kp-ag--screen .kp-ag__scroll { flex: 1 1 auto; }

/* ---- hlavička ----------------------------------------------------------- */

/* Hlavička je LEPIVÁ a je to KARTA — přesně jak byla, jen skleněná.
   Je to jediné místo, které říká, s kým se tu mluví, a rozhovor je nejdelší
   rolující obsah v aplikaci. Lepí se pod horní lištu appky (`--kp-lite-
   topbar-h` — na počítači lepivou, na mobilu plovoucí `position: fixed`,
   viz `kp-lite.css`), na mobilu navíc zúžená, aby z nízké obrazovky nebrala
   víc, než co nese: tvář, jméno a nic víc (popis se skrývá už dřív).

   Předchozí pokus ji nahradil závojem bez ohraničení („rozmazání místo
   useknutí"), aby bubliny pod ní mizely postupně, ne skokem. Na živém
   náhledu z toho ale byla rozmazaná šmouha přes půl obrazovky — zadavatel
   chtěl vrátit kartu, jen ji udělat SKLENĚNOU (`--kp-glass-*`, stejná
   rodina jako přihlašovací karta a horní lišta výš), ne plnou barvou.
   Bublina pod ní se pak ztlumí a rozostří tím, čím karta JE — přes
   `backdrop-filter` — bez druhé vrstvy navíc. */
.kp-ag--screen .kp-ag__headwrap {
    position: sticky;
    top: var(--kp-lite-topbar-h, 0px);
    /* Výš než lepivá lišta (20), ať ji hlavička při potkání překryje, ne
       naopak. */
    z-index: 22;
    margin-bottom: 12px;
    /* Vlastní kompozitní vrstva. Bez ní prohlížeč lepivý prvek s `blur()`
       potomkem (`.kp-ag__head`) přepočítává společně s rolovaným obsahem
       pod ním, a hlavička se během rolování o pár px viditelně chvěje —
       s vrstvou navíc se lepí přesně na místě. */
    will-change: transform;
}

.kp-ag--screen .kp-ag__head {
    display: flex;
    align-items: center;
    gap: 19px;
    padding: 14px 16px;
    border-radius: 20px;
    background: var(--kp-glass-light, var(--lite-card));
    backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    border: 1px solid var(--kp-glass-edge, var(--kp-line));
    box-shadow: var(--kp-shadow-sm);
    /* `overflow: hidden` + `contain: paint` — spolehlivý ořez, ne spoléhání
       na to, jak si filtr sám odhadne rádius. */
    overflow: hidden;
    contain: paint;
    background-image: radial-gradient(120% 180% at 0% 0%,
        color-mix(in oklab, var(--kp-ag-tone) 14%, transparent), transparent 62%);
}

:root[data-effects="minimal"] .kp-ag--screen .kp-ag__head {
    background: var(--lite-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--kp-line);
}

.kp-ag--screen .kp-ag__intro { display: grid; gap: 2px; min-width: 0; }
.kp-ag--screen .kp-ag__intro b {
    font-family: var(--kp-font-display);
    font-size: 1.05rem;
    color: var(--kp-ink);
}
.kp-ag--screen .kp-ag__intro span {
    font-size: 0.88rem;
    line-height: 1.45;
    color: var(--kp-ink-soft);
}

/* ---- rozhovor ----------------------------------------------------------- */

/* Rozhovor je zase PODBARVENÝ — skleněná deska, jak byla předtím, jen ne
   plnou barvou. Bez desky (mezikolo, „bubliny rovnou na fotce") to na živém
   náhledu nezapadalo — zadavatel chtěl vrátit podbarvení, ale designově
   sladit se sklem, které mezitím dostala hlavička i dok (`--kp-glass-*`,
   `forge-tokens.css`). Vodoznak Agáty se vrátil dovnitř téhle desky, přesně
   kam patřil: `background-attachment: fixed` ho ukotví k oknu (nehýbe se
   při rolování), `border-radius` desky ho ořízne u okraje. */
.kp-ag__scroll {
    display: grid;
    align-content: start;
    gap: 14px;
    padding: 16px 18px 18px;
    border-radius: 22px;
    border: 1px solid var(--kp-glass-edge, var(--kp-line));
    box-shadow: var(--kp-shadow-sm);
    background-image:
        linear-gradient(var(--kp-glass-light, var(--lite-card)), var(--kp-glass-light, var(--lite-card))),
        url("img/avatars/characters/agata-full-512.webp");
    background-attachment: fixed, fixed;
    background-position: center, right 2.5rem bottom 7rem;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 17rem;
    background-color: var(--kp-glass-light, var(--lite-card));
    backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    /* Stejný důvod jako u hlavičky a doku — spolehlivý ořez rohu. */
    overflow: hidden;
}

/* Přechod „do ztracena" pod horním menu a nad dokem se zkusil jako
   ::before/::after přímo na téhle kartě (barevný gradient k okraji karty,
   žádný blur) — ale karta sama nikdy nerolovala (rolování dělá
   `.kp-lite__main`, viz komentář výš), takže její horní/dolní okraj se
   na obrazovce objeví jen jednou, ne tam, kde obsah mizí POD lepivou
   hlavičkou/dokem. Odebráno, dokud nebude navázané na skutečné
   rolování scrollportu. */

:root[data-effects="minimal"] .kp-ag__scroll {
    background-image:
        linear-gradient(var(--lite-card), var(--lite-card)),
        url("img/avatars/characters/agata-full-512.webp");
    background-attachment: fixed, fixed;
    background-position: center, right 2.5rem bottom 7rem;
    background-repeat: no-repeat, no-repeat;
    background-size: auto, 17rem;
    background-color: var(--lite-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--kp-line);
}

.kp-ag--screen .kp-ag__bubble { box-shadow: var(--kp-shadow-sm); }

.kp-ag--screen .kp-ag__lead {
    padding: 12px 14px;
    border: 1px solid var(--kp-line);
    border-radius: 16px;
    background: var(--lite-card);
    box-shadow: var(--kp-shadow-sm);
}

.kp-ag--screen .kp-ag__why {
    background: color-mix(in oklab, var(--kp-ag-tone) 8%, var(--lite-card));
    box-shadow: var(--kp-shadow-sm);
}

.kp-ag--screen .kp-ag__why:hover {
    background: color-mix(in oklab, var(--kp-ag-tone) 16%, var(--lite-card));
}

.kp-ag--screen .kp-ag__evidence {
    background: var(--lite-card);
    border: 1px solid var(--kp-line);
    box-shadow: var(--kp-shadow-sm);
}

/* Text se drží čitelné šířky — přes celou desku by řádek přerostl ~90 znaků. */
.kp-ag__scroll > * { max-width: 60rem; width: 100%; justify-self: center; }

/* Tlačítko důkazu na telefonu přetékalo: je to flex se `width: 100%`, ale
   nejsilnější řádek evidence uvnitř se nesměl zalomit ani zmenšit, takže
   obsah roztlačil box přes okraj sloupce. `min-width: 0` vrátí flexu právo
   položku zmenšit, zalomení mu dá kam, a `max-width` doplní `width: 100%`,
   které se počítá z obsahu rodiče a lem tlačítka se přičítá nad něj. */
.kp-ag--screen .kp-ag__why { flex-wrap: wrap; max-width: 100%; }
.kp-ag--screen .kp-ag__proof { min-width: 0; flex: 1 1 auto; overflow-wrap: anywhere; }
.kp-ag--screen .kp-ag__whylink { flex: 0 0 auto; margin-left: auto; }

/* Předěl „Co jsem dnes našla" — stejný tvar jako datum v běžném chatu:
   linka přes celou šířku s popiskem uprostřed. Odděluje, aniž by dělal
   druhý druh obsahu. */
.kp-ag__divider {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: 12px;
    margin: 2px 0 4px;
}

.kp-ag__divider::before,
.kp-ag__divider::after {
    content: "";
    height: 1px;
    background: var(--kp-line);
}

.kp-ag__divider span {
    font-family: var(--kp-font-display);
    font-size: 0.78rem;
    letter-spacing: 0.02em;
    color: var(--kp-ink-faint);
    text-transform: uppercase;
}

/* ---- dok ---------------------------------------------------------------- */

/* Dok JE karta — skleněná, přesně jak byla.
   Předchozí pokus ji nahradil závojem bez ohraničení, aby text pod ní mizel
   postupně místo skokem za hranou. Na živém náhledu z toho ale byla
   rozmazaná šmouha za chipy a polem — zadavatel chtěl kartu zpátky, jen
   sklem (`--kp-glass-*`) místo plné barvy, ať poslední bublina pod ní
   zmizí přes `backdrop-filter`, ne přes samostatnou masku navíc. */
/* Dva prvky schválně: `kp-ag__dockwrap` nese jen `position: sticky`,
   `kp-ag__dock` samo jen sklo (`backdrop-filter`, rádius).

   Zákazník hlásil text prosvítající těsně pod dokem, neroztřený. Live
   ověření v Puppeteeru se ukázalo zrádné: ořezaný snímek (`clip`) tam
   opakovaně ukazoval čitelný text v přesně stejném místě bez ohledu na
   `overflow: hidden` i `contain: paint` — ale NEOŘEZANÝ snímek (celá
   obrazovka, ořez až dodatečně v PIL) byl na tom samém místě čistý. Byl
   to tedy artefakt nástroje na měření (Puppeteer `clip` u ploch
   s `backdrop-filter` na `position: sticky` prvku umí zachytit neaktuální
   snímek kompozitoru), ne prokázaná chyba v CSS. Rozdělení na dva prvky
   přesto zůstává: je to zdokumentovaný, bezpečný obranný vzor přesně proti
   tomuto páru vlastností (sdílená kompozitní vrstva sticky + backdrop-filter
   je známá napříč prohlížeči, i když se ji tady nepodařilo prokázat
   spolehlivě reprodukovat) a nic nestojí — vzhled je beze změny. */
.kp-ag__dockwrap {
    /* Drží se u spodní hrany rolovací oblasti. `sticky` schválně, ne `fixed`:
       zůstane v toku, takže si pod sebou nechá místo a poslední bublina se
       pod ním neschová. */
    position: sticky;
    /* `0` stačí — vztažný rám (`.kp-ag--screen`) si spodní odsazení scrollportu
       přitáhl záporným okrajem výš, takže spodní hrana scrollportu je teď
       i jeho spodní hrana. Bez toho přitažení by tu musela být záporná
       hodnota, jenže sticky nemůže vycestovat dál, než sahá vlastní rám —
       byla by to hodnota bez účinku. */
    bottom: 0;
    z-index: 2;
    margin-top: 12px;
}

.kp-ag__dock {
    position: relative;
    display: grid;
    gap: 10px;
    padding: 12px 12px 14px;
    border-radius: 22px;
    background: var(--kp-glass-light, var(--lite-card));
    backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    -webkit-backdrop-filter: blur(var(--kp-glass-blur, 18px)) saturate(1.1);
    border: 1px solid var(--kp-glass-edge, var(--kp-line));
    box-shadow: 0 -6px 24px -18px color-mix(in oklab, var(--kp-ink) 60%, transparent),
                var(--kp-shadow-sm);
    overflow: hidden;
    contain: paint;
}

:root[data-effects="minimal"] .kp-ag__dock {
    background: var(--lite-card);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    border-color: var(--kp-line);
}

/* Návrhy: na úzku jedna řádka, která se posouvá do strany — zabalené do tří
   řádků by sežraly půl obrazovky právě ve chvíli, kdy je vidět klávesnice. */
.kp-ag--screen .kp-ag__chips {
    display: flex;
    /* `nowrap` MUSÍ být explicitně: základní `.kp-ag__chips` v kp-lite.css má
       `flex-wrap: wrap`, a bez zrušení se návrhy na telefonu zabalí do tří
       řádků a seberou půl obrazovky právě ve chvíli, kdy je vidět klávesnice. */
    flex-wrap: nowrap;
    gap: 8px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: none;
    padding-bottom: 2px;
}

.kp-ag--screen .kp-ag__chips::-webkit-scrollbar { display: none; }
.kp-ag--screen .kp-ag__chip { flex: 0 0 auto; }

/* ---- pole na dotaz ------------------------------------------------------ */

.kp-ag--screen .kp-ag__ask {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    align-items: end;
    gap: 15px;
}

/* Její tvář u pole — drobná připomínka, kdo poslouchá. Na telefonu mizí,
   tam je každý pixel šířky potřeba pro text. */
.kp-ag__askface { align-self: center; }

.kp-ag--screen .kp-ag__field {
    width: 100%;
    resize: none;
    /* Roste s textem po řádcích až do stropu; pak si rolluje sám. Bez stropu
       by dlouhý dotaz vytlačil rozhovor úplně z obrazovky. */
    field-sizing: content;
    min-height: 2.75rem;
    max-height: 9rem;
    padding: 0.7rem 0.9rem;
    border-radius: 16px;
    border: 1px solid var(--kp-line-strong, var(--kp-line));
    background: var(--kp-surface, var(--lite-card));
    color: var(--kp-ink);
    font: inherit;
    font-size: 0.95rem;
    line-height: 1.45;
}

.kp-ag--screen .kp-ag__field:focus-visible {
    outline: 2px solid var(--kp-ag-tone);
    outline-offset: 1px;
    border-color: transparent;
}

/* Kulaté odesílací tlačítko místo textového — u chatu ho lidé hledají jako
   ikonu a šetří to šířku, která na telefonu chybí.

   `#fff` je tu výjimka ze zásady „jen tokeny", a to vědomá: není to plocha
   motivu, ale text NA akcentu. `--kp-a-deep` je tmavě zelená ve světle
   i v tmě, takže bílá na ní drží kontrast v obou režimech; token pro
   „barvu na akcentu" v paletě neexistuje. */
.kp-ag--screen .kp-ag__send {
    width: 2.75rem;
    height: 2.75rem;
    display: grid;
    place-items: center;
    border: 0;
    border-radius: 999px;
    background: var(--kp-a-deep, var(--kp-green-deep));
    color: #fff;
    cursor: pointer;
    box-shadow: var(--kp-shadow-green, 0 8px 20px -10px rgba(0, 0, 0, 0.5));
    transition: transform 0.16s var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1)),
                filter 0.16s ease;
}

.kp-ag--screen .kp-ag__send svg { width: 18px; height: 18px; }
.kp-ag--screen .kp-ag__send:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.06); }
.kp-ag--screen .kp-ag__send:active:not(:disabled) { transform: translateY(0) scale(0.97); }
.kp-ag--screen .kp-ag__send:disabled { opacity: 0.45; cursor: default; box-shadow: none; }

:root[data-motion="reduced"] .kp-ag--screen .kp-ag__send { transition: none; }
@media (prefers-reduced-motion: reduce) {
    .kp-ag--screen .kp-ag__send { transition: none; }
}

.kp-ag__hint {
    margin: 0;
    font-size: 0.76rem;
    color: var(--kp-ink-faint);
    text-align: center;
}

/* ---- telefon ------------------------------------------------------------ */

@media (max-width: 900px) {
    /* Hlavička se na telefonu smrskne na tvář a jméno — tři řádky slibu berou
       místo rozhovoru, a ten slib už uživatel jednou četl. */
    .kp-ag--screen .kp-ag__headwrap { margin-bottom: 8px; }
    .kp-ag--screen .kp-ag__head { padding: 10px 12px; }
    .kp-ag--screen .kp-ag__intro span { display: none; }

    /* Vodoznak na telefonu pryč: `background-attachment: fixed` je na
       mobilních prohlížečích nespolehlivé a místo je vzácné. */
    .kp-ag__scroll { background-image: none; }

    .kp-ag__dockwrap { margin-top: 8px; }

    .kp-ag__dock {
        padding: 10px;
        border-radius: 18px;
        /* Ať dok nekončí pod systémovou lištou telefonu. */
        padding-bottom: max(10px, env(safe-area-inset-bottom));
    }

    .kp-ag__askface { display: none; }
    .kp-ag--screen .kp-ag__ask { grid-template-columns: minmax(0, 1fr) auto; }
    .kp-ag__hint { display: none; }
}

@media (max-width: 640px) {
    /* Užší lepivá karta, ne edge-to-edge bar. Jde na jeden sevřený řádek
       (menší tvář, menší jméno), ale zůstává to karta se svým rádiusem
       a lemem, jen tenčí, ať z nízké obrazovky bere co nejmíň.

       `top` NENÍ 0 — hlavní lišta appky je teď na týhle šířce plovoucí
       vrstva (`position: fixed`, `kp-lite.css`), ne součást toku, takže
       tahle karta pod ní musí odpočívat na `--kp-lite-topbar-h`, ne se jí
       schovávat POD ní na nulové výšce. Teprve při rolování na ni „narazí"
       a vyšší `z-index` ji podle zavedeného pravidla překryje.

       `!important` je tu nutné: velikost avataru nese komponenta v inline
       stylu (`--kp-avatar-size`) a stylopis by ji jinak nepřebil. */
    /* Na mobilu se hlavička NELEPÍ — roluje s obsahem jako všechno ostatní.
       Lepivá karta si na 667px vysoké obrazovce ukusovala pruh natrvalo, a to
       vedle horní lišty, která už jeden bere. Dvě lepivé vrstvy nad sebou
       nechají na vlastní rozhovor sotva dvě třetiny displeje. Kdo si chce
       přečíst, s kým mluví, odroluje nahoru — jméno a tvář jsou tam,
       kde konverzace začíná.

       Na desktopu lepivá zůstává (pravidlo výš): tam je výšky dost a
       hlavička drží kontext u dlouhé konverzace. */
    .kp-ag--screen .kp-ag__headwrap {
        position: static;
        top: auto;
        z-index: auto;
        will-change: auto;
        margin-bottom: 8px;
    }

    .kp-ag--screen .kp-ag__head {
        padding: 8px 12px;
        border-radius: 16px;
        gap: 15px;
    }

    .kp-ag--screen .kp-ag__head .kp-avatar { --kp-avatar-size: 2.3rem !important; }
    .kp-ag--screen .kp-ag__intro b { font-size: 0.98rem; }

    /* Roluje teď SAMO OKNO (`.kp-lite__main` v `kp-lite.css` na týhle šířce
       vlastní scrollport nemá — kvůli schovatelné liště Safari), a spodní
       navigace appky se z pevné lišty stala TAKÉ lepivá u spodku stránky
       (`.kp-lite__mobnav`). Dok by se bez tohohle odsazení lepil na TU
       SAMOU spodní hranu a obě vrstvy by se překryly — 84 px odpovídá
       naměřené výšce spodní navigace (ikona+popisek+odsazení, teď o 8 px
       vyšší kvůli rezervě proti Safařinu gestu na zobrazení schované lišty —
       viz `.kp-lite__mobnav` v `kp-lite.css`), plus bezpečná zóna navíc pro
       zářez telefonu. */
    .kp-ag__dockwrap { bottom: calc(84px + env(safe-area-inset-bottom, 0px)); }
}