/* ============================================================
   Chat widget – ztshafo.sk
   Samostatný súbor, aby bol na index.html aj rezervacia.html jeden a ten istý.
   Premenné pre samotný widget si definuje sám. Navyše tu žijú spoločné
   premenné plávajúceho radu (--fab-*), lebo je to jediný štýl spoločný obom stránkam.
   ============================================================ */
#chat{
  --red:#E1211F; --red-dk:#B8171B; --ink:#1c1b1a; --ink-soft:#7d7674;
  --line:#e7e1df; --bg:#faf8f7; --r-lg:18px;
  --head:'Oswald','Arial Narrow',system-ui,sans-serif;
}

/* ---------- plávajúce tlačidlo chatu v pravom dolnom rohu ----------
   Telefón z radu vypadol – číslo je v hlavičke vpravo hore; košík je v hornej
   lište. Chat je najnižšie, kam palec dosiahne. Súbor je pripojený na oboch
   stránkach, preto tu žijú spoločné premenné polohy (--fab-*). */
:root{
  /* Spodných ~34 px je na iPhone gesto-zóna domovského indikátora. Bez
     `env()` doň chat zasahoval a ťuknutie miesto neho vyvolalo systémové gesto. */
  --fab-spodok:calc(18px + env(safe-area-inset-bottom, 0px));
  --fab-btn:56px;      /* priemer okrúhlych tlačidiel */
  --fab-okraj:18px;    /* odsadenie celého radu od pravého okraja */
  /* dopočítané – needituj ručne */
  --fab-chat:var(--fab-spodok);
}
/* Na mobile je tlačidlo menšie a bližšie k okraju – stačí prepísať vstupy,
   --fab-chat sa prepočíta, lebo var() sa vyhodnocuje až na prvku. */
@media(max-width:940px){
  :root{ --fab-spodok:calc(14px + env(safe-area-inset-bottom, 0px)); --fab-btn:48px; --fab-okraj:14px; }
}
#chat[hidden]{display:none}

/* ---------- plávajúce tlačidlo ---------- */
/* chat je jediné plávajúce tlačidlo */
.chat-btn{position:fixed;right:var(--fab-okraj);bottom:var(--fab-chat);z-index:75;
  width:var(--fab-btn);height:var(--fab-btn);
  border-radius:50%;border:3px solid rgba(255,255,255,.9);box-sizing:border-box;color:#fff;
  background:linear-gradient(150deg,#EF3B33,var(--red) 45%,#C4191C);
  cursor:pointer;display:grid;place-items:center;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.35),
             0 16px 26px -12px rgba(140,26,26,.85), 0 3px 6px -3px rgba(140,26,26,.6);
  transition:transform .18s}
.chat-btn:hover{transform:scale(1.08)}
.chat-btn svg{width:26px;height:26px;grid-area:1/1;transition:opacity .16s,transform .16s}
.chat-btn .ic-close{opacity:0;transform:rotate(-45deg)}
#chat.open .chat-btn .ic-open{opacity:0;transform:rotate(45deg)}
#chat.open .chat-btn .ic-close{opacity:1;transform:none}
@keyframes chatPing{0%{box-shadow:0 0 0 0 rgba(225,33,31,.55)}70%{box-shadow:0 0 0 14px rgba(225,33,31,0)}100%{box-shadow:0 0 0 0 rgba(225,33,31,0)}}
.chat-btn.ping{animation:chatPing 1.8s ease-out 3}
.chat-badge{position:absolute;top:-4px;right:-4px;min-width:20px;height:20px;padding:0 5px;
  border-radius:10px;background:var(--ok);border:2.5px solid #fff;color:#fff;font-size:.7rem;
  font-weight:700;line-height:16px;text-align:center}
.chat-badge[hidden]{display:none}

/* ---------- okno ---------- */
/* okno vyrastá tesne nad chatovým tlačidlom, aby ho neprekrylo */
.chat-box{position:fixed;right:var(--fab-okraj);
  bottom:calc(var(--fab-chat) + var(--fab-btn) + 8px);z-index:76;width:352px;
  max-height:min(76vh,580px);background:var(--panel);border-radius:20px;
  box-shadow:0 40px 80px -24px rgba(46,36,29,.6), 0 3px 8px -4px rgba(46,36,29,.45);
  display:flex;flex-direction:column;overflow:hidden;
  border:1px solid rgba(255,255,255,.7);animation:boxIn .22s ease-out}
@keyframes boxIn{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
.chat-box[hidden]{display:none}

/* Hlavička je jediná sýta plocha okna – prechod a svetlá hrana jej dajú výšku,
   rovnako ako pruhu s výzvou na úvodnej stránke. */
.chat-head{background:linear-gradient(158deg,#EF3B33 0%,var(--red) 45%,#C4191C 100%);
  color:#fff;padding:13px 14px;display:flex;align-items:center;gap:11px;position:relative;
  box-shadow:inset 0 -1px 0 rgba(0,0,0,.14), 0 6px 14px -10px rgba(140,26,26,.9)}
.chat-ava{width:38px;height:38px;border-radius:50%;background:rgba(255,255,255,.18);display:grid;
  place-items:center;flex-shrink:0;font-family:var(--head);font-weight:600;font-size:1rem;
  letter-spacing:.02em;overflow:hidden}
.chat-ava svg{width:24px;height:24px;color:#fff}
/* Predvolený avatar je hlava maskota. Logo tam bolo predtým a pôsobilo ako
   firemný podpis; tvár je osobnejšia a zákazník má pocit, že píše niekomu,
   nie niečomu. Keď sa ozve konkrétny človek, chat.js triedu `logo` odoberie
   a nahradí ju jeho fotkou alebo iniciálou.
   Hlava stojí bez kruhu a bez tieňa, priamo na červenej hlavičke. `drop-shadow`
   tu nefunguje: prvok je `<span>` s obrázkom na pozadí, takže sa tieň
   nevykreslí podľa obrysu hlavy, ale podľa rámu prvku – vyšiel z toho tmavý
   štvorec. Hlava má vlastný obrys dosť výrazný na to, aby sa na červenej
   nestratila aj bez neho.
   Číslo v názve súboru je nutné: /img/* má v _headers mesačnú cache, takže
   pri zachovanom mene by vráteným návštevníkom bežal starý avatar až mesiac.

   Trieda sa volá `maskot`, nie `logo`. Pod pôvodným menom ju chytalo
   `body .logo` zo `styl.css`, čo je štýl loga v hlavičke webu. Pozadie aj
   tieň sa prebili, ale `backdrop-filter` nie – a ten spracuje pozadie
   v obdĺžniku prvku, takže za hlavou svietil červený štvorec. Odtiaľ šiel
   aj padding, ktorý hlavu posúval z osi. */
.chat-ava.maskot{
  width:56px;height:56px;border-radius:0;overflow:visible;
  /* Ten istý pes ako v bubline, ktorá sa sama ozve (nastroje/MASKOT.md). */
  background:url(/img/maskot-rozprava-1.webp) center/contain no-repeat;
  border:0;box-shadow:none;filter:none;
}
.chat-ava.maskot svg{display:none}
.chat-head .hd{flex:1;min-width:0}
/* Nadpis musí zostať na jednom riadku – „Napíšte nám, sme tu pre vás" by sa
   inak zalomil a stav „sme online" by odskočil mimo hlavičku. */
.chat-head strong{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.03em;
  font-size:.92rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.25}
.chat-head small{display:flex;align-items:center;gap:5px;font-size:.74rem;
  color:rgba(255,255,255,.85);margin-top:2px}
.chat-head small i{width:7px;height:7px;border-radius:50%;background:#7fe08f;flex-shrink:0}
.chat-head small.off i{background:#ffd27a}
.chat-hbtn{background:none;border:0;color:#fff;cursor:pointer;padding:4px;border-radius:8px;
  display:grid;place-items:center;opacity:.9}
.chat-hbtn:hover{opacity:1;background:rgba(255,255,255,.16)}
.chat-hbtn svg{width:19px;height:19px}
.chat-x{background:none;border:0;color:#fff;font-size:1.6rem;line-height:1;cursor:pointer;padding:0 2px}
/* šípka späť patrí len do celoobrazovkového režimu na mobile (pozri koniec súboru) */
.chat-back{display:none;background:none;border:0;color:#fff;cursor:pointer;padding:6px;
  margin-left:-6px;border-radius:10px}
.chat-back svg{width:22px;height:22px;display:block}
.chat-back:active{background:rgba(255,255,255,.18)}

/* ---------- telo ---------- */
.chat-body{flex:1;overflow-y:auto;padding:14px 16px;background:var(--bg);
  display:flex;flex-direction:column;gap:7px;overscroll-behavior:contain}
.chat-den{align-self:center;font-size:.68rem;color:var(--ink-soft);background:rgba(0,0,0,.05);
  padding:2px 9px;border-radius:9px;margin:4px 0}

/* Riadok správy = avatar + bublina, aby bolo vidieť kto píše.
   Avatar je zarovnaný k spodku – v skupine správ sa ukazuje pri tej poslednej. */
.msg-riadok{display:flex;gap:8px;align-items:flex-end;max-width:88%;animation:msgIn .2s ease-out}
@keyframes msgIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.msg-riadok.host{align-self:flex-end;flex-direction:row-reverse}
.msg-riadok.obsluha{align-self:flex-start}
.msg-ava{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  color:#fff;font-size:.68rem;font-weight:700;font-family:var(--head);letter-spacing:.02em;
  margin-bottom:2px}
.msg-ava.prazdny{background:none}

.msg{padding:9px 13px;border-radius:14px;font-size:.89rem;line-height:1.5;
  white-space:pre-wrap;word-break:break-word;min-width:0}
.msg a{color:inherit;text-decoration:underline}
.msg.host{background:var(--red);color:#fff;border-bottom-right-radius:5px}
/* Bublina so správou zostáva plná – text sa má čítať, nie presvitať. Hĺbku
   jej dáva len tieň. */
/* Bublina zostáva plná – text sa má čítať, nie presvitať – ale nie je čisto
   biela. Voči teplej ploche pod ňou stačí byť svetlejšia, nie žiarivá. */
.msg.obsluha{background:#FFFCF7;border:1.5px solid var(--line);border-bottom-left-radius:5px;
  box-shadow:var(--tien-jemny)}
/* `konec` = posledná bublina skupiny. Na mobile z nej robíme plne zaoblenú
   bublinu, tu v plávajúcom okne zostáva vzhľad taký, aký bol. */
.msg.system{align-self:center;background:none;border:0;color:var(--ink-soft);font-size:.76rem;
  text-align:center;max-width:100%;padding:2px 0}
.msg-cas{font-size:.68rem;opacity:.62;margin-top:3px;display:block}
.msg-autor{font-size:.68rem;font-weight:700;display:block;margin-bottom:2px;letter-spacing:.01em}
.chat-stav{align-self:flex-end;font-size:.67rem;color:var(--ink-soft);margin:-3px 2px 0}
.chat-stav[hidden]{display:none}

.chat-tip{align-self:flex-start;background:#FFFCF7;border:1.5px solid var(--line);border-radius:14px;
  box-shadow:var(--tien-jemny);
  border-bottom-left-radius:5px;padding:11px 14px;display:flex;gap:4px;margin-left:34px}
.chat-tip[hidden]{display:none}
.chat-tip span{width:6px;height:6px;border-radius:50%;background:var(--ink-soft);
  animation:tip 1.2s infinite ease-in-out}
.chat-tip span:nth-child(2){animation-delay:.18s}
.chat-tip span:nth-child(3){animation-delay:.36s}
@keyframes tip{0%,60%,100%{opacity:.3;transform:translateY(0)}30%{opacity:1;transform:translateY(-3px)}}

.chat-chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.chat-chips[hidden]{display:none}
.chat-chips > button{background:var(--sklo);border:1px solid var(--sklo-ram);
  -webkit-backdrop-filter:var(--sklo-blur);backdrop-filter:var(--sklo-blur);
  box-shadow:var(--tien-jemny);border-radius:16px;padding:6px 11px;
  font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}

/* ---------- hodnotenie spokojnosti ---------- */
/* karta na konci konverzácie: hviezdičky + nepovinný komentár */
.chat-rate{align-self:center;text-align:center;margin:10px 0 2px;max-width:290px;width:100%;
  background:#FFFCF7;border:1.5px solid var(--line);border-radius:var(--r-lg);padding:12px 14px 13px;
  box-shadow:var(--tien-jemny)}
.chat-rate[hidden]{display:none}
.chat-rate p{font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;
  font-size:.8rem;color:var(--ink);margin:0 0 6px}
.chat-hviezdy{display:flex;justify-content:center;gap:2px}
.chat-hviezdy button{background:none;border:0;font-size:1.5rem;cursor:pointer;line-height:1;
  padding:2px 3px;color:var(--line);transition:color .15s,transform .12s}
.chat-hviezdy button.on{color:var(--red)}
.chat-hviezdy button:hover{transform:scale(1.12)}
.chat-hviezdy button:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}
.chat-rate textarea{display:block;width:100%;box-sizing:border-box;margin:9px 0 8px;resize:none;
  padding:8px 10px;border:1.5px solid var(--line);border-radius:10px;font:inherit;font-size:.83rem;
  line-height:1.45;color:var(--ink)}
.chat-rate textarea:focus{outline:0;border-color:var(--red)}
.chat-rate-send{width:100%;border:0;border-radius:10px;background:var(--cta);color:#fff;
  box-shadow:var(--cta-lesk), var(--cta-tien);
  font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;font-size:.82rem;
  padding:9px 12px;cursor:pointer}
.chat-rate-send:hover{background:var(--cta);filter:brightness(1.06);
  box-shadow:var(--cta-lesk-h), var(--cta-tien-hover)}
.chat-rate-send:disabled{opacity:.4;cursor:default}
.chat-rate.hotovo{border-style:dashed}
.chat-rate.hotovo p{margin:0;color:var(--red)}
.chat-rate-zavri{display:block;margin:9px auto 0;background:none;border:0;padding:2px 6px;cursor:pointer;
  font:inherit;font-size:.78rem;color:var(--ink-soft);text-decoration:underline;text-underline-offset:2px}
.chat-rate-zavri:hover{color:var(--red)}
.chat-rate-zavri:focus-visible{outline:2px solid var(--red);outline-offset:2px;border-radius:6px}

/* ---------- ukončenie rozhovoru: vrstva vnútri okna chatu ----------
   Nepriehľadné pozadie (okno nad dátami), hlavné tlačidlo je .chat-rate-send. */
.chat-ukonc{position:absolute;inset:0;z-index:30;display:flex;align-items:center;justify-content:center;
  box-sizing:border-box;padding:20px;padding-top:calc(20px + env(safe-area-inset-top, 0px));
  background:var(--panel);border-radius:inherit}
.chat-ukonc[hidden]{display:none}
.chat-ukonc .uk-karta{width:100%;max-width:290px;text-align:center}
.chat-ukonc .uk-n{font-family:var(--head);text-transform:uppercase;letter-spacing:.07em;font-size:1.05rem;
  color:var(--ink);margin:0 0 8px}
.chat-ukonc .uk-t{margin:0 0 16px;font-size:.88rem;line-height:1.5;color:var(--ink-2)}
.chat-ukonc .uk-spat{display:block;width:100%;margin-top:8px;border:1.5px solid var(--line);border-radius:10px;
  background:var(--v-okne);color:var(--ink);font-family:var(--head);text-transform:uppercase;letter-spacing:.08em;
  font-size:.82rem;padding:9px 12px;cursor:pointer;transition:border-color .15s,color .15s}
.chat-ukonc .uk-spat:hover{border-color:var(--red);color:var(--red)}
.chat-ukonc .uk-spat:focus-visible,
.chat-ukonc .chat-rate-send:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* hidden prebíja display:grid z pravidiel tlačidiel hlavičky */
.chat-head .chat-hbtn.chat-end[hidden]{display:none}

/* ---------- formulár ---------- */
/* Spodná lišta s písaním bola biely pás cez celú šírku okna a bola to
   najväčšia biela plocha v chate. Berie prechod ako zvyšok okna. */
.chat-form{padding:11px 14px 10px;border-top:1px solid var(--line);
  background:linear-gradient(180deg,#FDFAF6,#F6EFE6)}
.chat-kto{display:grid;grid-template-columns:1fr 1fr;gap:7px;margin-bottom:8px}
.chat-kto input{padding:8px 10px;border:1.5px solid var(--line);border-radius:8px;font:inherit;
  font-size:.83rem;min-width:0}
.chat-kto input:focus{outline:0;border-color:var(--red)}
.chat-kto[hidden]{display:none}
.chat-riadok{display:flex;gap:8px;align-items:flex-end}
/* Rámček nesie obal `.chat-pole`, nie samotná textarea – len tak môže emoji
   tlačidlo sedieť vnútri poľa. Poradie riadi `order`, nie HTML: tlačidlo je
   v značkovaní pred textareou (kvôli poradiu pri čítačkách), ale zobrazuje sa
   vpravo pri odosielacom tlačidle. */
.chat-pole{flex:1;min-width:0;display:flex;align-items:flex-end;
  border:1.5px solid var(--line);border-radius:10px;background:#FFFDFB}
.chat-pole:focus-within{border-color:var(--red)}
.chat-riadok textarea{order:1;flex:1;min-width:0;padding:10px 4px 10px 10px;border:0;background:none;
  font:inherit;font-size:.9rem;resize:none;min-height:92px;max-height:190px;line-height:1.45}
.chat-riadok textarea:focus{outline:0}
/* Sponka je vedľa emoji, vnútri poľa. `order` drží poradie ikona–text–ikona
   bez ohľadu na to, v akom poradí sú prvky v HTML. */
.chat-klip{order:0;width:34px;height:42px;flex-shrink:0;border:0;background:none;cursor:pointer;
  color:var(--ink-soft);opacity:.72;display:grid;place-items:center;padding:0}
.chat-klip svg{width:19px;height:19px}

/* Náhľad vybranej prílohy nad poľom */
.chat-priloha{display:flex;align-items:center;gap:9px;margin:0 0 7px;padding:6px 8px;
  border:1.5px solid var(--line);border-radius:12px;background:var(--bg)}
.chat-priloha[hidden]{display:none}
.chat-priloha img{width:38px;height:38px;object-fit:cover;border-radius:8px;flex-shrink:0}
.chat-priloha .pr-ikona{font-size:1.2rem;width:38px;text-align:center;flex-shrink:0}
.chat-priloha .pr-nazov{flex:1;min-width:0;font-size:.8rem;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap}
.chat-priloha .pr-zrus{border:0;background:none;cursor:pointer;font-size:1.25rem;line-height:1;
  color:var(--ink-soft);padding:0 4px}
.chat-priloha .pr-zrus:hover{color:var(--red)}

/* Príloha v bubline. Fotku zobrazíme rovno, ostatné ako odkaz s menom. */

.chat-emo{order:2;width:34px;height:42px;flex-shrink:0;border:0;background:none;cursor:pointer;font-size:1.15rem;
  opacity:.65;transition:opacity .15s;align-self:flex-end}
.chat-emo:hover{opacity:1}
.chat-riadok button[type=submit]{width:42px;height:42px;flex-shrink:0;border:0;border-radius:10px;
  background:var(--cta);color:#fff;cursor:pointer;display:grid;place-items:center;
  box-shadow:var(--cta-lesk), var(--cta-tien)}
/* Koliesko aj na veľkej obrazovke — je to ten istý prvok ako na telefóne
   a nemá dôvod mať inde iný tvar. */
.chat-riadok button[type=submit]{border-radius:50%}
.chat-riadok button[type=submit]:hover{background:var(--cta);filter:brightness(1.06);
  box-shadow:var(--cta-lesk-h), var(--cta-tien-hover)}
.chat-riadok button svg{width:20px;height:20px}
.chat-riadok button:disabled{opacity:.45;cursor:default}

.chat-gdpr{font-size:.68rem;color:var(--ink-soft);margin:8px 0 0;line-height:1.45}
.chat-gdpr a{color:var(--red)}
.chat-alt{font-size:.72rem;color:var(--ink-soft);margin:6px 0 0;text-align:center}
.chat-alt a{color:var(--red);font-weight:600}

@media(max-width:940px){
  /* polohu aj veľkosť tlačidla už riešia premenné hore, tu ostáva len obsah */
  .chat-btn svg{width:23px;height:23px}
  .chat-box{right:10px;left:10px;width:auto;max-height:72vh}
}

/* ============================================================
   MOBIL POD 700 px – chat na celú obrazovku
   Cieľ je to, čo ľudia poznajú z Messengeru a iMessage: pevná hlavička so
   šípkou späť, rolujúce správy uprostred, pevné pole na písanie dole.
   Hranica 700 px je aj v chat.js (premenná MOBIL) – meniť treba obe.
   ============================================================ */

/* Trieda na <body> žije mimo media query, lebo ju nasadzuje až JS a len vtedy,
   keď je chat naozaj cez celú obrazovku.

   `position:fixed` (nie iba `overflow:hidden`) – Safari na iOS roluje stránku
   aj cez `overflow:hidden` na <body>. Posun stránky si chat.js zapamätá do
   `top` a po zatvorení ho vráti, aby zákazník neskončil hore na začiatku.

   Zároveň schováme všetko, čo by chatu na celej obrazovke prekážalo:
   plávajúce tlačidlá (chat, košík) aj cookie lištu – tá má z-index 9999
   a inak by chatu sedela na polovici obrazovky. */
body.chat-cely{position:fixed;left:0;right:0;width:100%;overflow:hidden;overscroll-behavior:none}
body.chat-cely .chat-btn,
body.chat-cely .cookiebar{display:none!important}

@media(max-width:700px){
  /* 100dvh (nie 100vh) – pri vysunutej klávesnici sa okno zmenší spolu s ňou
     a pole na písanie zostane nad klávesnicou, namiesto toho, aby ušlo pod ňu.
     Longhandy top/right/bottom/left namiesto `inset` – prebijú `left`/`right`
     z bloku pre 940 px aj v prehliadačoch, ktoré `inset` ešte nepoznajú. */
  .chat-box{position:fixed;top:0;right:0;bottom:0;left:0;width:100%;
    height:100vh;height:100dvh;max-height:none;
    border:0;border-radius:0;box-shadow:none;z-index:120;animation:celyIn .2s ease-out}
  @keyframes celyIn{from{opacity:.5;transform:translateY(16px)}to{opacity:1;transform:none}}

  /* ---------- hlavička: ‹ | avatar predajne | Hafo + stav | ⋮ ---------- */
  .chat-head{flex-shrink:0;gap:9px;padding:9px 10px;
    padding-top:calc(9px + env(safe-area-inset-top, 0px))}
  .chat-back{display:grid;place-items:center}
  .chat-x{display:none}                       /* späť nahrádza krížik */
  .chat-ava{width:36px;height:36px;font-size:.95rem}
  .chat-head strong{font-size:1rem;letter-spacing:.06em}
  .chat-head small{font-size:.72rem;margin-top:1px}

  /* ---------- správy – jediná rolujúca časť okna ---------- */
  /* Medzera medzi bublinami je len 2 px; väčší odstup dostane až prvá správa
     novej skupiny cez margin-top. Tým vznikne to typické „zlepenie" správ
     toho istého odosielateľa. */
  .chat-body{padding:10px 10px 8px;gap:2px;-webkit-overflow-scrolling:touch}
  .msg-riadok{max-width:82%}
  .msg-riadok:not(.pokracovanie){margin-top:11px}
  .chat-den{font-size:.66rem;margin:12px 0 2px;padding:3px 10px}

  .msg{padding:10px 14px;border-radius:20px;font-size:.97rem;line-height:1.42}
  /* Zaoblenie podľa miesta v skupine: prvá má plné horné rohy, posledná plné
     dolné, vnútorné rohy sú zrezané na 6 px. `konec` nasadzuje chat.js. */
  .msg-autor{font-size:.7rem}
  .msg-cas{font-size:.68rem;margin-top:2px}
  .chat-stav{font-size:.66rem;margin:1px 4px 0}
  .msg.system{font-size:.79rem;padding:6px 12px;margin:6px 0;max-width:88%;
    background:rgba(0,0,0,.045);border-radius:12px;color:var(--ink-soft)}
  .chat-uvod p{font-size:.92rem}
  .chat-chips > button{font-size:.85rem;padding:8px 13px}

  /* „píše…" – tri bodky v bubline vľavo, zarovnané pod avatarom obsluhy */
  .chat-tip{border-radius:20px;border-bottom-left-radius:6px;margin-left:34px;padding:13px 16px}
  .chat-tip span{width:7px;height:7px}

  /* ---------- pole na písanie – pevne dole, nad domovskou lištou iPhonu ---------- */
  .chat-form{flex-shrink:0;padding:7px 9px;border-top:1px solid var(--line);
    padding-bottom:calc(7px + env(safe-area-inset-bottom, 0px))}
  /* Na telefóne je poradie iné než na počítači: najprv veľké pole na písanie,
     pod ním meno a kontakt a úplne dole vpravo šípka na odoslanie – všetko
     v dosahu palca. Na počítači ostáva pôvodné poradie (meno hore). */
  .chat-form{display:flex;flex-direction:column}
  .chat-riadok{order:1;gap:7px;align-items:flex-end;flex-wrap:wrap}
  .chat-kto{order:2;margin:8px 0 0}
  .chat-alt{order:4}
  .chat-gdpr{order:5}
  .chat-riadok .chat-pole{flex:1 1 100%}
  .chat-riadok button[type=submit]{margin-left:auto}
  /* Okrúhle pole, ktoré rastie do výšky. Výšku dopočítava rast() v chat.js –
     preto tu stačí min/max a zaoblenie. */
  .chat-pole{border-radius:22px;background:var(--bg);border-color:transparent}
  .chat-pole:focus-within{border-color:var(--red);background:#fff}
  /* 16 px je najmenšia veľkosť, pri ktorej Safari pri klikaní do poľa nezoomuje */
  .chat-kto input,.chat-riadok textarea{font-size:16px}
  .chat-riadok textarea{min-height:42px;max-height:120px;padding:10px 14px 10px 2px;line-height:1.35}
  .chat-emo{width:38px;height:42px;font-size:1.25rem;opacity:.75}
  .chat-klip{width:38px;height:42px}
  .chat-klip svg{width:20px;height:20px}
  .chat-riadok button[type=submit]{width:42px;height:42px;border-radius:50%}
  .chat-riadok button svg{width:19px;height:19px;margin-left:-1px}
  .chat-kto{gap:6px;margin-bottom:6px}
  .chat-hviezdy button{font-size:1.8rem;padding:4px 5px}
  .chat-rate{max-width:100%}

  /* Poznámka o údajoch a náhradné kontakty patria k prvému kontaktu.
     Keď už konverzácia beží, len by ukrajovali z obrazovky – lišta na
     písanie má byť taká nízka ako v Messengeri. */
  #chat.ma-spravy .chat-gdpr,
  #chat.ma-spravy .chat-alt{display:none}
  .chat-alt{font-size:.75rem;margin-top:7px}
  .chat-gdpr{font-size:.65rem;margin-top:6px}
}

@media (prefers-reduced-motion:reduce){
  .chat-box,.msg-riadok{animation:none}
  .chat-btn{transition:none}
}

/* fotka obsluhy namiesto iniciály */
.msg-ava.foto,.chat-ava.foto{background-size:cover;background-position:center;color:transparent;
  background-repeat:no-repeat}

/* ==========================================================================
   Stav predajne a kontakt v chate
   --------------------------------------------------------------------------
   Podľa návrhu sedí nad písacím poľom: pás „Otvorené do 18:00 · Štúrova 34"
   a pod ním Zavolať / Navigovať / Hodiny.

   Na telefóne je to jediné miesto, kde sa zákazník k telefónu a k mape
   dostane — v katalógu sa telefón z hlavičky aj menu zrušili. Na veľkej
   obrazovke je oboje po ruke, tak je pás skrytý.
   ========================================================================== */
.chat-kontakt{display:none}

@media(max-width:700px){
  /* Viazané na `ma-mlistu`: pás dopĺňa to, čo katalóg so spodnou lištou
     stratil (telefón v hlavičke, menu). Na úvodnej stránke trieda nevzniká. */
  body.ma-mlistu .chat-kontakt{display:block;flex:0 0 auto;border-top:1px solid var(--line)}

  .chat-predajna{
    display:flex;align-items:center;gap:7px;margin:0;
    padding:7px 12px;font-size:.72rem;font-weight:600;
    color:var(--ok);background:var(--ok-plocha)}
  .chat-predajna.zavrete{color:var(--pozor-text);background:var(--pozor-plocha)}
  .chat-predajna i{width:7px;height:7px;border-radius:999px;
    background:currentColor;flex:0 0 auto}

  .chat-kontakt-tl{display:flex;gap:6px;padding:8px 10px;background:var(--panel)}
  .chat-kt{
    all:unset;box-sizing:border-box;flex:1;cursor:pointer;
    display:flex;flex-direction:column;align-items:center;gap:3px;
    min-height:52px;padding:8px 2px;border-radius:var(--r);
    background:var(--bg-soft);color:var(--ink-2);text-align:center;
    font-family:var(--text);font-size:.66rem;font-weight:600}
  .chat-kt svg{width:18px;height:18px;flex:0 0 auto}
  .chat-kt:active{background:var(--red-soft);color:var(--red-dk)}

  .chat-hodiny{
    list-style:none;margin:0;padding:4px 12px 10px;background:var(--panel)}
  .chat-hodiny[hidden]{display:none}
  .chat-hodiny li{
    display:flex;justify-content:space-between;gap:10px;
    padding:4px 0;font-size:.72rem;color:var(--ink-2)}
  .chat-hodiny li.dnes{color:var(--ink);font-weight:600}
  .chat-hodiny li b{font-variant-numeric:tabular-nums;font-weight:600}
}

/* Celoobrazovkový chat na telefóne podľa návrhu: bez koliesok s maskotom.
   V plávajúcom okne na veľkej obrazovke ostávajú — tam je okno úzke a avatar
   pomáha rozlíšiť, kto píše. Na celej ploche to robí zarovnanie a farba
   bubliny, takže koliesko len ujedá šírku textu. */
@media(max-width:700px){
  body.ma-mlistu .msg-ava{display:none}
  body.ma-mlistu .msg-riadok{max-width:82%;gap:0}
}

/* ==========================================================================
   Panel „Informácie" a chat na telefóne podľa návrhu
   ========================================================================== */
.chat-info{background:var(--panel);padding:4px 12px 12px}
.chat-info[hidden]{display:none}
.chat-info-nad{
  font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.62rem;color:var(--ink-soft);margin:10px 0 6px}
.chat-info .chat-hodiny{list-style:none;margin:0;padding:0}

.chat-info-kanaly{display:flex;gap:7px}
.chat-info-kanaly a{
  flex:1;display:flex;align-items:center;justify-content:center;
  min-height:42px;padding:8px;border-radius:var(--r);
  background:var(--bg-soft);color:var(--ink-2);text-decoration:none;
  font-size:.76rem;font-weight:600}
.chat-info-kanaly a:hover{background:var(--red-soft);color:var(--red-dk)}

/* Kde je moja rezervácia – tlačidlo ako kanály, pod ním spoločný formulár. */
.chat-info-najdi > button{
  all:unset;box-sizing:border-box;display:flex;align-items:center;justify-content:center;width:100%;
  min-height:42px;padding:8px;border-radius:var(--r);cursor:pointer;
  background:var(--bg-soft);color:var(--ink-2);font-size:.76rem;font-weight:600}
.chat-info-najdi > button:hover{background:var(--red-soft);color:var(--red-dk)}
.chat-info-najdi > button:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}
.chat-chips .najdi-form{flex-basis:100%;margin-top:4px}
.chat-info-ucet{
  margin-top:12px;padding:12px 13px;border-radius:var(--r);
  background:var(--red-soft);border:1px solid var(--red-soft-2)}
.chat-info-ucet[hidden]{display:none}
.chat-info-ucet b{display:block;font-family:var(--head);text-transform:uppercase;
  letter-spacing:.04em;font-size:.78rem;color:var(--red-dk);margin-bottom:3px}
.chat-info-ucet span{display:block;font-size:.74rem;color:var(--ink-2);line-height:1.45}
/* Tlačidlo v našom jazyku, nie systémové. */
.chat-info-btn{
  all:unset;box-sizing:border-box;display:block;width:100%;margin-top:10px;
  padding:11px 14px;border-radius:var(--r);cursor:pointer;text-align:center;
  background:var(--cta);color:var(--na-cervenom);box-shadow:var(--cta-lesk), var(--cta-tien);
  font-family:var(--head);text-transform:uppercase;letter-spacing:.05em;font-size:.78rem}
.chat-info-btn:focus-visible{outline:2.5px solid var(--red);outline-offset:2px}

@media(max-width:700px){
  /* Vrchný pás „Napíšte nám" na telefóne nie je — celá plocha je konverzácia.
     Ostáva z neho len plávajúce koliesko s možnosťami (zvuk, ukončiť) vpravo
     hore, tak ako to navrhol majiteľ. Zavrieť sa dá tabom Kontakt. */
  body.ma-mlistu .chat-head{
    position:absolute;top:0;right:0;left:auto;width:auto;
    background:none;border:0;padding:8px;z-index:6;gap:0}
  body.ma-mlistu .chat-head .chat-back,
  body.ma-mlistu .chat-head .chat-ava,
  body.ma-mlistu .chat-head .hd{display:none}
  body.ma-mlistu .chat-head .chat-hbtn{
    width:38px;height:38px;border-radius:999px;
    background:var(--v-okne);box-shadow:var(--tien-jemny);color:var(--ink-2)}
  body.ma-mlistu .chat-head .chat-end{margin-left:8px}

  /* Meno a kontakt sa pýtame až vtedy, keď zákazník naozaj píše. Dovtedy
     zaberali dva riadky nad poľom a pýtali údaje skôr, než bolo za čo. */
  body.ma-mlistu .chat-kto{display:none}
  /* Odkryje sa až po prvej odoslanej správe, a len keď kontakt nepoznáme.
     Dva prázdne vstupy nad poľom pýtali údaje skôr, než bolo za čo, a ujedali
     tretinu konverzácie. */

  /* Písacie pole ako v návrhu: jedna pilulka a vedľa nej koliesko. */
  body.ma-mlistu .chat-riadok{gap:7px;padding:8px 10px}
  body.ma-mlistu .chat-pole{border-radius:999px;padding:2px 6px 2px 12px}
  body.ma-mlistu .chat-pole textarea{font-size:16px}
  body.ma-mlistu .chat-emo,
  body.ma-mlistu .chat-klip{width:32px;height:32px}
}

/* ---------- písacie pole na telefóne ----------
   Smajlík je preč: klávesnica na telefóne má vlastný a náš mu len ujedal
   miesto z poľa. Príloha ostáva — tú klávesnica nenahradí.

   Pole má viditeľný rám. V návrhu bolo len o odtieň svetlejšie než okolie
   a na displeji sa strácalo, takže nebolo jasné, kam sa vlastne píše.

   Tieto pravidlá NIE SÚ viazané na `body.ma-mlistu`, hoci väčšina mobilných
   je. Mobilná lišta patrí k navigácii katalógu; vzhľad písacieho
   riadka je vec chatu a chat je na oboch stránkach rovnaký. Zalomenie, ktoré
   sa tu opravuje (`.chat-riadok .chat-pole{flex:1 1 100%}` vyššie), navyše
   na `ma-mlistu` viazané nie je a platilo aj na úvodnej stránke. */
@media(max-width:700px){
  .chat-emo{display:none}
  .chat-pole{border:1.5px solid var(--line-2);background:var(--v-okne)}
  .chat-pole:focus-within{border-color:var(--red)}

  /* Pole a šípka na jednom riadku. `flex:1 1 100%` vyššie tlačilo šípku pod
     pole – ostal po nej prázdny riadok a nesedela s poľom v ničom.

     Výška šípky sa musí rovnať výške poľa, inak sedia len spodkom a navrchu
     je medzera — presne to bolo vidieť. Odmerané v prehliadači: v katalógu
     má pole 48 px (42 px textarea + 2 + 2 px odsadenie pilulky + 1,5 + 1,5 px
     rám), na úvodnej stránke bez toho odsadenia 44 px. Preto premenná a nie
     jedno číslo: keď sa lišta vypne, sedí to ďalej.

     */
  .chat-riadok{--sipka:44px;flex-wrap:nowrap;align-items:flex-end}
  body.ma-mlistu .chat-riadok{--sipka:48px}
  .chat-riadok .chat-pole{flex:1 1 auto}
  .chat-riadok button[type=submit]{
    width:var(--sipka);height:var(--sipka);margin-left:0}
}

/* Poznámka o údajoch je jeden riadok a celá odkazom – povinná informácia
   nemá byť odsek, ktorý nikto nečíta, ale ani ju nesmieme zamlčať. */
.chat-gdpr{font-size:.66rem;margin-top:7px;text-align:center}
.chat-gdpr a{color:var(--ink-soft);text-decoration:underline;
  text-underline-offset:2px}

/* ---------- tichý riadok pod poľom (veľká obrazovka) ----------
   Kanály a ponuka účtu patria POD písacie pole, nie nad. Nad poľom
   súperili s naším chatom o to isté ťuknutie a v úzkom okne zabrali
   všetko miesto. Na telefóne ich nesie pás kontaktu, tak sú tam preč. */
.chat-alt{font-size:.72rem;color:var(--ink-soft);margin:6px 0 0;
  text-align:center;line-height:1.5}
.chat-alt a{color:var(--ink-2);text-decoration:underline;
  text-underline-offset:2px}
.chat-alt a:hover{color:var(--red)}

/* Písacie pole je jeden rastúci riadok aj na počítači — rovnako ako na
   telefóne. Deväťdesiatdva pixelov prázdneho poľa je výzva napísať esej;
   chat je na krátke otázky a výšku si dorastie sám (`rast()` v chat.js). */
.chat-riadok textarea{min-height:42px}

/* Na telefóne kanály nesie pás kontaktu nad písacím poľom — riadok pod ním
   by bol to isté druhýkrát a ukrajoval by z obrazovky, ktorá patrí písaniu. */
@media(max-width:700px){
  .chat-alt{display:none}
}

/* ---------- „Informácie" sa rozbaľujú nahor ----------
   Panel stál v značkovaní za tlačidlami, takže po otvorení rástol pod nimi
   a celý rad tlačidiel vytlačil nahor — tlačidlo uskočilo spod prsta ešte
   v tom istom ťuknutí. Poradie preto riadi `order`, nie značkovanie: stav
   predajne, pod ním panel a až naspodku tlačidlá. Tlačidlá tak zostanú
   sedieť tesne nad písacím poľom a panel sa rozvinie nad nimi. */
@media(max-width:700px){
  body.ma-mlistu .chat-kontakt{display:flex;flex-direction:column}
  body.ma-mlistu .chat-predajna{order:1}
  body.ma-mlistu .chat-info{order:2}
  body.ma-mlistu .chat-kontakt-tl{order:3}
}

/* Plocha so správami má tú istú farbu ako okno chatu, aby bol z celej
   obrazovky jeden kus. Mala vlastnú, o odtieň svetlejšiu, a medzi ňou
   a okolím bol viditeľný šev. Je `transparent`, nie druhá rovnaká hodnota:
   druhá hodnota by sa raz rozišla. */
@media(max-width:700px){
  body.ma-mlistu #chatBody{background:transparent}
}

/* ==========================================================================
   VZHĽAD CHATU — návrh 5 (30. 9. 2026)
   https://claude.ai/artifact/LzmcTWpj7Dj7LrSoGRRzPk (zdroj chat-v5.html)

   Tento blok prebíja základné pravidlá vyššie (od 5. 10. 2026 bez vypínača,
   preto stojí za nimi a pri rovnakej špecifickosti vyhráva poradie). Hodnoty
   sú z návrhu (.okno, .nad, .stik, .r, .men,
   .av-h, .dock, .kont, .gdpr, .chips, .ref, .kartap, .mstav); návrh používa
   `--m-*` premenné, tu sú ich projektové zodpovedajúce:
     --m-ink/ink2/soft = --ink/--ink-2/--ink-soft, --m-line = --line (v #chat),
     --m-red-soft = --red-soft, --m-ok = --ok, --m-panel = --panel,
     --m-tien = --tien-jemny, --m-sklo = rgba(255,255,255,.72).
   Dva prvky nie sú v `@media`: správy a rýchle otázky (spoločné), potom
   počítačové okno (nad 700 px, bez spodnej lišty) a karta Kontakt na
   telefóne (`body.ma-mlistu`). Index na telefóne (celá obrazovka s červenou
   hlavičkou bez spodnej lišty) ostáva pri starej hlavičke, menia sa len správy.
   ========================================================================== */

/* ---------- zatvorený stav: okrúhle tlačidlo s bodkou stavu ---------- */
.chat-bod{position:absolute;top:-4px;right:-4px;width:15px;height:15px;border-radius:50%;
  background:var(--ok);border:2.5px solid #fff;box-sizing:border-box}
.chat-bod.of{background:var(--ink-soft)}
.chat-badge:not([hidden]) + .chat-bod{display:none}
#chat.open .chat-bod{display:none}

/* ---------- správy ---------- */
.chat-body{background:none;padding:6px 14px 8px;gap:10px}
/* Rozhovor sa tlačí k spodku (ako v návrhu), ale bez `justify-content:flex-end`:
   to pri pretečení odrezalo začiatok a nedalo sa doň rolovať. Pseudoprvok s
   automatickým okrajom robí to isté bezpečne. */
#chat.ma-spravy .chat-body::before{content:"";margin-top:auto;flex:none}
#chat.ma-spravy .chat-body{
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 26px);
  mask-image:linear-gradient(to bottom,transparent 0,#000 26px)}

.chat-body .r{display:flex;max-width:94%;gap:0;align-items:flex-start;margin:0;animation:msgIn .2s ease-out}
.chat-body .r.host{align-self:flex-end}
.chat-body .r.obsluha{align-self:flex-start;max-width:100%;width:100%;gap:8px}
.chat-body .kol{display:flex;flex-direction:column;min-width:0}
.chat-body .r.host .kol{align-items:flex-end}
.chat-body .r.obsluha .kol{flex:1;min-width:0;align-items:flex-start}
.chat-body .men{display:block;font:600 10.5px/1.2 var(--head);letter-spacing:.07em;
  text-transform:uppercase;color:var(--ink-soft);margin:0 4px 3px}
.chat-body .men.z{color:var(--red)}
.chat-body .msg.host,.chat-body .msg.obsluha{min-width:0;border:0;box-shadow:none;border-radius:0}
.chat-body .r.host .msg{background:var(--red-soft);color:var(--ink);border-radius:20px;
  border-bottom-right-radius:6px;padding:9px 13px;font-size:14px;line-height:1.5}
.chat-body .r.obsluha .msg{background:none;color:var(--ink);padding:0 0 0 2px;
  font-size:14.5px;line-height:1.55;width:100%}
.chat-body .msg-cas{display:block;font-size:10.5px;opacity:.6;margin-top:2px}
.chat-body .r.obsluha .msg a{color:var(--red)}
.chat-body .r.host .msg a{color:inherit}

/* malý maskot pri správe od nás */
.chat-body .av-h{width:28px;height:28px;border-radius:50%;background-color:#F3ECE3;
  background-image:url(/img/chat-hlava-3.webp);background-size:150% auto;background-position:50% 0;
  background-repeat:no-repeat;border:2px solid #fff;box-shadow:0 2px 6px -2px rgba(78,58,44,.55);
  flex:none;display:block;margin-top:1px;box-sizing:border-box}
.chat-body .av-h.bez{visibility:hidden}

/* „píše…" bez bubliny, pod malým maskotom */
.chat-tip{background:none;border:0;box-shadow:none;border-radius:0;padding:2px 0 2px 38px;margin:0}
.chat-tip span{background:var(--ink-soft)}

.chat-den{background:none;color:var(--ink-soft);padding:0;margin:2px 0}
.chat-stav{margin:-6px 4px 0}

/* produkt pripojený k správe (.ref) a karta produktu od obsluhy (.kartap) */
.ref{display:flex;gap:8px;align-items:center;background:rgba(255,255,255,.75);
  border:1px solid rgba(225,33,31,.18);border-radius:12px;padding:5px 8px 5px 5px;margin-bottom:6px;
  font-size:12px;line-height:1.3;text-align:left}
.ref img,.ref > i{width:34px;height:34px;border-radius:8px;flex:none;object-fit:cover;
  background:repeating-linear-gradient(135deg,#E4DCD2 0 6px,#ECE5DC 6px 12px)}
.ref b{display:block;font-weight:600;font-size:12px}
.ref small{color:var(--ink-soft);font-size:11px}
.kartap{background:var(--v-okne);border:1.5px solid var(--line);border-radius:14px;overflow:hidden;
  margin-top:6px;width:100%;box-shadow:var(--tien-jemny)}
.kartap .rad{display:flex;gap:10px;padding:8px 10px;align-items:center}
.kartap .rad img,.kartap .rad > i{width:46px;height:46px;border-radius:10px;flex:none;object-fit:cover;
  background:repeating-linear-gradient(135deg,#E4DCD2 0 7px,#ECE5DC 7px 14px)}
.kartap .tx b{display:block;font-size:13px;line-height:1.3;font-weight:600}
.chat-body .kartap .tx small{display:flex;align-items:center;gap:5px;color:var(--ok);font-size:11.5px;
  font-weight:600;margin-top:2px}
.kartap .tx small::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--ok)}
.kartap .tl2{display:flex;gap:6px;padding:0 10px 9px}
.kartap .tl2 a{flex:1;text-align:center;font-size:12px;font-weight:600;padding:6px 4px;
  border-radius:9px;border:1.5px solid var(--line);color:var(--ink);text-decoration:none}
.chat-body .kartap .tl2 a{color:var(--ink)}
.chat-body .kartap .tl2 a.p{background:linear-gradient(158deg,#EF3B33 0%,#E1211F 45%,#C4191C 100%);
  border-color:transparent;color:#fff}
/* produkt čakajúci na prvú správu, nad poľom */
.chat-ref{margin:0 10px 6px}
.chat-ref .ref{margin:0;position:relative;padding-right:30px}
.chat-ref .pr-zrus{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;
  background:none;cursor:pointer;font-size:1.2rem;line-height:1;color:var(--ink-soft);padding:0 4px}
.chat-ref .pr-zrus:hover{color:var(--red)}
.chat-ref[hidden]{display:none}

/* úvodná správa od Hafa a rýchle otázky */
.msg-uvod{display:flex;align-self:flex-start;max-width:100%;width:100%;gap:8px;align-items:flex-start}
.msg-uvod .uv-tel{display:none}
.chat-uvod{display:flex;flex-direction:column;gap:10px}
.chat-chips{flex-direction:column;flex-wrap:nowrap;gap:0;margin:0;border-top:1px solid var(--line)}
.chat-chips > button{background:none;border:0;border-bottom:1px solid var(--line);border-radius:0;
  box-shadow:none;-webkit-backdrop-filter:none;backdrop-filter:none;padding:10px 26px 10px 2px;
  font:500 14px/1.45 var(--text);color:var(--ink);text-align:left;position:relative;width:100%}
.chat-chips > button::after{content:"";position:absolute;right:2px;top:50%;width:16px;height:16px;
  margin-top:-8px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23E1211F' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m9 5 7 7-7 7'/%3E%3C/svg%3E") center/16px no-repeat}
.chat-chips > button:hover{color:var(--red)}

/* ---------- pole (dock), kontakt pod ním, poznámka o údajoch ---------- */
.chat-form{padding:0;border:0;background:none}
/* Poradie v poli na telefóne (formulár je tam stĺpec s `order`): stav nad
   poľom, pole, Zavolať / Navigovať / Informácie, poznámka o údajoch. */
.chat-form .chat-predajna{order:1}
.chat-form .chat-riadok{order:2}
.chat-form .chat-kontakt{order:3}
.chat-form .chat-gdpr{order:4}
.chat-form .chat-kto,.chat-form .chat-priloha,
.chat-form .chat-ref{order:0}
/* Chat sa na meno ani kontakt nepýta vôbec (majiteľ 2. 10. 2026: „predtým to
   tam nebolo a bolo to lepšie“). Prihlásenému sa meno a e-mail posielajú z účtu. */
.chat-kto{display:none!important}
.chat-kto{margin:0 10px 8px}
.chat-kto input{border-radius:12px;background:rgba(255,255,255,.8)}
.chat-priloha{margin:0 12px 6px}
.chat-form .chat-riadok{margin:0 10px 8px;padding:5px 5px 5px 14px;gap:6px;flex-wrap:nowrap;
  align-items:center;background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);border:1px solid rgba(255,255,255,.95);border-radius:999px;
  box-shadow:var(--tien-jemny)}
.chat-form .chat-pole{flex:1 1 auto;min-width:0;align-items:center;gap:6px;border:0;border-radius:0;
  background:none;padding:0;height:auto}
.chat-form .chat-pole:focus-within{border:0;background:none}
.chat-emo.hc-smb{order:0;margin-left:-8px;width:34px;height:34px;font-size:inherit;opacity:1;
  align-self:center}
.chat-klip{order:1;width:34px;height:34px;opacity:1;color:var(--ink-soft);align-self:center}
.chat-riadok .chat-klip svg{width:18px;height:18px}
.chat-form .chat-riadok textarea{order:2;flex:1;min-width:0;border:0;background:none;
  font:400 14px/1.45 var(--text);color:var(--ink);padding:9px 4px;min-height:40px;max-height:120px;height:40px;
  margin:0;resize:none;box-sizing:border-box}
.chat-form .chat-riadok textarea::placeholder{color:var(--ink-soft)}
.chat-form .chat-riadok button[type=submit]{order:3;width:40px;height:40px;flex:none;margin:0;
  border-radius:50%;background:linear-gradient(158deg,#EF3B33 0%,#E1211F 45%,#C4191C 100%);color:#fff;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.3),0 10px 20px -12px rgba(140,26,26,.75)}
.chat-form .chat-riadok button[type=submit] svg{width:19px;height:19px;margin:0}

.chat-kontakt{display:flex;flex-direction:column;border:0;flex:0 0 auto}
.chat-kontakt-tl{display:flex;gap:14px;justify-content:center;padding:0 14px 8px;background:none}
.chat-kt{all:unset;box-sizing:border-box;cursor:pointer;display:flex;flex-direction:row;
  align-items:center;gap:6px;min-height:0;padding:4px 2px;border-radius:0;background:none;
  font:500 12px/1.45 var(--text);color:var(--ink-2);text-align:left}
.chat-kt svg{width:15px;height:15px;flex:none}
.chat-kt:hover,.chat-kt:active{background:none;color:var(--red)}
.chat-kt:focus-visible{outline:2.5px solid var(--red);outline-offset:2px;border-radius:6px}
/* Panel Informácie je dlhý (hodiny, kanály, hľadanie rezervácie) – v okne sa
   rolujú sám, aby nevytlačil správy. */
.chat-info{background:none;padding:0 14px 6px;max-height:min(230px,36vh);overflow-y:auto}
/* Rozpis hodín má pravidlá len v telefónnom bloku vyššie – v okne na počítači
   by sa deň a čas zlepili. */
.chat-info .chat-hodiny{list-style:none;margin:0;padding:0}
.chat-info .chat-hodiny li{display:flex;justify-content:space-between;gap:10px;padding:4px 0;
  font-size:.72rem;color:var(--ink-2)}
.chat-info .chat-hodiny li.dnes{color:var(--ink);font-weight:600}
.chat-info .chat-hodiny li b{font-variant-numeric:tabular-nums;font-weight:600}
.chat-kontakt .chat-info{order:1}
.chat-kontakt .chat-kontakt-tl{order:2}
.chat-gdpr{font-size:10.5px;line-height:1.35;color:var(--ink-soft);text-align:center;margin:0;
  padding:0 18px 10px}
.chat-gdpr a{color:var(--ink-soft)}
.chat-alt{display:none}

/* riadok stavu nad poľom: len telefón, na počítači je stav v hlavičke okna */
.chat-predajna{display:none;align-items:center;justify-content:center;gap:6px;margin:0 12px 6px;
  padding:0;background:none;text-align:center;font-size:11.5px;font-weight:400;color:var(--ink-2);line-height:1.3;
  flex:none}
.chat-predajna i{width:8px;height:8px;border-radius:50%;background:var(--ok);flex:none}
.chat-predajna.of i{background:var(--ink-soft)}
.chat-predajna b{font-weight:600;color:var(--ok)}
.chat-predajna.of b{color:var(--red)}
.chat-predajna.zavrete{background:none;color:var(--ink-2)}
.chat-predajna .ps{white-space:nowrap}
/* stav predajne ako v hlavičke webu (styl.css `.pred-pilulka-t small i`): zelená bodka, zatvorené červená */
.chat-predajna .chat-stav{display:inline-flex;align-items:center;gap:6px}
.chat-predajna .chat-stav i{width:7px;height:7px;border-radius:50%;background:var(--stav-otvorene,#2E9E5B);flex:none}
.chat-predajna .chat-stav b{color:var(--stav-otvorene,#2E9E5B)}
.chat-predajna .chat-stav.zavrete i{background:var(--red)}
.chat-predajna .chat-stav.zavrete b{color:var(--red)}
.chat-predajna span:first-of-type{text-align:center}

/* ---------- počítač: okno nad katalógom (bez spodnej lišty) ---------- */
@media(min-width:701px){
  body:not(.ma-mlistu) .chat-box{
    width:360px;max-height:calc(100vh - 146px);min-height:0;
    bottom:calc(var(--fab-chat) + var(--fab-btn) + 12px);
    background:var(--panel);border-radius:26px;border:1px solid rgba(255,255,255,.8);
    box-shadow:0 40px 80px -24px rgba(46,36,29,.6),0 3px 8px -4px rgba(46,36,29,.45);
    overflow:visible;color:var(--ink);font-size:13.5px;line-height:1.45}
  body:not(.ma-mlistu) #chat.ma-spravy .chat-box{height:min(650px,calc(100vh - 146px))}
  body:not(.ma-mlistu) .chat-body{flex:1 1 auto;min-height:100px;overflow-y:auto}

  /* záhlavie: veľká hlava maskota vyčnieva nad okno */
  body:not(.ma-mlistu) .chat-head{display:block;position:relative;flex:none;
    min-height:72px;padding:14px 14px 10px 102px;gap:0;background:none;color:var(--ink);box-shadow:none}
  body:not(.ma-mlistu) .chat-ava.maskot{position:absolute;left:14px;top:-34px;width:76px;height:99px;
    border-radius:0;background:url(/img/chat-hlava-3.webp) center/contain no-repeat;
    filter:drop-shadow(0 0 0 #fff) drop-shadow(0 2px 0 #fff) drop-shadow(0 6px 10px rgba(78,58,44,.35));
    overflow:visible;display:block}
  body:not(.ma-mlistu) .chat-head .hd{display:block}
  body:not(.ma-mlistu) .chat-head strong{font-family:var(--head);text-transform:uppercase;
    letter-spacing:.06em;font-size:17px;font-weight:600;line-height:1.15;white-space:nowrap;overflow:hidden;
    text-overflow:ellipsis;padding-right:98px;color:var(--ink)}
  body:not(.ma-mlistu) .chat-head small{display:flex;align-items:center;gap:6px;font-size:11.5px;
    color:var(--ink-2);margin-top:2px;line-height:1.3}
  body:not(.ma-mlistu) .chat-head small i{width:8px;height:8px;background:var(--ok)}
  body:not(.ma-mlistu) .chat-head small.off i{background:var(--ink-soft)}
  body:not(.ma-mlistu) .chat-hbtn,
  body:not(.ma-mlistu) .chat-x{position:absolute;top:10px;width:30px;height:30px;display:grid;
    place-items:center;border-radius:50%;padding:0;background:none;color:var(--ink-2);opacity:1;font-size:0;line-height:0}
  /* sprava doľava: Ukončiť rozhovor (X), zbaliť (–), zvonček */
  body:not(.ma-mlistu) .chat-hbtn{right:74px}
  body:not(.ma-mlistu) .chat-x{right:42px}
  body:not(.ma-mlistu) .chat-hbtn.chat-end{right:10px}
  body:not(.ma-mlistu) .chat-hbtn:hover,
  body:not(.ma-mlistu) .chat-x:hover{background:rgba(28,27,26,.06)}
  body:not(.ma-mlistu) .chat-head .nk-ic{width:18px;height:18px;display:block}
  body:not(.ma-mlistu) .chat-back{display:none}
}

/* rýchle otázky a dlhá úvodná veta sú len na počítači */
@media(max-width:900px){
  body.ma-mlistu .chat-chips{display:none}
  body.ma-mlistu .msg-uvod .uv-pc{display:none}
  body.ma-mlistu .msg-uvod .uv-tel{display:inline}
  body.ma-mlistu .chat-emo{display:none}
}
@media(max-width:700px){
  .chat-emo{display:none}
  /* 16 px je najmenšia veľkosť, pri ktorej Safari pri ťuknutí do poľa nezoomuje */
  .chat-form .chat-riadok textarea{font-size:16px}
}

/* ---------- telefón: karta Kontakt v spodnej lište ---------- */
@media(max-width:900px){
  /* Obrazovka kryje aj pás za priehľadnou hornou lištou (pilulky plávajú nad
     ňou), preto začína hore a horná lišta (.mvrch, z-index 135) je nad ňou. */
  /* `html` navyše: rezervacia.css (v obchod.html načítaný za chat.css) má rovnako silné pravidlo
     s `top:var(--mvrch-h)` a vyhrávalo – na iPhone potom medzi hornou lištou a chatom presvitali
     pilulky filtra (5. 10. 2026). */
  html body.ma-mlistu #chatBox:not([hidden]){
    top:0;padding-top:var(--mvrch-h,57px);box-sizing:border-box;background:var(--panel);
    overflow:hidden}
  body.ma-mlistu #chatBox .chat-body{padding:12px 14px 8px}
  body.ma-mlistu .chat-predajna{display:flex}
  body.ma-mlistu .chat-form .chat-riadok{margin:0 10px 12px}
  body.ma-mlistu .chat-form .chat-riadok textarea{font-size:16px}
  body.ma-mlistu .chat-kto{display:none}
  body.ma-mlistu #chatBox .chat-form{padding-bottom:0}
  body.ma-mlistu .chat-body .r.obsluha{max-width:92%;width:auto}
  body.ma-mlistu .chat-body .r.host{max-width:86%}
  body.ma-mlistu .chat-body .msg-uvod{max-width:92%;width:auto}
  body.ma-mlistu .chat-info{padding:0 14px 6px}
}

/* ---------- offline formulár, kópia rozhovoru (návrh 5, 1d) ----------
   Hodnoty z návrhu (`.form-k`): biela karta 14 px, polia na bielom pozadí
   --bg, červené tlačidlo pilulka. Lístok rezervácie a karta „Odfotiť obal"
   kreslí chat-spolocne.js (`.hc-listok`, `.kartap.hc-foto-karta`). */
.form-k{background:var(--v-okne);border:1.5px solid var(--line);border-radius:14px;padding:10px 11px;
  box-shadow:var(--tien-jemny);margin:7px 0 0;text-align:left}
.form-k[hidden]{display:none}
.form-k .of-fld{display:flex;align-items:center;gap:8px;padding:8px 10px;border:1.5px solid var(--line);
  border-radius:10px;background:var(--bg);color:var(--ink-soft);font-size:13px;margin:0 0 7px;cursor:text}
.form-k .of-fld:focus-within{border-color:var(--red)}
.form-k .of-fld .hc-ic{width:15px;height:15px}
.form-k .of-fld input,.form-k .of-fld textarea{flex:1;min-width:0;border:0;background:none;
  padding:0;margin:0;font:inherit;font-size:13px;color:var(--ink);outline:0;resize:none;box-shadow:none}
.form-k .of-bt{display:block;width:100%;text-align:center;font:600 13px/1.4 var(--text,inherit);color:#fff;border:0;
  background:linear-gradient(158deg,#EF3B33 0%,#E1211F 45%,#C4191C 100%);border-radius:999px;padding:8px;cursor:pointer}
.form-k .of-bt:disabled{opacity:.6;cursor:default}
.form-k .of-chyba{margin:0 0 7px;font-size:12px;color:#B8171B}
.form-k .of-gdpr{margin:7px 0 0;font-size:10.5px;line-height:1.35;color:var(--ink-soft);text-align:center}
.form-k .of-gdpr a{color:inherit}
.form-k .of-hotovo{margin:0;font-size:13px;color:var(--ink-2);text-align:center}
.chat-kopia{margin:10px 0 0}
/* pole a rýchle otázky sa pri offline formulári neukazujú (na počítači) */
@media(min-width:701px){
  /* Zavolať / Navigovať / Informácie ostávajú aj tu – majiteľ ich chce pod
     poľom VŽDY (1. 10. 2026); skryje sa len samotné písanie. */
  .chat-box.chat-offline-formular .chat-form > :not(.chat-kontakt){display:none}
  .chat-box.chat-offline-formular .chat-chips{display:none}
}
@media(max-width:700px){
  .chat-offform{display:none}
}

/* ---------- telefón bez spodnej lišty (úvodná stránka): hlavička podľa návrhu 5, sekcia 2 ----------
   V katalógu (`body.ma-mlistu`) hlavičku chatu nahrádza horná lišta katalógu. Úvodná stránka ju nemá
   a spodnú lištu tiež nie, takže chat je obrazovka s vlastnou hlavičkou – ale nie červenou doskou:
   bez plného pozadia, sklenené okrúhle tlačidlá (ako `.bb` v hornej lište), malý maskot a nadpis
   v tinte webu. Počítač (okno nad stránkou) sa tým nemení. */
@media(max-width:700px){
  body:not(.ma-mlistu) .chat-box{background:var(--panel)}
  body:not(.ma-mlistu) .chat-head{background:none;color:var(--ink);box-shadow:none;
    gap:10px;padding:8px 12px 8px;padding-top:calc(8px + env(safe-area-inset-top, 0px))}
  body:not(.ma-mlistu) .chat-back,
  body:not(.ma-mlistu) .chat-hbtn{width:40px;height:40px;padding:0;margin:0;border-radius:50%;
    display:grid;place-items:center;opacity:1;color:var(--ink);background:rgba(255,255,255,.72);
    -webkit-backdrop-filter:blur(16px) saturate(150%);backdrop-filter:blur(16px) saturate(150%);
    border:1px solid rgba(255,255,255,.95);box-shadow:var(--tien-jemny)}
  body:not(.ma-mlistu) .chat-back:active,
  body:not(.ma-mlistu) .chat-hbtn:active{background:var(--v-okne)}
  body:not(.ma-mlistu) .chat-back svg{width:20px;height:20px}
  body:not(.ma-mlistu) .chat-hbtn .nk-ic{width:18px;height:18px;display:block}
  body:not(.ma-mlistu) .chat-ava.maskot{width:44px;height:57px;margin:-4px 0}
  body:not(.ma-mlistu) .chat-head strong{font-family:var(--head);text-transform:uppercase;
    letter-spacing:.06em;font-size:17px;font-weight:600;color:var(--ink)}
  body:not(.ma-mlistu) .chat-head small{font-size:11.5px;color:var(--ink-2);margin-top:1px}
  body:not(.ma-mlistu) .chat-head small i{width:8px;height:8px;background:var(--ok)}
  body:not(.ma-mlistu) .chat-head small.off i{background:var(--ink-soft)}
}

@media (prefers-reduced-motion:reduce){
  .chat-body .r{animation:none}
}

/* ==========================================================================
   Oznam v chate: karta, ktorú zákazník zbalí na tenký pás
   (návrh Vylepšenia webu, téma 4 B, 30. 9. 2026; hodnoty z `.ozn-b` a `.ozn-a`).
   Kreslí ho chat.js; zbalenie si pamätá localStorage
   (kľúč `hafo_oznam_zbaleny` = znenie, ktoré zákazník zbalil).
   ========================================================================== */
#chatOznam{flex:0 0 auto}
#chatOznam.ozn-b:not(.zbaleny){
  margin:10px 14px 0;border-radius:16px;background:var(--v-okne);border:1px solid var(--line);
  box-shadow:var(--tien-jemny);overflow:hidden}
.ozn-b .oh{display:flex;align-items:center;gap:9px;padding:9px 8px 9px 12px}
.ozn-b .oh .ik{width:30px;height:30px;border-radius:50%;background:var(--red-soft);
  color:var(--red);display:grid;place-items:center;flex:none}
.ozn-b .oh .ik .ic{width:17px;height:17px}
.ozn-b .oh b{flex:1;font:600 14px var(--head);letter-spacing:.1em;text-transform:uppercase;
  color:var(--red)}
.ozn-b .oh-zbal{width:30px;height:30px;padding:0;border:0;border-radius:50%;
  display:grid;place-items:center;color:var(--ink-2);background:#FAF8F7;cursor:pointer;position:relative}
.ozn-b .oh-zbal .ic{width:17px;height:17px}
/* Dotyková plocha 44 px pri 30 px kruhu. */
.ozn-b .oh-zbal::before{content:'';position:absolute;inset:-7px}
.ozn-b p{margin:0;padding:0 14px 13px 14px;font-size:14.5px;line-height:1.5;color:var(--ink)}
.ozn-b .zb{border-top:1px solid var(--line);padding:7px 14px;font-size:12.5px;
  color:var(--ink-soft);display:flex;justify-content:flex-end}
.ozn-b .zb button{all:unset;cursor:pointer;color:var(--red);font-weight:600;font-size:12.5px;
  padding:4px 0}
.ozn-b .zb button:focus-visible,
.ozn-b .oh-zbal:focus-visible,
.ozn-a:focus-visible{outline:2px solid var(--red);outline-offset:2px}
/* zbalená podoba – tenký pás */
.ozn-a{all:unset;box-sizing:border-box;cursor:pointer;
  margin:10px 14px 0;min-height:40px;border-radius:999px;display:flex;align-items:center;gap:9px;
  padding:0 6px 0 14px;background:rgba(255,255,255,.8);border:1px solid var(--sklo-ram);
  box-shadow:var(--sklo-tien);font-size:13.5px;color:var(--ink-2);width:calc(100% - 28px)}
.ozn-a .ic{color:var(--red);width:18px;height:18px;flex:none}
.ozn-a span{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ozn-a span b{color:var(--ink);font-weight:600}
.ozn-a span i{font-style:normal}
.ozn-a em{all:unset;width:30px;height:30px;border-radius:50%;background:rgba(225,33,31,.09);
  color:var(--red);display:grid;place-items:center;flex:none}
.ozn-a em .ic{width:16px;height:16px;color:var(--red)}