/* =============================================================
   chatbot.css — Tekeli & Associates virtual assistant widget
   Self-contained styling. Scoped under #tk-chat-widget so it can
   be dropped into any page without leaking or colliding.
   ============================================================= */

#tk-chat-widget{
  --tk-navy:#0d1b36;
  --tk-navy-soft:#132a52;
  --tk-black:#000000;
  --tk-blue:#2f6fed;
  --tk-blue-soft:#5c8bff;
  --tk-ink:#16213e;
  --tk-muted:#6b7280;
  --tk-line:rgba(11,30,61,0.08);
  --tk-bg:#ffffff;
  --tk-bubble-ai:#f3f5f9;
  --tk-bubble-user:linear-gradient(135deg,var(--tk-blue),var(--tk-blue-soft));
  --tk-radius-lg:20px;
  --tk-radius-md:14px;
  --tk-radius-sm:10px;
  --tk-shadow:0 24px 60px -12px rgba(11,30,61,0.28), 0 4px 16px rgba(11,30,61,0.08);
  --tk-shadow-soft:0 10px 30px rgba(11,30,61,0.12);
  --tk-ease:cubic-bezier(.22,1,.36,1);
  --tk-font:"DM Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;

  position:fixed;
  inset:auto 24px 24px auto;
  z-index:2147483000;
  font-family:var(--tk-font);
  color:var(--tk-ink);
}

#tk-chat-widget *{box-sizing:border-box;}

/* Hard reset against host-theme button/link styles (WordPress themes commonly
   apply global `button`/`a.button` rules with their own brand border/background
   that would otherwise leak into the widget and beat our un-flagged declarations). */
#tk-chat-widget button,
#tk-chat-widget a{
  font-family:inherit !important;
  text-shadow:none !important;
  box-shadow:none;
  letter-spacing:normal;
  -webkit-appearance:none;
  appearance:none;
}

/* ---------------- Launcher button ---------------- */

.tk-launcher{
  width:62px !important; height:62px !important; padding:0 !important; margin:0 !important;
  border-radius:50% !important;
  border:none !important; cursor:pointer;
  background:var(--tk-navy) !important;
  color:#fff !important;
  box-shadow:var(--tk-shadow-soft) !important;
  display:flex; align-items:center; justify-content:center;
  position:relative;
  transition:transform .35s var(--tk-ease), box-shadow .35s var(--tk-ease);
}
.tk-launcher:hover{transform:translateY(-3px) scale(1.04); box-shadow:var(--tk-shadow) !important;}
.tk-launcher:active{transform:translateY(-1px) scale(0.98);}
.tk-launcher svg{width:26px !important; height:26px !important; flex-shrink:0; transition:opacity .2s ease, transform .3s var(--tk-ease);}
.tk-launcher .tk-icon-close{position:absolute; opacity:0; transform:scale(.6) rotate(-45deg);}
.tk-launcher .tk-icon-chat{opacity:1; transform:scale(1) rotate(0deg);}
#tk-chat-widget.is-open .tk-launcher .tk-icon-chat{opacity:0; transform:scale(.6) rotate(45deg);}
#tk-chat-widget.is-open .tk-launcher .tk-icon-close{opacity:1; transform:scale(1) rotate(0deg);}

.tk-launcher__ring{
  position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--tk-blue-soft);
  opacity:0; pointer-events:none;
}
#tk-chat-widget.tk-attention .tk-launcher__ring{
  animation:tk-pulse 2.2s var(--tk-ease) infinite;
}
@keyframes tk-pulse{
  0%{opacity:.55; transform:scale(1);}
  100%{opacity:0; transform:scale(1.45);}
}

.tk-launcher__badge{
  position:absolute; top:-2px; right:-2px;
  width:14px; height:14px; border-radius:50%;
  background:#22c55e; border:2px solid #fff;
}

/* ---------------- Panel ---------------- */

.tk-panel{
  position:absolute; bottom:78px; right:0;
  width:388px; max-width:calc(100vw - 32px);
  height:min(640px, calc(100vh - 120px));
  display:flex; flex-direction:column;
  background:var(--tk-bg);
  border:1px solid rgba(255,255,255,0.6);
  border-radius:var(--tk-radius-lg);
  box-shadow:var(--tk-shadow);
  overflow:hidden;
  transform-origin:bottom right;
  opacity:0; transform:translateY(18px) scale(.94);
  pointer-events:none;
  transition:opacity .32s var(--tk-ease), transform .38s var(--tk-ease);
}
#tk-chat-widget.is-open .tk-panel{
  opacity:1; transform:translateY(0) scale(1);
  pointer-events:auto;
}

/* ---------------- Header ---------------- */

.tk-header{
  display:flex; align-items:center; gap:12px;
  padding:16px 18px;
  background:linear-gradient(135deg,var(--tk-navy),var(--tk-black));
  color:#fff;
  flex-shrink:0;
}
.tk-header__avatar{
  width:38px; height:38px; border-radius:50%;
  background:#fff;
  display:flex; align-items:center; justify-content:center;
  flex-shrink:0; padding:8px;
  box-shadow:0 2px 8px rgba(0,0,0,0.2);
}
.tk-header__avatar .tk-logo-img{width:100%; height:100%; object-fit:contain;}
.tk-header__text{flex:1; min-width:0;}
.tk-header__title{font-size:14.5px; font-weight:600; letter-spacing:-0.01em;}
.tk-header__status{
  font-size:12px; color:rgba(255,255,255,0.72);
  display:flex; align-items:center; gap:5px; margin-top:2px;
}
.tk-header__dot{width:6px; height:6px; border-radius:50%; background:#22c55e; flex-shrink:0;}

.tk-header__actions{display:flex; align-items:center; gap:4px;}
.tk-icon-btn{
  width:30px !important; height:30px !important; padding:0 !important; margin:0 !important;
  border-radius:9px !important; border:none !important;
  background:rgba(255,255,255,0.08) !important; color:#fff !important;
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
  cursor:pointer; transition:background .2s ease, transform .2s ease;
}
.tk-icon-btn:hover{background:rgba(255,255,255,0.18) !important; transform:scale(1.06);}
.tk-icon-btn:active{transform:scale(.94);}
.tk-icon-btn svg{width:15px !important; height:15px !important; flex-shrink:0;}

/* ---------------- Messages ---------------- */

.tk-messages{
  flex:1; overflow-y:auto; padding:18px 16px 8px;
  display:flex; flex-direction:column; gap:14px;
  scroll-behavior:smooth;
}
.tk-messages::-webkit-scrollbar{width:6px;}
.tk-messages::-webkit-scrollbar-thumb{background:rgba(11,30,61,0.15); border-radius:99px;}
.tk-messages::-webkit-scrollbar-track{background:transparent;}

.tk-row{display:flex; gap:8px; max-width:100%; opacity:0; transform:translateY(10px); animation:tk-rise .38s var(--tk-ease) forwards;}
@keyframes tk-rise{to{opacity:1; transform:translateY(0);}}

.tk-row--ai{align-self:flex-start; align-items:flex-end;}
.tk-row--user{align-self:flex-end; flex-direction:row-reverse;}
.tk-row--cards{align-self:stretch; width:100%;}

.tk-avatar{
  width:26px; height:26px; border-radius:50%; flex-shrink:0;
  background:#fff; border:1px solid var(--tk-line);
  display:flex; align-items:center; justify-content:center;
  padding:5px; margin-bottom:2px;
}
.tk-avatar .tk-logo-img{width:100%; height:100%; object-fit:contain;}

.tk-bubble-wrap{display:flex; flex-direction:column; max-width:268px;}
.tk-row--user .tk-bubble-wrap{align-items:flex-end;}

.tk-bubble{
  padding:11px 14px; font-size:14px; line-height:1.5;
  border-radius:var(--tk-radius-md);
  white-space:pre-line; word-wrap:break-word;
}
.tk-row--ai .tk-bubble{
  background:var(--tk-bubble-ai); color:var(--tk-ink);
  border-bottom-left-radius:4px;
}
.tk-row--user .tk-bubble{
  background:var(--tk-bubble-user); color:#fff;
  border-bottom-right-radius:4px;
}

.tk-timestamp{
  font-size:10.5px; color:var(--tk-muted); margin-bottom:4px; padding:0 2px;
}

/* Typing indicator */
.tk-typing{
  display:inline-flex; align-items:center; gap:4px;
  padding:13px 16px; background:var(--tk-bubble-ai);
  border-radius:var(--tk-radius-md); border-bottom-left-radius:4px;
}
.tk-typing span{
  width:6px; height:6px; border-radius:50%; background:var(--tk-muted);
  animation:tk-bounce 1.2s ease-in-out infinite;
}
.tk-typing span:nth-child(2){animation-delay:.15s;}
.tk-typing span:nth-child(3){animation-delay:.3s;}
@keyframes tk-bounce{
  0%,60%,100%{transform:translateY(0); opacity:.5;}
  30%{transform:translateY(-4px); opacity:1;}
}

/* CTA button inside a message */
.tk-cta{
  display:inline-flex; align-items:center; gap:7px; align-self:flex-start;
  margin-top:10px !important; padding:10px 18px !important;
  background:var(--tk-navy) !important;
  color:#fff !important; border:1px solid var(--tk-navy) !important; border-radius:100px !important;
  font-size:14px !important; line-height:1.2 !important; font-weight:400 !important; letter-spacing:0.04em !important; text-transform:uppercase;
  cursor:pointer; text-decoration:none !important;
  box-shadow:0 6px 16px rgba(13,27,54,0.28) !important;
  transition:transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), background .22s var(--tk-ease), color .22s var(--tk-ease);
  animation:tk-rise .4s var(--tk-ease) forwards;
}
.tk-cta:hover{
  background:#fff !important; color:var(--tk-navy) !important;
  transform:translateY(-2px) scale(1.02);
  box-shadow:0 10px 22px rgba(13,27,54,0.16) !important;
}
.tk-cta:active{transform:translateY(0) scale(.98);}
.tk-cta svg{width:13px !important; height:13px !important; flex-shrink:0; transition:transform .22s var(--tk-ease);}
.tk-cta:hover svg{transform:translateX(2px);}

/* ---------------- Suggestion cards ---------------- */

.tk-cards{
  display:flex; flex-direction:column; align-items:flex-end; gap:7px;
  margin-top:2px; width:100%;
}
.tk-card{
  display:flex; flex-direction:row; align-items:center; gap:8px;
  padding:8px 13px !important; margin:0 !important; background:#fff !important;
  min-width:44%; max-width:100%;
  border:1px solid var(--tk-line) !important; border-radius:var(--tk-radius-sm) !important;
  cursor:pointer; text-align:left;
  opacity:0; transform:translateY(10px) scale(.97);
  animation:tk-card-in .42s var(--tk-ease) forwards;
  transition:transform .22s var(--tk-ease), box-shadow .22s var(--tk-ease), border-color .22s var(--tk-ease);
}
.tk-card:hover{
  transform:translateY(-2px);
  box-shadow:0 12px 24px -8px rgba(11,30,61,0.18) !important;
  border-color:var(--tk-navy) !important;
}
.tk-card:active{transform:translateY(-1px) scale(.99);}
.tk-card__icon{font-size:16px; line-height:1; flex-shrink:0;}
.tk-card__label{font-size:12px; font-weight:600; color:var(--tk-ink) !important; line-height:1.3; white-space:nowrap;}
@keyframes tk-card-in{to{opacity:1; transform:translateY(0) scale(1);}}

/* ---------------- Composer ---------------- */

.tk-composer{
  display:flex; align-items:flex-end; gap:8px;
  padding:12px 14px; border-top:1px solid var(--tk-line);
  background:var(--tk-bg); flex-shrink:0;
}
.tk-composer__field{
  flex:1; resize:none; border:1px solid var(--tk-line) !important;
  border-radius:var(--tk-radius-sm) !important; padding:10px 12px !important; margin:0 !important;
  font-size:14px; font-family:inherit !important; color:var(--tk-ink) !important;
  background:#fff !important; max-height:90px; line-height:1.4;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.tk-composer__field:focus{
  outline:none !important; border-color:var(--tk-blue) !important;
  box-shadow:0 0 0 3px rgba(47,111,237,0.14) !important;
}
.tk-composer__field::placeholder{color:var(--tk-muted); opacity:1;}

.tk-send{
  width:38px !important; height:38px !important; padding:0 !important; margin:0 !important;
  border-radius:11px !important; border:none !important; flex-shrink:0;
  background:linear-gradient(135deg,var(--tk-navy),var(--tk-blue)) !important;
  color:#fff !important; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:transform .2s var(--tk-ease), opacity .2s ease;
}
.tk-send svg{width:16px !important; height:16px !important; flex-shrink:0;}
.tk-send:hover{transform:scale(1.06);}
.tk-send:active{transform:scale(.94);}
.tk-send:disabled{opacity:.4; cursor:default; transform:none;}

.tk-footnote{
  font-size:10.5px; color:var(--tk-muted); text-align:center;
  padding:6px 14px 12px; flex-shrink:0;
}

/* ---------------- Swipe handle (mobile) ---------------- */

.tk-handle{
  display:none; width:36px; height:4px; border-radius:99px;
  background:rgba(255,255,255,0.4); margin:8px auto -4px;
}

/* ---------------- Responsive ---------------- */

@media (max-width:480px){
  #tk-chat-widget{inset:auto 12px 12px auto;}
  .tk-panel{
    position:fixed; right:0; left:0; bottom:0; margin:0 auto;
    width:100%; max-width:100%; height:88vh; max-height:88vh;
    border-radius:var(--tk-radius-lg) var(--tk-radius-lg) 0 0;
    transform-origin:bottom center;
  }
  #tk-chat-widget.is-open .tk-panel{transform:translateY(0) scale(1);}
  .tk-panel:not(.is-open){transform:translateY(100%);}
  .tk-handle{display:block;}
}

@media (prefers-reduced-motion:reduce){
  #tk-chat-widget *{animation-duration:.01ms !important; transition-duration:.01ms !important;}
}