/* ============================================================
   Chat widget – ztshafo.sk
   Samostatný súbor, aby bol na index.html aj rezervacia.html jeden a ten istý.
   Premenné si definuje sám, nezávisí na štýloch stránky.
   ============================================================ */
#chat{
  --red:#E1211F; --red-d:#c01a18; --ink:#1c1b1a; --ink-soft:#7d7674;
  --line:#e7e1df; --bg:#faf8f7; --r-lg:18px;
  --head:'Oswald','Arial Narrow',system-ui,sans-serif;
}
#chat[hidden]{display:none}

/* ---------- plávajúce tlačidlo ---------- */
.chat-btn{position:fixed;right:18px;bottom:calc(18px + 132px);z-index:75;width:56px;height:56px;
  border-radius:50%;border:3px solid #fff;box-sizing:border-box;background:var(--red);color:#fff;
  cursor:pointer;display:grid;place-items:center;box-shadow:0 8px 22px -6px rgba(0,0,0,.42);
  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:#1a8f3c;border:2.5px solid #fff;color:#fff;font-size:.7rem;
  font-weight:700;line-height:16px;text-align:center}
.chat-badge[hidden]{display:none}

/* ---------- proaktívna bublina ---------- */
.chat-bubble{position:fixed;right:84px;bottom:calc(18px + 138px);z-index:75;max-width:250px;
  background:#fff;border:1.5px solid var(--line);border-radius:14px;border-bottom-right-radius:5px;
  padding:11px 34px 11px 13px;box-shadow:0 16px 34px -12px rgba(0,0,0,.3);font-size:.85rem;
  line-height:1.45;color:var(--ink);cursor:pointer;animation:bubIn .32s ease-out}
@keyframes bubIn{from{opacity:0;transform:translateY(8px) scale(.96)}to{opacity:1;transform:none}}
.chat-bubble[hidden]{display:none}
.chat-bubble b{display:block;font-size:.8rem;color:var(--red);margin-bottom:2px}
.chat-bubble .bub-x{position:absolute;top:4px;right:6px;background:none;border:0;font-size:1.1rem;
  line-height:1;color:var(--ink-soft);cursor:pointer;padding:2px 4px}

/* ---------- okno ---------- */
.chat-box{position:fixed;right:18px;bottom:calc(18px + 200px);z-index:76;width:352px;
  max-height:min(76vh,580px);background:#fff;border-radius:var(--r-lg);
  box-shadow:0 26px 60px -16px rgba(0,0,0,.34);display:flex;flex-direction:column;overflow:hidden;
  border:1.5px solid var(--line);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}

.chat-head{background:var(--red);color:#fff;padding:13px 14px;display:flex;align-items:center;gap:11px;
  position:relative}
.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}
.chat-ava svg{width:24px;height:24px;color:#fff}
.chat-head .hd{flex:1;min-width:0}
.chat-head strong{display:block;font-family:var(--head);text-transform:uppercase;letter-spacing:.09em;
  font-size:.92rem}
.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}

/* ponuka v hlavičke */
.chat-menu{position:absolute;top:54px;right:10px;background:#fff;border:1.5px solid var(--line);
  border-radius:12px;box-shadow:0 16px 34px -12px rgba(0,0,0,.3);padding:5px;z-index:3;min-width:190px}
.chat-menu[hidden]{display:none}
.chat-menu button{display:flex;align-items:center;gap:8px;width:100%;background:none;border:0;
  padding:8px 10px;font:inherit;font-size:.84rem;color:var(--ink);text-align:left;cursor:pointer;
  border-radius:8px}
.chat-menu button:hover{background:var(--bg)}

/* ---------- 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-uvod p{font-size:.86rem;color:var(--ink-soft);margin:0;line-height:1.55}
.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 */
.msg-riadok{display:flex;gap:8px;align-items:flex-start;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-top:3px}
.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}
.msg.obsluha{background:#fff;border:1.5px solid var(--line);border-bottom-left-radius:5px}
.msg-riadok.pokracovanie .msg.host{border-top-right-radius:5px}
.msg-riadok.pokracovanie .msg.obsluha{border-top-left-radius:5px}
.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:#fff;border:1.5px solid var(--line);border-radius:14px;
  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:#fff;border:1.5px solid var(--line);border-radius:16px;padding:6px 11px;
  font:inherit;font-size:.78rem;color:var(--ink);cursor:pointer;transition:border-color .15s,color .15s}
.chat-chips button:hover{border-color:var(--red);color:var(--red)}

.chat-rate{align-self:center;text-align:center;margin:8px 0 2px}
.chat-rate[hidden]{display:none}
.chat-rate p{font-size:.76rem;color:var(--ink-soft);margin:0 0 4px}
.chat-rate button{background:none;border:0;font-size:1.25rem;cursor:pointer;line-height:1;
  padding:0 2px;filter:grayscale(1);opacity:.5;transition:opacity .15s,filter .15s}
.chat-rate button:hover,.chat-rate button.on{filter:none;opacity:1}

/* ---------- formulár ---------- */
.chat-form{padding:11px 14px 10px;border-top:1px solid var(--line);background:#fff}
.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}
.chat-riadok textarea{flex:1;padding:10px 12px;border:1.5px solid var(--line);border-radius:10px;
  font:inherit;font-size:.9rem;resize:none;max-height:110px;line-height:1.45}
.chat-riadok textarea:focus{outline:0;border-color:var(--red)}
.chat-emo{width:34px;height:42px;flex-shrink:0;border:0;background:none;cursor:pointer;font-size:1.15rem;
  opacity:.65;transition:opacity .15s}
.chat-emo:hover{opacity:1}
.chat-riadok button[type=submit]{width:42px;height:42px;flex-shrink:0;border:0;border-radius:10px;
  background:var(--red);color:#fff;cursor:pointer;display:grid;place-items:center}
.chat-riadok button[type=submit]:hover{background:var(--red-d)}
.chat-riadok button svg{width:20px;height:20px}
.chat-riadok button:disabled{opacity:.45;cursor:default}

/* emoji – s kartami, nech sa dá nájsť viac než pár tvárí */
.chat-emoji{padding:6px 0 2px;border-top:1px solid var(--line);margin-top:2px}
.chat-emoji[hidden]{display:none}
.chat-emoji-taby{display:flex;gap:4px;margin-bottom:4px}
.chat-emoji-taby button{background:none;border:0;font-size:1rem;cursor:pointer;padding:3px 7px;
  border-radius:8px;opacity:.5;line-height:1}
.chat-emoji-taby button.on{opacity:1;background:rgba(225,33,31,.1)}
.chat-emoji-mriezka{display:flex;flex-wrap:wrap;gap:1px;max-height:132px;overflow-y:auto}
.chat-emoji-mriezka button{background:none;border:0;font-size:1.2rem;cursor:pointer;padding:4px 5px;
  border-radius:6px;line-height:1}
.chat-emoji-mriezka button:hover{background:rgba(0,0,0,.06)}

.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){
  .chat-btn{right:14px;bottom:calc(14px + 58px);width:48px;height:48px}
  .chat-btn svg{width:23px;height:23px}
  .chat-box{right:10px;left:10px;width:auto;bottom:calc(14px + 116px);max-height:72vh}
  .chat-bubble{right:70px;bottom:calc(14px + 62px);max-width:200px}
}

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