/* =========================================================================
   Trend Street — Site Assistant (chat window, bottom-right corner)
   ========================================================================= */
.ts-chat{
  --c-blue:var(--ts-blue,#263d32);--c-navy:var(--ts-navy,#242424);
  --c-line:var(--ts-line,#e2ddd3);--c-muted:var(--ts-muted,#6b6a64);
  position:fixed;right:20px;bottom:20px;z-index:350;
  display:flex;flex-direction:column;align-items:flex-end;gap:12px;
  font-family:var(--ts-font-body,system-ui,sans-serif)
}
.ts-chat [hidden]{display:none!important}

/* launcher */
.ts-chat-launch{
  width:58px;height:58px;border-radius:50%;border:0;cursor:pointer;
  background:var(--c-blue);color:#fff;display:flex;align-items:center;justify-content:center;
  box-shadow:0 12px 28px rgba(38,61,50,.38);transition:transform .2s ease,background .2s ease
}
.ts-chat-launch:hover{transform:translateY(-2px);background:var(--ts-blue-dark,#1c2e25)}
.ts-chat-launch:focus-visible,.ts-chat button:focus-visible,.ts-chat input:focus-visible,.ts-chat textarea:focus-visible{outline:3px solid #d6d0c5;outline-offset:2px}
.ts-chat.is-open .ts-chat-launch svg{display:none}
.ts-chat.is-open .ts-chat-launch::before{content:"×";font-size:30px;line-height:1}

/* teaser bubble */
.ts-chat-teaser{
  border:1px solid var(--c-line);background:#fff;color:var(--c-navy);font:inherit;font-size:14px;font-weight:600;
  padding:11px 16px;border-radius:14px 14px 4px 14px;cursor:pointer;
  box-shadow:0 10px 26px rgba(36,36,36,.14);animation:tsChatPop .35s cubic-bezier(.2,.7,.2,1) both
}

/* panel */
.ts-chat-panel{
  width:min(370px,calc(100vw - 32px));height:min(560px,calc(100vh - 120px));
  background:#fff;border:1px solid var(--c-line);border-radius:18px;overflow:hidden;
  display:flex;flex-direction:column;box-shadow:0 24px 60px rgba(36,36,36,.24);
  opacity:0;transform:translateY(14px) scale(.98);transform-origin:bottom right;
  transition:opacity .22s ease,transform .22s ease
}
.ts-chat.is-open .ts-chat-panel{opacity:1;transform:none}

.ts-chat-head{display:flex;align-items:center;gap:11px;padding:14px 16px;background:var(--c-navy);color:#fff}
.ts-chat-avatar{
  flex:0 0 38px;height:38px;border-radius:50%;background:var(--c-blue);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-size:13px;letter-spacing:.02em
}
.ts-chat-titles{flex:1;min-width:0;display:flex;flex-direction:column;line-height:1.25}
.ts-chat-titles strong{font-size:15px;color:#fff}
.ts-chat-titles small{font-size:12px;color:#d0cec9}
.ts-chat-titles small::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#34d399;margin-right:6px;vertical-align:1px}
.ts-chat-close{background:none;border:0;color:#fff;font-size:26px;line-height:1;cursor:pointer;padding:2px 6px;border-radius:8px}
.ts-chat-close:hover{background:rgba(255,255,255,.12)}

.ts-chat-log{flex:1;overflow-y:auto;padding:16px;display:flex;flex-direction:column;gap:10px;background:#f7f5f0;scroll-behavior:smooth}
.ts-msg{max-width:86%;padding:10px 13px;border-radius:14px;font-size:14px;line-height:1.5;animation:tsChatPop .25s ease both}
.ts-msg p{margin:0;color:inherit;font-size:inherit}
.ts-msg.is-bot{align-self:flex-start;background:#fff;border:1px solid var(--c-line);color:var(--c-navy);border-bottom-left-radius:4px}
.ts-msg.is-me{align-self:flex-end;background:var(--c-blue);color:#fff;border-bottom-right-radius:4px}
.ts-msg-link{display:inline-block;margin-top:7px;font-weight:700;font-size:13px;color:var(--c-blue);text-decoration:none}
.ts-msg-link:hover{text-decoration:underline}

.ts-msg.is-typing{display:flex;gap:4px;padding:13px 14px}
.ts-msg.is-typing span{width:7px;height:7px;border-radius:50%;background:#bab7b1;animation:tsChatDot 1s infinite ease-in-out}
.ts-msg.is-typing span:nth-child(2){animation-delay:.15s}
.ts-msg.is-typing span:nth-child(3){animation-delay:.3s}

.ts-chat-chips{display:flex;gap:7px;overflow-x:auto;padding:10px 12px;border-top:1px solid var(--c-line);background:#fff;scrollbar-width:none}
.ts-chat-chips::-webkit-scrollbar{display:none}
.ts-chat-chip{
  flex:0 0 auto;border:1px solid var(--c-line);background:#fff;color:var(--c-navy);font:inherit;
  font-size:12.5px;font-weight:600;padding:7px 12px;border-radius:999px;cursor:pointer;white-space:nowrap;
  transition:border-color .15s,background .15s
}
.ts-chat-chip:hover{border-color:var(--c-blue);background:#f8f7f5}
.ts-chat-chip.is-primary{background:var(--c-blue);border-color:var(--c-blue);color:#fff}
.ts-chat-chip.is-primary:hover{background:var(--ts-blue-dark,#1c2e25)}

.ts-chat-input{display:flex;gap:8px;padding:10px 12px;background:#fff;margin:0}
.ts-chat-input input{
  flex:1;min-width:0;border:1px solid var(--c-line);border-radius:11px;padding:10px 12px;font:inherit;font-size:14px;color:var(--c-navy);background:#fff
}
.ts-chat-input button{
  flex:0 0 42px;height:42px;border:0;border-radius:11px;background:var(--c-blue);color:#fff;font-size:16px;cursor:pointer
}
.ts-chat-note{margin:0;padding:0 12px 10px;background:#fff;font-size:11px;color:var(--c-muted);text-align:center}

.ts-chat-leave{display:flex;flex-direction:column;gap:7px;margin-top:9px}
.ts-chat-leave input,.ts-chat-leave textarea{
  width:100%;border:1px solid var(--c-line);border-radius:9px;padding:8px 10px;font:inherit;font-size:13.5px;color:var(--c-navy);resize:vertical;background:#fff
}
.ts-chat-leave button{border:0;border-radius:9px;background:var(--c-blue);color:#fff;font:inherit;font-weight:700;font-size:13.5px;padding:9px;cursor:pointer}
.ts-chat-leave button:disabled{opacity:.6;cursor:wait}
.ts-chat .ts-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}

@keyframes tsChatPop{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes tsChatDot{0%,80%,100%{transform:translateY(0);opacity:.5}40%{transform:translateY(-4px);opacity:1}}

/* Mobile: the open panel fills the width. */
@media (max-width:600px){
  .ts-chat{right:14px;bottom:14px}
  .ts-chat-launch{width:52px;height:52px}
  .ts-chat.is-open{left:10px;right:10px;bottom:10px}
  .ts-chat.is-open .ts-chat-panel{width:100%;height:calc(100vh - 90px);height:calc(100dvh - 90px)}
  .ts-chat.is-open .ts-chat-launch{display:none}
}
@media (prefers-reduced-motion:reduce){
  .ts-chat *{animation:none!important;transition:none!important}
}
@media print{.ts-chat{display:none}}