/* ==========================================================================
   Talking-Thread — AI Concierge Chatbot Widget
   Self-contained. Reuses site design tokens (falls back to safe defaults
   if loaded on a page that doesn't define them) so it always matches the
   Talking-Thread look — never overrides any existing site style.
   ========================================================================== */

.tt-bot-root{
  --tb-ivory:var(--ivory,#F2EBDC);
  --tb-paper:var(--paper,#FBF8F1);
  --tb-ink:var(--ink,#211C15);
  --tb-ink-soft:var(--ink-soft,#55503F);
  --tb-ink-faint:var(--ink-faint,#696354);
  --tb-thread:var(--thread,#8B2E3A);
  --tb-thread-dark:var(--thread-dark,#6C232C);
  --tb-gold:var(--gold,#B08B45);
  --tb-gold-soft:var(--gold-soft,#DCC793);
  --tb-line:var(--line,rgba(33,28,21,0.16));
  --tb-white:var(--white,#FFFFFE);
  --tb-font-display:var(--font-display,"Fraunces","Georgia",serif);
  --tb-font-body:var(--font-body,"Instrument Sans",-apple-system,"Segoe UI",sans-serif);
  --tb-shadow:var(--shadow-card,0 18px 40px -22px rgba(33,28,21,.45));
  --tb-ease:var(--ease,cubic-bezier(.22,.61,.36,1));
  font-family:var(--tb-font-body);
}

/* ---------- trigger bubble ---------- */
.tt-bot-bubble{
  position:fixed;
  right:26px;
  bottom:170px;
  width:54px;
  height:54px;
  border-radius:50%;
  z-index:160;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(155deg,var(--tb-thread),var(--tb-thread-dark));
  border:2px solid var(--tb-gold-soft);
  cursor:pointer;
  box-shadow:0 10px 28px -8px rgba(33,28,21,.45),0 2px 8px rgba(33,28,21,.2);
  transition:transform .3s var(--tb-ease),box-shadow .3s var(--tb-ease),left .18s ease,top .18s ease,bottom .18s ease,right .18s ease;
  touch-action:none;
  -webkit-tap-highlight-color:transparent;
}
.tt-bot-bubble svg{width:27px;height:27px}
.tt-bot-bubble::before{
  content:"";
  position:absolute;
  inset:-6px;
  border-radius:50%;
  border:1px solid var(--tb-gold);
  opacity:.55;
  animation:tt-bot-ring 2.8s ease-out infinite;
  pointer-events:none;
}
.tt-bot-bubble:hover,.tt-bot-bubble:focus-visible{
  transform:translateY(-3px) scale(1.05);
  box-shadow:0 14px 32px -8px rgba(33,28,21,.5),0 2px 8px rgba(33,28,21,.25);
}
.tt-bot-bubble.tt-dragging{
  transition:none;
  cursor:grabbing;
  transform:scale(1.08);
  box-shadow:0 20px 40px -10px rgba(33,28,21,.55);
}
.tt-bot-bubble .tb-eye{fill:var(--tb-gold-soft);transform-box:fill-box;transform-origin:center}
.tt-bot-bubble .tb-line{stroke:var(--tb-gold-soft)}
.tt-bot-bubble:hover .tb-eye,.tt-bot-bubble:focus-visible .tb-eye{
  animation:tt-eye-look 1.4s ease-in-out infinite;
}
@keyframes tt-eye-look{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-2.4px)}
  75%{transform:translateX(2.4px)}
}
@media (prefers-reduced-motion:reduce){
  .tt-bot-bubble:hover .tb-eye,.tt-bot-bubble:focus-visible .tb-eye{animation:none}
}
.tt-bot-dot{
  position:absolute;
  top:2px;
  right:2px;
  width:13px;
  height:13px;
  border-radius:50%;
  background:#6E9B6E;
  border:2px solid var(--tb-paper);
}
.tt-bot-badge{
  position:absolute;
  top:-6px;
  right:-6px;
  min-width:20px;
  height:20px;
  padding:0 5px;
  border-radius:999px;
  background:var(--tb-gold);
  color:var(--tb-ink);
  font-size:.68rem;
  font-weight:700;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 4px 10px -2px rgba(33,28,21,.4);
}
.tt-bot-badge.tt-hidden{display:none}

@keyframes tt-bot-ring{
  0%{transform:scale(1);opacity:.5}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}

/* ---------- teaser bubble ---------- */
.tt-bot-teaser{
  position:fixed;
  z-index:159;
  max-width:220px;
  background:var(--tb-paper);
  border:1px solid var(--tb-gold-soft);
  color:var(--tb-ink);
  font-size:.82rem;
  line-height:1.45;
  padding:12px 14px;
  border-radius:14px;
  box-shadow:var(--tb-shadow);
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:opacity .35s var(--tb-ease),transform .35s var(--tb-ease);
}
.tt-bot-teaser.tt-show{opacity:1;visibility:visible;transform:translateY(0)}
.tt-bot-teaser button{
  position:absolute;
  top:-8px;
  right:-8px;
  width:20px;
  height:20px;
  border-radius:50%;
  background:var(--tb-ink);
  color:var(--tb-paper);
  border:none;
  font-size:.68rem;
  line-height:1;
  cursor:pointer;
}

/* ---------- chat panel ---------- */
.tt-bot-panel{
  position:fixed;
  z-index:161;
  width:380px;
  max-width:calc(100vw - 24px);
  height:min(560px,72vh);
  background:var(--tb-paper);
  border:1px solid var(--tb-line);
  border-radius:18px;
  box-shadow:0 30px 60px -20px rgba(33,28,21,.5);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  opacity:0;
  visibility:hidden;
  transform:translateY(16px) scale(.98);
  transition:opacity .28s var(--tb-ease),transform .28s var(--tb-ease),visibility 0s linear .28s;
}
.tt-bot-panel.tt-open{
  opacity:1;
  visibility:visible;
  transform:translateY(0) scale(1);
  transition:opacity .28s var(--tb-ease),transform .28s var(--tb-ease);
}

.tt-bot-head{
  position:relative;
  display:flex;
  align-items:center;
  gap:12px;
  padding:16px 48px 16px 16px;
  background:linear-gradient(155deg,var(--tb-thread),var(--tb-thread-dark));
  color:var(--tb-paper);
  flex:none;
}
.tt-bot-head::after{
  content:"";
  position:absolute;
  inset:8px 8px auto 8px;
  height:1px;
  background:rgba(255,255,255,0);
}
.tt-bot-avatar{
  width:38px;
  height:38px;
  border-radius:50%;
  background:rgba(255,255,255,.14);
  border:1px solid var(--tb-gold-soft);
  display:flex;
  align-items:center;
  justify-content:center;
  flex:none;
}
.tt-bot-avatar svg{width:22px;height:22px}
.tt-bot-head-text{min-width:0}
.tt-bot-head-text h3{
  margin:0;
  font-family:var(--tb-font-display);
  font-weight:600;
  font-size:1.02rem;
  letter-spacing:.01em;
}
.tt-bot-head-text p{
  margin:2px 0 0;
  font-size:.72rem;
  letter-spacing:.06em;
  text-transform:uppercase;
  opacity:.85;
}
.tt-bot-close{
  position:absolute;
  top:12px;
  right:12px;
  width:30px;
  height:30px;
  border-radius:50%;
  border:none;
  background:rgba(255,255,255,.14);
  color:var(--tb-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s;
}
.tt-bot-close:hover{background:rgba(255,255,255,.26)}
.tt-bot-close svg{width:15px;height:15px}

.tt-bot-body{
  flex:1 1 auto;
  overflow-y:auto;
  padding:16px;
  display:flex;
  flex-direction:column;
  gap:12px;
  background:
    radial-gradient(circle at 100% 0%,rgba(176,139,69,.06),transparent 55%),
    var(--tb-paper);
}
.tt-bot-body::-webkit-scrollbar{width:6px}
.tt-bot-body::-webkit-scrollbar-thumb{background:var(--tb-gold-soft);border-radius:6px}

.tt-msg{
  max-width:84%;
  padding:10px 13px;
  border-radius:14px;
  font-size:.87rem;
  line-height:1.5;
  animation:tt-msg-in .25s var(--tb-ease) both;
}
@keyframes tt-msg-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
.tt-msg-bot{
  align-self:flex-start;
  background:var(--tb-ivory);
  border:1px solid var(--tb-line);
  color:var(--tb-ink);
  border-bottom-left-radius:4px;
}
.tt-msg-user{
  align-self:flex-end;
  background:var(--tb-thread);
  color:var(--tb-paper);
  border-bottom-right-radius:4px;
}
.tt-msg a{color:inherit;text-decoration:underline;text-underline-offset:2px}
.tt-msg-bot a{color:var(--tb-thread)}

.tt-typing{
  align-self:flex-start;
  display:flex;
  gap:4px;
  padding:12px 14px;
  background:var(--tb-ivory);
  border:1px solid var(--tb-line);
  border-radius:14px;
  border-bottom-left-radius:4px;
}
.tt-typing span{
  width:6px;height:6px;border-radius:50%;
  background:var(--tb-ink-faint);
  animation:tt-typing-bounce 1.1s infinite ease-in-out;
}
.tt-typing span:nth-child(2){animation-delay:.15s}
.tt-typing span:nth-child(3){animation-delay:.3s}
@keyframes tt-typing-bounce{0%,60%,100%{transform:translateY(0);opacity:.5}30%{transform:translateY(-4px);opacity:1}}

.tt-bot-quick{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  padding:0 16px 12px;
  flex:none;
}
.tt-chip{
  border:1px solid var(--tb-gold-soft);
  background:var(--tb-paper);
  color:var(--tb-thread);
  font-size:.75rem;
  font-weight:500;
  padding:7px 12px;
  border-radius:999px;
  cursor:pointer;
  transition:background .2s,transform .2s,color .2s;
  white-space:nowrap;
}
.tt-chip:hover{background:var(--tb-thread);color:var(--tb-paper);transform:translateY(-1px)}

.tt-bot-form{
  display:flex;
  align-items:flex-end;
  gap:8px;
  padding:12px;
  border-top:1px solid var(--tb-line);
  background:var(--tb-white,var(--tb-paper));
  flex:none;
}
.tt-bot-input{
  flex:1 1 auto;
  resize:none;
  max-height:78px;
  border:1px solid var(--tb-line);
  border-radius:12px;
  padding:10px 12px;
  font-family:var(--tb-font-body);
  font-size:.86rem;
  color:var(--tb-ink);
  background:var(--tb-paper);
  line-height:1.4;
}
.tt-bot-input:focus{outline:none;border-color:var(--tb-thread)}
.tt-bot-send{
  width:40px;
  height:40px;
  border-radius:50%;
  border:none;
  flex:none;
  background:var(--tb-thread);
  color:var(--tb-paper);
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  transition:background .2s,transform .2s;
}
.tt-bot-send:hover{background:var(--tb-thread-dark);transform:translateY(-1px)}
.tt-bot-send:disabled{opacity:.45;cursor:not-allowed;transform:none}
.tt-bot-send svg{width:17px;height:17px}

.tt-bot-foot{
  text-align:center;
  font-size:.66rem;
  letter-spacing:.04em;
  color:var(--tb-ink-faint);
  padding:0 12px 10px;
  flex:none;
}

.tt-drag-hint{
  position:fixed;
  z-index:162;
  background:var(--tb-ink);
  color:var(--tb-paper);
  font-size:.72rem;
  padding:7px 12px;
  border-radius:8px;
  pointer-events:none;
  opacity:0;
  transition:opacity .25s;
  white-space:nowrap;
}
.tt-drag-hint.tt-show{opacity:1}

/* ---------- responsive ----------
   Sizes/right-offset mirror the site's existing WhatsApp float button
   at every breakpoint; only "bottom" differs, keeping the chatbot
   bubble stacked 14px directly above it. */
@media (max-width:1024px){
  .tt-bot-bubble{right:26px;bottom:242px;width:54px;height:54px}
  .tt-bot-bubble svg{width:27px;height:27px}
}
@media (max-width:768px){
  .tt-bot-bubble{right:18px;bottom:236px;width:48px;height:48px}
  .tt-bot-bubble svg{width:24px;height:24px}
}
@media (max-width:480px){
  .tt-bot-bubble{right:14px;bottom:232px;width:44px;height:44px}
  .tt-bot-bubble svg{width:22px;height:22px}
  .tt-bot-dot{width:11px;height:11px}
  .tt-bot-panel{
    width:calc(100vw - 20px);
    height:min(70vh,520px);
    border-radius:16px;
  }
  .tt-bot-head{padding:14px 46px 14px 14px}
  .tt-bot-head-text h3{font-size:.94rem}
  .tt-bot-quick{padding:0 12px 10px}
  .tt-bot-form{padding:10px}
}

@media (prefers-reduced-motion:reduce){
  .tt-bot-bubble::before{animation:none}
  .tt-msg,.tt-bot-panel,.tt-bot-teaser{transition:none;animation:none}
}