/* ============================================================
   TAPKO — AI chat widget (js/tapko.js, plan db/plan-tapko-chatbot.md)
   Sve klase .tk-* ; nasleđuje site.css varijable (--blue/--cream/...).
   Z-index NAMERNO ispod cookie (.ck) i jezičkog (.lb) banera (150) —
   widget se ionako ne pojavljuje dok su oni na ekranu (gejtovi u JS-u).
   ============================================================ */

/* ---- jezičak „<" uz desnu ivicu (utišan: bela kartica kao .ck/.lb baneri,
       ne plava — Nikolina primedba 23.07.) ---- */
.tk-tab{
  position:fixed;right:0;bottom:112px;z-index:140;
  width:36px;height:64px;cursor:pointer;
  background:#fff;color:rgba(20,17,12,.55);
  border:1.5px solid var(--cream-deep);border-right:0;
  border-radius:14px 0 0 14px;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 10px 30px -14px rgba(20,17,12,.35);
  transform:translateX(0);
  transition:transform .3s var(--ease),width .2s var(--ease),color .2s ease;
}
.tk-tab:hover{width:42px;color:var(--blue)}
.tk-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.tk-tab svg{display:block}
.tk-tab.tk-off{transform:translateX(110%)}

/* ---- intro (jednom po uređaju): Tapko + pilula, pa se povuče ---- */
.tk-intro{
  position:fixed;right:14px;bottom:96px;z-index:140;
  display:flex;align-items:flex-end;gap:10px;
  pointer-events:none;
  transform:translateY(30px) translateX(0);opacity:0;
  transition:transform .5s var(--ease),opacity .4s ease;
}
.tk-intro.tk-in{transform:none;opacity:1}
/* izlaz: skupi se ka jezičku (scale+fade), NE klizanje van ekrana —
   polu-isečen krug na ivici je izgledao kao bag (Nikolin screenshot 23.07.) */
.tk-intro.tk-out{transform:translateX(40px) scale(.2);opacity:0;transform-origin:100% 70%;transition:transform .4s ease-in,opacity .35s ease-in}
/* Tapko u krem znački (figura je plava pa bi na plavim sekcijama nestala —
   Nikolina primedba 23.07.; značka radi na svakoj podlozi) */
.tk-intro-badge{
  width:92px;height:92px;flex:none;
  background:#fff;border:1.5px solid var(--cream-deep);border-radius:50%;
  display:flex;align-items:center;justify-content:center;overflow:hidden;
  box-shadow:0 14px 34px -16px rgba(20,17,12,.4);
  animation:tkBob 2.4s ease-in-out infinite;
}
.tk-intro-fig{width:66px;height:auto;display:block}
.tk-intro-pill{
  background:#fff;border:1.5px solid var(--blue);color:var(--blue);
  font-family:var(--disp);font-weight:700;font-size:16px;
  padding:9px 16px;border-radius:999px;margin-bottom:34px;
  box-shadow:0 14px 34px -16px rgba(20,17,12,.4);
  white-space:nowrap;position:relative;
}
.tk-intro-pill::after{
  content:'';position:absolute;right:-7px;bottom:9px;
  width:12px;height:12px;background:#fff;
  border-right:1.5px solid var(--blue);border-bottom:1.5px solid var(--blue);
  transform:rotate(-45deg);
}
@keyframes tkBob{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-6px) rotate(-2deg)}}

/* ---- veo (samo mobilni sheet) ---- */
.tk-veil{
  position:fixed;inset:0;z-index:141;background:rgba(20,17,12,.45);
  opacity:0;transition:opacity .25s ease;
}
.tk-veil.tk-in{opacity:1}

/* ---- panel ---- */
.tk-panel{
  position:fixed;right:18px;bottom:18px;z-index:142;
  width:min(370px,calc(100vw - 36px));
  height:min(560px,calc(100vh - 36px));
  display:flex;flex-direction:column;
  background:var(--cream);border:1.5px solid var(--cream-deep);
  border-radius:18px;overflow:hidden;
  box-shadow:0 30px 70px -24px rgba(20,17,12,.5);
  transform:translateY(16px);opacity:0;
  transition:transform .3s var(--ease),opacity .25s ease;
}
.tk-panel.tk-in{transform:none;opacity:1}

.tk-head{
  display:flex;align-items:center;gap:10px;
  background:var(--blue);color:var(--cream);
  padding:12px 14px;flex:none;
}
.tk-head-fig{width:34px;height:auto;display:block}
.tk-head-name{font-family:var(--disp);font-weight:800;font-size:18px;line-height:1.1}
.tk-head-sub{font-size:11.5px;opacity:.75;line-height:1.2}
.tk-x{
  margin-left:auto;flex:none;width:32px;height:32px;border:0;cursor:pointer;
  background:rgba(240,235,220,.14);color:var(--cream);border-radius:10px;
  display:flex;align-items:center;justify-content:center;
}
.tk-x:hover{background:rgba(240,235,220,.26)}
.tk-x:focus-visible{outline:2px solid var(--cream);outline-offset:2px}

.tk-log{
  flex:1;overflow-y:auto;padding:14px;
  display:flex;flex-direction:column;gap:10px;
  overscroll-behavior:contain;
}
.tk-msg{
  max-width:86%;padding:10px 13px;border-radius:14px;
  font-family:var(--body);font-size:14.5px;line-height:1.5;
  white-space:pre-wrap;overflow-wrap:anywhere;
}
.tk-msg-t{align-self:flex-start;background:#fff;color:var(--ink);border:1px solid var(--cream-deep);border-bottom-left-radius:5px}
.tk-msg-u{align-self:flex-end;background:var(--blue);color:var(--cream);border-bottom-right-radius:5px}
.tk-msg-e{align-self:center;background:transparent;color:rgba(20,17,12,.62);font-size:13px;font-style:italic;text-align:center;padding:2px 8px}

.tk-typing{align-self:flex-start;display:flex;align-items:center;gap:8px;color:rgba(20,17,12,.55);font-family:var(--body);font-size:13px;padding:2px 4px}
.tk-typing i{width:6px;height:6px;border-radius:50%;background:var(--blue);opacity:.4;animation:tkDot 1.1s infinite}
.tk-typing i:nth-child(2){animation-delay:.18s}
.tk-typing i:nth-child(3){animation-delay:.36s}
@keyframes tkDot{0%,100%{opacity:.25;transform:none}45%{opacity:1;transform:translateY(-3px)}}

.tk-chips{display:flex;flex-wrap:wrap;gap:8px;padding:0 14px 6px;flex:none}
.tk-chip{
  border:1.5px solid var(--blue);background:#fff;color:var(--blue);cursor:pointer;
  font-family:var(--body);font-size:13px;font-weight:600;
  padding:7px 12px;border-radius:999px;
}
.tk-chip:hover{background:var(--blue);color:var(--cream)}

.tk-form{display:flex;gap:8px;padding:10px 14px;flex:none}
.tk-input{
  flex:1;min-width:0;border:1.5px solid var(--cream-deep);border-radius:12px;
  background:#fff;color:var(--ink);font-family:var(--body);font-size:15px;
  padding:10px 12px;
}
.tk-input:focus{outline:2px solid var(--blue);outline-offset:0;border-color:var(--blue)}
.tk-send{
  flex:none;width:44px;border:0;border-radius:12px;cursor:pointer;
  background:var(--blue);color:var(--cream);
  display:flex;align-items:center;justify-content:center;
}
.tk-send:disabled{opacity:.45;cursor:default}
.tk-send:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

.tk-foot{
  flex:none;display:flex;align-items:center;justify-content:center;gap:6px;flex-wrap:wrap;
  padding:8px 12px 11px;border-top:1px solid var(--cream-deep);
  font-family:var(--body);font-size:12.5px;color:rgba(20,17,12,.6);
}
.tk-foot a,.tk-foot button{
  border:0;background:none;padding:0;cursor:pointer;
  font-family:var(--body);font-size:12.5px;font-weight:700;
  color:var(--blue);text-decoration:underline;text-underline-offset:2px;
}
.tk-foot.tk-hot{background:#fff}
.tk-foot.tk-hot a,.tk-foot.tk-hot button{font-size:13.5px}

/* ---- mobilni: bottom sheet ---- */
@media (max-width:640px){
  .tk-panel{
    right:0;bottom:0;left:0;width:100%;
    height:min(78vh,640px);
    border-radius:18px 18px 0 0;border-left:0;border-right:0;border-bottom:0;
    transform:translateY(100%);
  }
  .tk-panel.tk-in{transform:none}
  .tk-tab{bottom:96px}
}

/* ---- reduced motion: bez animacija, sve odmah vidljivo ---- */
@media (prefers-reduced-motion:reduce){
  .tk-tab,.tk-intro,.tk-veil,.tk-panel{transition:none}
  .tk-intro-badge{animation:none}
  .tk-typing i{animation:none;opacity:.7}
}