.chat-title{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding-bottom:12px;margin-bottom:10px;border-bottom:1px solid var(--line);}
.chat-title .avatar{width:34px;height:34px;border-radius:12px;background:var(--btn);display:grid;place-items:center;color:#FFFFFF;flex:0 0 auto;}
.chat-title .hlavicka-text{min-width:0;flex:1 1 auto;}
.chat-title .name{font-weight:700;font-size:.92rem;}
/* Celé znenie ostáva v `title`, aj keď sa riadok skráti výpustkou. */
.chat-title .status{font-size:.8rem;color:var(--amber);font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.chat-title .ukonci{flex:0 0 auto;margin-left:auto;font-size:.8125rem;padding:8px 12px;}
.chat{height:320px;overflow-y:auto;scrollbar-width:thin;display:flex;flex-direction:column;gap:9px;padding:4px 2px;}
.bubble{font-size:.9rem;line-height:1.5;font-weight:500;padding:9px 12px;border-radius:13px;max-width:92%;opacity:0;transform:translateY(6px);animation:pop .35s ease forwards;}
@keyframes pop{to{opacity:1;transform:none;}}
/* Otázka je pilulka vpravo, odpoveď prostý text. Bublina okolo dlhej odpovede
   z nej robí citát a na celú obrazovku sa číta horšie; dvojica sa odlíši
   stranou a pilulkou, nie farbou. Odmietnutie a porucha si rámček PONECHÁVAJÚ
   — práve ním sa od odpovede odlišujú. */
.bubble.q{max-width:75%;background:var(--navy);color:#FFFFFF;border:0;border-radius:22px 22px 6px 22px;padding:10px 16px;margin-left:auto;}
.bubble.a{max-width:100%;background:var(--bg-2);color:var(--text);border:1px solid var(--line);border-radius:var(--r);padding:14px 18px;font-size:1rem;line-height:1.6;}
.typing{display:flex;gap:5px;align-items:center;background:none;border:0;padding:6px 0;width:62px;opacity:0;animation:pop .3s ease forwards;}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--amber);opacity:.4;animation:blink 1.1s infinite;}
.typing i:nth-child(2){animation-delay:.18s;}
.typing i:nth-child(3){animation-delay:.36s;}
@keyframes blink{0%,80%,100%{opacity:.3;}40%{opacity:1;}}
.src{margin-top:2px;font-size:.8rem;color:var(--muted);font-weight:600;padding-left:4px;opacity:0;animation:pop .35s ease .15s forwards;}
/* Vstup je JEDEN zaoblený rám: pole, čip sprievodcu, počítadlo a odosielacie
   tlačidlo boli štyri vrstvy pod sebou. Focus ring nesie obal cez :focus-within,
   nie pole — inak by sa rám a pole zvýrazňovali každý zvlášť. */
.composer{width:100%;max-width:760px;margin:0 auto;background:var(--bg-2);border:1px solid var(--line-strong);border-radius:26px;padding:10px 12px 8px;transition:border-color .15s, box-shadow .15s;}
.composer:focus-within{border-color:var(--amber);box-shadow:0 0 0 3px rgba(200,30,78,.18);}
.ask{display:flex;flex-direction:column;gap:6px;margin:0;}
.ask input{flex:1;min-width:0;background:transparent;border:0;border-radius:0;padding:5px 10px;font-family:inherit;font-size:1rem;font-weight:500;color:var(--text);outline:none;}
.ask input::placeholder{color:var(--muted);}
.ask input:focus{border-color:transparent;box-shadow:none;}
/* 44px je minimum dotykového cieľa; odosielacie tlačidlo je jediný primárny
   dotykový cieľ widgetu, preto rástlo zo 42px (WCAG 2.5.8). Selektor je
   viazaný na `[type="submit"]` — v tom istom riadku stojí aj čip sprievodcu
   a kruh 44×44 by z neho spravil ikonu bez popisu. */
.ask button[type="submit"]{flex:0 0 auto;width:44px;height:44px;border:none;border-radius:50%;display:grid;place-items:center;cursor:pointer;transition:all .15s;background:var(--btn);color:#FFFFFF;}
.ask button[type="submit"]:hover{background:var(--btn-hover);transform:translateY(-1px);}
.ask button[type="submit"]:disabled{opacity:.45;cursor:default;transform:none;}

/* ----- stavy widgetu „Opýtaj sa" ----- */
.prazdny-stav{margin:auto 0;display:flex;flex-direction:column;gap:4px;padding:0 4px;color:var(--muted);font-size:.9rem;font-weight:500;line-height:1.5;}
.prazdny-stav b{font-size:.8125rem;font-weight:700;color:var(--text);}
.pocitadlo{margin-top:6px;padding-left:4px;font-size:.8125rem;line-height:1.45;font-weight:500;color:var(--muted);}
/* Prah je presná rovnosť s MAX_QUESTION_CHARS, triedu prepína modul. */
.pocitadlo.limit{color:var(--err);}
.gdpr-pozn a{color:var(--text);}
/* Značka [n] má aspoň 24px (WCAG 2.5.8); rovnocenne veľkým cieľom na to isté
   miesto je riadok zdroja nižšie (44px). Podčiarknutie je tu preto, aby farba
   nebola jediným znakom odkazu. */
.citacia{display:inline-block;min-width:20px;min-height:24px;padding:0 4px;color:var(--amber);text-decoration:underline;}
.zdroje{margin-top:24px;display:flex;flex-direction:column;gap:8px;padding-left:4px;opacity:0;animation:pop .35s ease .15s forwards;}
.zdroje-nadpis{font-size:.9rem;font-weight:700;line-height:1.4;color:var(--text);}
.zdroj-riadok{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8125rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
.zdroj-nazov{font-weight:700;color:var(--text);}
a.zdroj-nazov{color:var(--amber);text-decoration:underline;}
.zdroj-meta{font-size:.8125rem;font-weight:500;color:var(--muted);}
.zdroje-pozn{font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--muted);}
/* Odmietnutie NIE je porucha: systém pracuje správne, len to v dokumentoch
   nie je. Preto ani výstražná farba, ani akcentový tint bubliny odpovede —
   musí sa čítať inak než odpoveď aj inak než prevádzková porucha. */
.odmietnutie{background:var(--bg-2);border:1px solid var(--line);border-left:3px solid var(--muted);border-radius:var(--r);padding:9px 12px;font-size:.9rem;line-height:1.5;font-weight:500;color:var(--text);max-width:92%;opacity:0;animation:pop .35s ease forwards;}
.odmietnutie-pozn{margin-top:6px;font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--muted);}
/* Vynechaná neoverená časť aj predpoklad nového podania: poznámka aplikácie,
   tichšia než odpoveď, nie odmietnutie ani porucha. */
.ciastocna-pozn,.predpoklad-pozn{margin-top:8px;font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--muted);}
.bubble.a.upresnenie{border-left:3px solid var(--amber);padding-left:18px;}
.upresnenie-nadpis{font-size:.8125rem;font-weight:700;color:var(--amber);margin-bottom:2px;}
.navrhy{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;opacity:0;animation:pop .35s ease .15s forwards;}
.navrhy-nadpis{flex:0 0 100%;font-size:.8125rem;font-weight:700;color:var(--muted);}
.navrh{border-radius:999px;}
.najdene{margin-top:16px;display:flex;flex-direction:column;gap:8px;padding-left:4px;opacity:0;animation:pop .35s ease .15s forwards;}
.najdene-nadpis{font-size:.9rem;font-weight:700;color:var(--text);}
.najdene-pozn{font-size:.8125rem;font-weight:500;line-height:1.45;color:var(--muted);}
.najdene-riadok{min-height:44px;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.8125rem;line-height:1.45;color:var(--muted);overflow-wrap:anywhere;}
.prevadzka{background:var(--pink-soft);border:1px solid var(--line);border-left:3px solid var(--err);border-radius:var(--r);padding:9px 12px;font-size:.9rem;line-height:1.5;font-weight:500;color:var(--err);max-width:92%;opacity:0;animation:pop .35s ease forwards;}

/* ----- sprievodca „Bombura" (Phase 7) ----- */
/* Renderer odsekov NIČ neinterpretuje (UI-SPEC R2) — medzeru medzi odsekmi
   robí štýl, nie prázdny riadok v texte. */
.odsek{line-height:1.5;}
.odsek+.odsek{margin-top:8px;}
/* Riadok nástrojov vnútri composeru: čip sprievodcu vľavo, počítadlo a
   odosielacie tlačidlo vpravo. V bloku tipov by klik míňal tokeny (T-05-09),
   tu je štart bez tokenov. */
.vstup-riadok{display:flex;align-items:center;justify-content:flex-end;gap:8px;margin:0;padding:0;}
/* Čip si berie voľné miesto vľavo — počítadlo je pri prázdnom poli skryté
   (`.pocitadlo:empty`), takže pravé ukotvenie nesmie stáť na ňom. */
.vstup-riadok .vstup-sprievodca{margin-right:auto;}
.vstup-riadok .pocitadlo{margin:0;padding-left:0;font-size:.75rem;}
.vstup-sprievodca{width:auto;min-height:36px;display:flex;align-items:center;justify-content:center;gap:8px;flex-wrap:wrap;background:transparent;border:1px solid var(--line);border-radius:999px;padding:10px 16px;font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.4;color:var(--text);cursor:pointer;transition:border-color .15s,background .15s;}
.vstup-sprievodca:hover{border-color:var(--amber);background:var(--pink-soft);}
.vstup-sprievodca .sipka{color:var(--amber);font-weight:700;}
.vstup-sprievodca:disabled{opacity:.45;cursor:default;}
.ponuka,.suhlas,.zhrnutie,.mazanie,.obnovenie,.stiahnutie{background:var(--bg-2);border:1px solid var(--line);border-radius:var(--r);padding:16px;font-size:.9rem;line-height:1.5;font-weight:500;color:var(--text);max-width:100%;opacity:0;animation:pop .35s ease forwards;}
/* Výstražná farba sa objaví AŽ pri potvrdení deštruktívnej akcie. */
.mazanie{border-left:3px solid var(--err);}
.blok-nadpis{font-size:.9rem;font-weight:700;line-height:1.4;margin-bottom:8px;}
.blok-telo{font-size:.9rem;line-height:1.5;}
.blok-telo+.blok-telo{margin-top:8px;}
.blok-akcie{display:flex;flex-direction:column;gap:8px;margin:12px 0;max-width:100%;}
.btn-ghost{font:inherit;font-size:.875rem;line-height:1.45;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--bg-2);color:var(--text);text-align:left;cursor:pointer;overflow-wrap:anywhere;max-width:100%;}
.btn-ghost:hover,.btn-ghost:focus-visible{border-color:var(--amber);outline:2px solid var(--amber);outline-offset:2px;}
.btn-ghost:disabled{opacity:.55;cursor:default;}
.kos-riadok .btn-ghost{display:block;margin:6px 0 12px;}
/* Zvolený prepínač (otázka „viac") a zapísaná voľba pri oprave: rámik, tint
   aj fajka — farba nie je jediný znak stavu. Fajka je ozdoba: stav čítačke
   hovorí aria-pressed / aria-current, preto prázdny alternatívny text; prvá
   deklarácia je záloha pre prehliadač, ktorý `/ ""` nepozná. */
.btn-ghost[aria-pressed="true"],.btn-ghost[aria-current="true"]{border-color:var(--amber);background:var(--pink-soft);font-weight:700;}
.btn-ghost[aria-pressed="true"]::before,.btn-ghost[aria-current="true"]::before{content:"✓ ";content:"✓ " / "";color:var(--amber);}
/* Riadok ovládania otázky: poradie v časti, Neviem / Netýka sa ma a vpravo
   nenápadné „Prejsť na kontrolu". Na úzkej šírke sa zalomí, nezmenší pod 44 px. */
.ovladanie{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin:4px 0 12px;max-width:100%;}
.postup{flex:1 0 100%;font-size:.8125rem;line-height:1.45;font-weight:600;color:var(--muted);}
.btn-tichy{margin-left:auto;min-height:44px;padding:10px 4px;background:transparent;border:0;font:inherit;font-size:.8125rem;font-weight:700;line-height:1.45;color:var(--muted);text-decoration:underline;cursor:pointer;}
.btn-tichy:hover{color:var(--text);}
.btn-tichy:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.btn-tichy:disabled{opacity:.55;cursor:default;}
/* Kompaktný prehľad: vyplnený údaj je riadok-tlačidlo so „Zmeniť" vpravo.
   Údaj, ktorý sa podľa odpovedí nevytlačí, je tichší a nesie dôvod (R16). */
.udaj{display:grid;grid-template-columns:1fr auto;column-gap:12px;align-items:start;width:100%;min-height:44px;padding:10px 4px;border:0;border-bottom:1px solid var(--line);background:transparent;font:inherit;font-size:.9rem;line-height:1.45;font-weight:500;color:var(--text);text-align:left;cursor:pointer;overflow-wrap:anywhere;}
.udaj::after{content:"Zmeniť";grid-column:2;grid-row:1;font-size:.8125rem;font-weight:700;color:var(--amber);}
.udaj:hover{background:var(--pink-soft);}
.udaj:focus-visible{outline:2px solid var(--amber);outline-offset:2px;}
.udaj:disabled{opacity:.55;cursor:default;}
.udaj.neplati{color:var(--muted);}
.udaj-pozn{display:block;margin-top:2px;font-size:.8125rem;font-style:italic;}
.chyba-riadok{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:4px 12px;margin:8px 0;font-size:.9rem;line-height:1.45;font-weight:600;color:var(--text);}
.chat details{margin:10px 0;overflow-wrap:anywhere;}
.chat summary{cursor:pointer;font-weight:700;min-height:44px;padding:10px 0;}
/* Akčný riadok sa pri úzkej šírke ZALOMÍ, nezmršťuje sa pod 44 px. */
.akcie{margin-top:16px;display:flex;flex-wrap:wrap;gap:8px;opacity:0;animation:pop .35s ease forwards;}
.btn-primar,.btn-obrys{min-height:44px;flex:1 1 auto;border-radius:999px;padding:10px 16px;font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.4;cursor:pointer;transition:all .15s;}
.btn-primar{background:var(--btn);border:1px solid var(--btn);color:#FFFFFF;}
.btn-primar:hover{background:var(--btn-hover);}
.btn-obrys{background:transparent;border:1px solid var(--line);color:var(--text);}
.btn-obrys:hover{border-color:var(--amber);}
.btn-primar:disabled,.btn-obrys:disabled{opacity:.45;cursor:default;}
/* Jediné vyplnené tlačidlo v celej fáze, ktoré nesie výstražnú farbu. */
.btn-mazat{min-height:44px;flex:1 1 auto;border-radius:999px;padding:10px 16px;font-family:inherit;font-size:.9rem;font-weight:700;line-height:1.4;cursor:pointer;background:var(--err);border:1px solid var(--err);color:#FFFFFF;}
.btn-mazat:disabled{opacity:.45;cursor:default;}
.blok-odkaz{display:inline-block;margin-top:8px;color:var(--amber);text-decoration:underline;font-weight:700;}
.blok-verzia,.blok-pozn{margin-top:8px;font-size:.8125rem;line-height:1.45;font-weight:500;color:var(--muted);}
.kose{margin-top:8px;display:flex;flex-direction:column;gap:4px;}
.kos-nadpis{margin-top:8px;font-size:.9rem;font-weight:700;line-height:1.4;color:var(--text);}
.kos-riadok{font-size:.9rem;line-height:1.5;font-weight:500;color:var(--muted);overflow-wrap:anywhere;}
/* Palce nemajú akcent ani výstražnú farbu: akcent by závisel od toho, ako
   často občania klikajú, a výstražná farba by z čestnej spätnej väzby
   spravila chybu (UI-SPEC §Feedback thumbs). */
.hodnotenie{display:flex;gap:8px;align-items:center;padding-left:4px;}
.palec{width:44px;height:44px;display:grid;place-items:center;background:transparent;border:1px solid transparent;border-radius:999px;font-size:1rem;color:var(--muted);cursor:pointer;}
.palec:hover{background:var(--pink-soft);color:var(--text);}
.palec:disabled{opacity:.45;cursor:default;}
.hodnotenie-vdaka{font-size:.8125rem;line-height:1.45;font-weight:500;color:var(--muted);}
/* Pod composerom je JEDEN drobný riadok — GDPR veta a pätka sprievodcu vedľa
   seba. Pätka už nemá vlastný posuvník ani hornú čiaru: vnorený posuvník vo
   výške 96 px bol horší než riadok, ktorý sa proste zalomí. */
.chat-pozn{width:100%;max-width:760px;margin:6px auto 0;display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:4px 12px;text-align:center;font-size:.75rem;}
.chat-pozn .gdpr-pozn,.chat-pozn .phone-pata{margin:0;font-size:.75rem;}
.phone-pata{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 10px;}
/* Dotykový cieľ ostáva 44 px, mení sa len veľkosť písma (WCAG 2.5.8). */
.mazat-spustac{background:transparent;border:none;padding:0 4px;min-height:44px;font-family:inherit;font-size:.75rem;font-weight:700;line-height:1.45;color:var(--muted);text-decoration:underline;cursor:pointer;}
.mazat-spustac:hover{color:var(--text);}
.sedenie-pozn{margin:0;font-size:.75rem;line-height:1.45;font-weight:500;color:var(--muted);}
/* `.chat summary` sem neplatí — pätka žije mimo #chat. */
.sedenie-pozn summary{display:inline-flex;align-items:center;min-height:44px;list-style:none;text-decoration:underline;cursor:pointer;}
.sedenie-pozn summary::-webkit-details-marker{display:none;}
/* Id sedenia je vyberateľný TEXT, nikdy odkaz a nikdy súčasť adresy. */
.sedenie-id{user-select:all;overflow-wrap:anywhere;color:var(--text);}


.chat-main{width:100%;max-width:880px;margin:0 auto;min-height:0;flex:1;display:flex;flex-direction:column;padding:12px clamp(12px,3vw,28px) max(8px,env(safe-area-inset-bottom))}
.chat-title{flex:none;margin:0;padding:0 0 10px}.chat-title h1{font-size:1rem}.chat-title .status{font-size:.75rem}
.chat{height:auto;min-height:0;flex:1;padding:16px 2px;overscroll-behavior:contain;overflow-wrap:anywhere;scroll-behavior:auto}
.chat-tools{display:flex;gap:8px}.chat-tools button{font-size:.75rem}
.prazdny-stav{max-width:600px;margin:auto;gap:14px;padding:20px 4px}.prazdny-stav b{font-size:clamp(1.3rem,3vw,1.8rem);color:var(--text)}
.tipy{display:flex;flex-direction:column;gap:14px}
.tip{font:inherit;font-size:.85rem;line-height:1.4;min-height:44px;padding:10px 14px;border:1px solid var(--line);border-radius:999px;background:var(--bg-2);color:var(--text);text-align:left;cursor:pointer;transition:border-color .15s}
.tip:hover,.tip:focus-visible{border-color:var(--amber);outline:2px solid var(--amber);outline-offset:2px}
.composer{flex:none;margin-top:6px}.ask input{font-size:16px}.gdpr-pozn{margin:0}.vstup-sprievodca{font-size:.8rem;padding:6px 12px}
.pocitadlo:empty{display:none}.chat-pozn{flex:none}.phone-pata{flex:none}.sedenie-id{overflow-wrap:anywhere}
@media(max-width:480px){.chat-title .avatar{display:none}.chat-title{gap:6px}.chat-title .ukonci{padding:6px;font-size:.7rem}.chat-tools button{padding:6px}.bubble.q{max-width:88%}.composer{border-radius:20px}}
/* Zo zoznamu skrývaných prvkov MUSÍ byť .vstup-riadok vonku — je v ňom
   odosielacie tlačidlo a bez neho by občan na nízkom okne nemal čím otázku
   odoslať. Skrýva sa už len drobný riadok poznámok. */
@media(max-height:540px){.chat-pozn{display:none}.chat-main{padding-top:4px}.chat-title{padding-bottom:4px}.hd-top{padding-top:4px;padding-bottom:4px}}
@media (prefers-reduced-motion:reduce){
  .bubble,.typing,.src,.zdroje,.odmietnutie,.prevadzka,.odsek,.ponuka,.suhlas,.zhrnutie,.mazanie,.akcie,.obnovenie,.stiahnutie,.navrhy,.najdene{animation:none;opacity:1;transform:none}
  .typing i{animation:none}
}
.zdroj-ukazka{margin-top:.5rem;font-size:.85rem}
.zdroj-ukazka summary{cursor:pointer;text-decoration:underline}
.zdroj-ukazka blockquote{margin:.6rem 0;padding-left:.8rem;border-left:2px solid currentColor;white-space:pre-wrap;overflow-wrap:anywhere;max-height:24rem;overflow:auto}

/* ----- úvodný stav domovskej stránky: vstup hore a v zvislom strede ----- */
/* Prepínačom je JEDINÁ trieda .prazdny-stav, ktorú js/opytaj-sa.js odstráni pri
   prvej správe a znovu vloží pri „Nový rozhovor“ / expirácii sedenia. Preto
   :has() a nulová zmena v HTML aj v JS — po odstránení triedy platí opäť
   dnešné rozloženie (formulár dole, .chat s flex:1). */
.chat-main:has(.prazdny-stav) .chat-title{order:1;margin-bottom:auto}
/* flex:0 1 auto + min-height:0: na nízkom okne sa pozdrav zmrští a scrolluje
   vnútri (overflow-y:auto z riadku 8) namiesto toho, aby vytlačil vstup mimo
   obrazovku. */
.chat-main:has(.prazdny-stav) .chat{order:2;flex:0 1 auto;min-height:0}
/* Priame deti .chat-main sú po prestavbe štyri: titulok, chat, composer,
   poznámka. Dvojica auto-okrajov (.chat-title dole, .chat-pozn hore) si voľné
   miesto rozdelí na polovice — preto je zhluk „pozdrav + vstup“ v zvislom
   strede. Zvýraznenie vstupu nesie composer, nie pole: rám je jeden prvok. */
.chat-main:has(.prazdny-stav) .composer{order:3;margin-top:18px;max-width:600px;border-color:var(--amber);box-shadow:0 0 0 4px rgba(200,30,78,.14),0 14px 40px rgba(11,31,58,.12)}
.chat-main:has(.prazdny-stav) .chat-pozn{order:4;margin-top:auto}
.chat-main:has(.prazdny-stav) .composer .ask input{padding:10px 14px;font-size:1.1rem}
/* Nízke okno skrýva .chat-pozn a s ňou jej auto-okraj — nositeľom spodného
   auto-okraja sa tam musí stať composer, inak by zhluk spadol na spodok okna. */
@media(max-height:540px){.chat-main:has(.prazdny-stav) .composer{margin-bottom:auto}}
/* Odpoveď je súvislý text na čítanie, nie štítok — bežná váha písma. */
.bubble.a{font-weight:400}
/* Počas bežiaceho sprievodcu je vstupný čip mŕtvy cieľ (klik len vráti
   fokus do poľa). Stav čítame z tlačidla „Ukončiť sprievodcu“, ktoré JS
   odkrýva iba v režime sprievodcu — žiadny nový JS stav. */
.chat-main:has(#ukonciSprievodcu:not([hidden])) #vstupSprievodca{display:none}