/* =========================================================
   SSN AI Chat
   ========================================================= */
.ssn-ai,.ssn-ai *,.ssn-ai *::before,.ssn-ai *::after{box-sizing:border-box}
.ssn-ai{
  --ai-navy:#14274A; --ai-red:#C8102E; --ai-line:#E9ECF1;
  --ai-wash:#F2F5FA; --ai-ink:#141a24; --ai-muted:#5B6472;
  position:fixed;bottom:24px;z-index:9600;
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif}
.ssn-ai[data-pos="right"]{right:24px;align-items:flex-end}
.ssn-ai[data-pos="left"]{left:24px;align-items:flex-start}
.ssn-ai{display:flex;flex-direction:column;gap:11px}

/* --- bublina --- */
.ssn-ai-bubble{
  width:58px;height:58px;border-radius:50%;border:none;cursor:pointer;padding:0;
  background:var(--ai-navy);color:#fff;display:grid;place-items:center;
  box-shadow:0 16px 34px -14px rgba(20,39,74,.7);
  transition:transform .2s,background .2s;-webkit-appearance:none;appearance:none}
.ssn-ai-bubble:hover{background:var(--ai-red);transform:scale(1.06)}
.ssn-ai-bubble svg{width:26px;height:26px;fill:currentColor}
.ssn-ai.is-open .ssn-ai-bubble{display:none}

/* --- okno --- */
.ssn-ai-panel{
  position:absolute;bottom:0;width:min(380px,calc(100vw - 40px));
  height:min(560px,calc(100vh - 120px));
  background:#fff;border-radius:18px;overflow:hidden;
  display:none;flex-direction:column;
  box-shadow:0 30px 60px -24px rgba(9,18,38,.55);
  border:1px solid var(--ai-line)}
.ssn-ai[data-pos="right"] .ssn-ai-panel{right:0}
.ssn-ai[data-pos="left"] .ssn-ai-panel{left:0}
.ssn-ai.is-open .ssn-ai-panel{display:flex;animation:ssn-ai-in .26s cubic-bezier(.22,1,.36,1)}
@keyframes ssn-ai-in{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}

.ssn-ai-head{
  background:linear-gradient(135deg,var(--ai-navy),#1E3A63);color:#fff;
  padding:16px 18px;display:flex;align-items:center;justify-content:space-between;gap:12px;flex:none}
.ssn-ai-head h3{margin:0;font-size:16px;font-weight:600;color:#fff}
.ssn-ai-close{
  width:32px;height:32px;border-radius:9px;flex:none;cursor:pointer;padding:0;position:relative;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  -webkit-appearance:none;appearance:none}
.ssn-ai-close::before,.ssn-ai-close::after{
  content:"";position:absolute;top:50%;left:50%;width:13px;height:2px;background:#fff;border-radius:2px}
.ssn-ai-close::before{transform:translate(-50%,-50%) rotate(45deg)}
.ssn-ai-close::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* --- správy --- */
.ssn-ai-body{flex:1;overflow-y:auto;padding:18px;display:flex;flex-direction:column;gap:14px}
.ssn-ai-msg{max-width:86%;font-size:14.5px;line-height:1.6}
.ssn-ai-msg.bot{align-self:flex-start;background:var(--ai-wash);color:var(--ai-ink);
  padding:12px 14px;border-radius:14px 14px 14px 4px}
.ssn-ai-msg.me{align-self:flex-end;background:var(--ai-navy);color:#fff;
  padding:12px 14px;border-radius:14px 14px 4px 14px}
.ssn-ai-msg p{margin:0 0 8px}
.ssn-ai-msg p:last-child{margin:0}

.ssn-ai-src{margin-top:10px;padding-top:10px;border-top:1px solid var(--ai-line);
  font-size:12.5px;color:var(--ai-muted)}
.ssn-ai-src a{display:block;color:var(--ai-navy);font-weight:600;text-decoration:none;margin-top:5px}
.ssn-ai-src a:hover{color:var(--ai-red);text-decoration:underline}

/* --- návrhy otázok --- */
.ssn-ai-sugg{display:flex;flex-wrap:wrap;gap:8px;align-self:flex-start}
.ssn-ai-sugg button{
  font:inherit;font-size:13px;padding:8px 13px;border-radius:999px;cursor:pointer;
  background:#fff;border:1px solid var(--ai-line);color:var(--ai-navy);transition:.16s}
.ssn-ai-sugg button:hover{border-color:var(--ai-navy);background:var(--ai-wash)}

/* --- písanie --- */
.ssn-ai-typing{display:flex;gap:5px;align-self:flex-start;padding:14px}
.ssn-ai-typing span{width:7px;height:7px;border-radius:50%;background:var(--ai-muted);opacity:.4;
  animation:ssn-ai-dot 1.3s ease-in-out infinite}
.ssn-ai-typing span:nth-child(2){animation-delay:.18s}
.ssn-ai-typing span:nth-child(3){animation-delay:.36s}
@keyframes ssn-ai-dot{0%,60%,100%{transform:translateY(0);opacity:.4}30%{transform:translateY(-5px);opacity:.9}}

/* --- vstup --- */
.ssn-ai-foot{flex:none;border-top:1px solid var(--ai-line);padding:12px 14px;background:#fff}
.ssn-ai-form{display:flex;gap:9px;align-items:flex-end}
.ssn-ai-form textarea{
  flex:1;font:inherit;font-size:14.5px;line-height:1.45;resize:none;
  border:1px solid var(--ai-line);border-radius:11px;padding:10px 12px;
  max-height:110px;color:var(--ai-ink);background:#fff}
.ssn-ai-form textarea:focus{outline:none;border-color:var(--ai-navy)}
.ssn-ai-send{
  width:40px;height:40px;border-radius:11px;border:none;cursor:pointer;flex:none;padding:0;
  background:var(--ai-red);color:#fff;display:grid;place-items:center;transition:.18s;
  -webkit-appearance:none;appearance:none}
.ssn-ai-send:hover:not(:disabled){background:#a60d26}
.ssn-ai-send:disabled{opacity:.4;cursor:default}
.ssn-ai-send svg{width:18px;height:18px;fill:currentColor}
.ssn-ai-note{font-size:11.5px;color:var(--ai-muted);margin-top:9px;line-height:1.45;text-align:center}

@media(max-width:520px){
  .ssn-ai{bottom:16px}
  .ssn-ai[data-pos="right"]{right:16px}
  .ssn-ai[data-pos="left"]{left:16px}
  .ssn-ai-panel{width:calc(100vw - 32px);height:min(76vh,540px)}
  .ssn-ai-bubble{width:52px;height:52px}
}
@media(prefers-reduced-motion:reduce){
  .ssn-ai.is-open .ssn-ai-panel{animation:none}
  .ssn-ai-typing span{animation:none}
}


/* =========================================================
   POZDRAVNÁ BUBLINA
   Objaví sa po nastavenom čase, dá sa zavrieť. Zavretie si
   pamätáme, aby návštevníka neotravovala na každej stránke.
   ========================================================= */
.ssn-ai-peek{
  position:relative;max-width:250px;
  background:#fff;border:1px solid var(--ai-line);
  padding:13px 30px 13px 15px;
  font-size:13.5px;line-height:1.5;color:var(--ai-ink);
  box-shadow:0 16px 34px -18px rgba(20,39,74,.55);
  cursor:pointer;
  opacity:0;visibility:hidden;transform:translateY(10px) scale(.96);
  transition:opacity .32s cubic-bezier(.22,1,.36,1),transform .32s cubic-bezier(.22,1,.36,1),visibility .32s}
.ssn-ai[data-pos="right"] .ssn-ai-peek{border-radius:14px 14px 4px 14px}
.ssn-ai[data-pos="left"] .ssn-ai-peek{border-radius:14px 14px 14px 4px}
.ssn-ai-peek.is-in{opacity:1;visibility:visible;transform:none}
.ssn-ai-peek:hover{border-color:var(--ai-navy)}

.ssn-ai-peek strong{
  display:block;font-size:11.5px;font-weight:700;color:var(--ai-navy);
  letter-spacing:.05em;text-transform:uppercase;margin-bottom:4px}

.ssn-ai-peek-x{
  position:absolute;top:7px;right:7px;width:20px;height:20px;border-radius:6px;
  background:var(--ai-wash);border:none;cursor:pointer;padding:0;
  -webkit-appearance:none;appearance:none;transition:background .16s}
.ssn-ai-peek-x:hover{background:var(--ai-line)}
.ssn-ai-peek-x::before,.ssn-ai-peek-x::after{
  content:"";position:absolute;top:50%;left:50%;width:9px;height:1.5px;
  background:var(--ai-muted);border-radius:2px}
.ssn-ai-peek-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.ssn-ai-peek-x::after{transform:translate(-50%,-50%) rotate(-45deg)}

/* Pri otvorenom okne bublinu skryjeme */
.ssn-ai.is-open .ssn-ai-peek{display:none}

@media(max-width:520px){
  .ssn-ai-peek{max-width:min(250px,calc(100vw - 90px));font-size:13px}
}
@media(prefers-reduced-motion:reduce){
  .ssn-ai-peek{transition:opacity .2s,visibility .2s;transform:none}
}

/* =========================================================
   OCHRANA PROTI TÉME
   Niektoré témy prebíjajú zaoblenie aj rozmery, takže tlačidlo
   vyzerá ako štvorec. Tieto pravidlá to vynútia.
   ========================================================= */
.ssn-ai .ssn-ai-bubble:not(.has-label){border-radius:50%!important}
.ssn-ai .ssn-ai-bubble.has-label{border-radius:999px!important}
.ssn-ai .ssn-ai-bubble{
  box-shadow:0 16px 34px -14px rgba(20,39,74,.7)!important;
  text-transform:none!important;letter-spacing:normal!important;
  min-width:0!important;min-height:0!important;line-height:1!important}
.ssn-ai .ssn-ai-bubble svg{
  width:26px!important;height:26px!important;max-width:none!important;
  display:block!important;flex:none}
.ssn-ai .ssn-ai-bubble.has-label svg{width:22px!important;height:22px!important}
.ssn-ai .ssn-ai-close,
.ssn-ai .ssn-ai-peek-x{border-radius:8px!important}
.ssn-ai .ssn-ai-panel{border-radius:18px!important}

/* =========================================================
   KOLÍZIA S TLAČIDLOM „SPÄŤ HORE“
   Ak je na rovnakej strane, JS mu pridá triedu a my ho
   posunieme nad chat.
   ========================================================= */
/* Presnú hodnotu dopočíta JS podľa skutočnej výšky chatu.
   Toto je len záloha, kým sa skript načíta. */
.ssn-totop.ssn-ai-shift{bottom:96px}

/* Pri otvorenom chate tlačidlo „Späť hore“ skryjeme – prekrývalo by okno */
body.ssn-ai-open .ssn-totop.ssn-ai-shift{
  opacity:0!important;visibility:hidden!important;pointer-events:none}


/* =========================================================
   TLAČIDLO S TRVALÝM TEXTOM
   ========================================================= */
.ssn-ai-bubble.has-label{
  width:auto!important;height:54px!important;
  display:flex!important;align-items:center;gap:10px;
  padding:0 22px 0 18px!important;
  font-family:inherit;font-size:14.5px;font-weight:600;
  letter-spacing:.01em;white-space:nowrap;line-height:1!important}
.ssn-ai-bubble .ssn-ai-bubble-txt{display:block}

@media(max-width:520px){
  .ssn-ai-bubble.has-label{height:50px!important;font-size:13.5px;
    padding:0 18px 0 15px!important;gap:8px}
}

/* Voliteľne sa text na úzkych displejoch skryje a ostane kruh */
@media(max-width:480px){
  .ssn-ai-bubble.has-label.hide-mobile{
    width:52px!important;height:52px!important;
    border-radius:50%!important;padding:0!important;
    display:grid!important;place-items:center}
  .ssn-ai-bubble.has-label.hide-mobile .ssn-ai-bubble-txt{display:none}
  .ssn-ai-bubble.has-label.hide-mobile svg{width:24px!important;height:24px!important}
}

/* =========================================================
   ANIMÁCIE IKON
   Animácia prebehne raz za niekoľko sekúnd, nie stále —
   nepretržitý pohyb v rohu obrazovky ruší pri čítaní.
   ========================================================= */
.ssn-ai-bubble svg *{transform-box:fill-box;transform-origin:center}

/* --- Blesk: preblikne ako výboj --- */
@keyframes ai-flash{
  0%,86%,100%{opacity:1}
  88%{opacity:.2}
  90%{opacity:1}
  92%{opacity:.35}
  95%{opacity:1}}
.ssn-ai-bubble.is-animated .ai-bolt{animation:ai-flash 5s ease-in-out infinite}

/* --- Obvod a bodky: rozsvecujú sa po sebe ako prúd --- */
@keyframes ai-node{
  0%,55%,100%{opacity:.45;transform:scale(1)}
  62%{opacity:1;transform:scale(1.35)}
  72%{opacity:.45;transform:scale(1)}}
.ssn-ai-bubble.is-animated .ai-node{animation:ai-node 3.4s ease-in-out infinite}
.ssn-ai-bubble.is-animated .ai-node.n2{animation-delay:.22s}
.ssn-ai-bubble.is-animated .ai-node.n3{animation-delay:.44s}

@keyframes ai-trace{
  0%,58%,100%{opacity:1}
  64%{opacity:.5}
  70%{opacity:1}}
.ssn-ai-bubble.is-animated .ai-trace{animation:ai-trace 3.4s ease-in-out infinite}
.ssn-ai-bubble.is-animated .ai-trace.t2{animation-delay:.16s}
.ssn-ai-bubble.is-animated .ai-trace.t3{animation-delay:.32s}

/* --- Vývody čipu: prebehnú ako signál --- */
@keyframes ai-pin{
  0%,60%,100%{opacity:.5}
  68%{opacity:1}
  78%{opacity:.5}}
.ssn-ai-bubble.is-animated .ai-pin{animation:ai-pin 3.6s ease-in-out infinite}
.ssn-ai-bubble.is-animated .ai-pin.p2{animation-delay:.14s}
.ssn-ai-bubble.is-animated .ai-pin.p3{animation-delay:.28s}

/* --- Otáznik: jemne pulzuje --- */
@keyframes ai-q{
  0%,70%,100%{transform:scale(1)}
  80%{transform:scale(1.12)}}
.ssn-ai-bubble.is-animated .ai-q{animation:ai-q 4.4s ease-in-out infinite}

/* --- Žiarovka: rozsvieti sa --- */
@keyframes ai-glow{
  0%,72%,100%{opacity:1}
  80%{opacity:.45}
  88%{opacity:1}}
.ssn-ai-bubble.is-animated .ai-glass{animation:ai-glow 4.6s ease-in-out infinite}

/* --- Pri prejdení myšou animácia zrýchli --- */
.ssn-ai-bubble.is-animated:hover .ai-bolt,
.ssn-ai-bubble.is-animated:hover .ai-node,
.ssn-ai-bubble.is-animated:hover .ai-trace,
.ssn-ai-bubble.is-animated:hover .ai-pin,
.ssn-ai-bubble.is-animated:hover .ai-q,
.ssn-ai-bubble.is-animated:hover .ai-glass{animation-duration:1.2s}

@media(prefers-reduced-motion:reduce){
  .ssn-ai-bubble.is-animated svg *{animation:none!important;opacity:1!important}
}