/* Product chat widget — self-contained, uses the site's design tokens from
   index.css / styles.css where they exist and falls back where they don't, so
   this file can be dropped onto any page regardless of which stylesheet it
   already loads. All selectors are namespaced .tt-chat* to avoid collisions. */

.tt-chat-launch{
  position:fixed; right:22px; bottom:22px; z-index:950;
  display:flex; align-items:center; gap:9px;
  height:52px; padding:0 20px 0 17px; border:0; cursor:pointer;
  border-radius:26px;
  background:var(--tiger, #ff7a1a); color:#fff;
  font-family:var(--ff-body, "Geist", Arial, sans-serif);
  font-size:.94rem; font-weight:650; letter-spacing:-.01em;
  box-shadow:0 6px 24px rgba(255,122,26,.42), 0 2px 6px rgba(12,14,18,.18);
  transition:transform .18s ease, box-shadow .18s ease;
}
.tt-chat-launch:hover{ transform:translateY(-2px); box-shadow:0 10px 30px rgba(255,122,26,.5); }
.tt-chat-launch svg{ width:19px; height:19px; flex:none; }
.tt-chat-launch[hidden]{ display:none; }

.tt-chat-panel{
  position:fixed; right:22px; bottom:22px; z-index:960;
  display:flex; flex-direction:column;
  width:min(400px, calc(100vw - 32px));
  height:min(600px, calc(100vh - 44px));
  background:var(--paper, #fff);
  border:1px solid var(--line, rgba(12,14,18,.10));
  border-radius:var(--radius, 10px);
  box-shadow:0 20px 60px rgba(12,14,18,.26);
  font-family:var(--ff-body, "Geist", Arial, sans-serif);
  overflow:hidden;
}
.tt-chat-panel[hidden]{ display:none; }

.tt-chat-head{
  display:flex; align-items:center; gap:10px;
  padding:14px 14px 14px 17px;
  background:var(--ink, #0c0e12); color:var(--txt-inv, #eef0f4);
  flex:none;
}
.tt-chat-head b{ font-size:.95rem; font-weight:700; letter-spacing:-.01em; }
.tt-chat-head span{ font-size:.74rem; color:var(--txt-inv-soft, #9aa3b2); display:block; margin-top:1px; }
.tt-chat-head .tt-chat-x{
  margin-left:auto; background:none; border:0; cursor:pointer;
  color:var(--txt-inv-soft, #9aa3b2); font-size:1.5rem; line-height:1;
  padding:0 4px; border-radius:6px;
}
.tt-chat-head .tt-chat-x:hover{ color:#fff; }

.tt-chat-log{
  flex:1; overflow-y:auto; padding:16px;
  display:flex; flex-direction:column; gap:12px;
  background:var(--paper-2, #f5f6f8);
}
.tt-chat-msg{
  max-width:88%; padding:10px 13px; border-radius:12px;
  font-size:.9rem; line-height:1.55; white-space:pre-wrap; word-wrap:break-word;
}
.tt-chat-msg.bot{
  align-self:flex-start; background:var(--paper, #fff);
  border:1px solid var(--line, rgba(12,14,18,.10));
  color:var(--txt, #15171c); border-bottom-left-radius:4px;
}
.tt-chat-msg.me{
  align-self:flex-end; background:var(--ink, #0c0e12);
  color:var(--txt-inv, #eef0f4); border-bottom-right-radius:4px;
}
.tt-chat-msg.err{
  align-self:stretch; max-width:100%; text-align:center;
  background:none; border:0; color:var(--txt-soft, #5d6471); font-size:.82rem;
}
.tt-chat-msg a{ color:var(--tiger-deep, #e05f00); text-decoration:underline; }
.tt-chat-msg.me a{ color:var(--eye, #ffb37a); }

/* typing indicator */
.tt-chat-dots{ display:inline-flex; gap:4px; padding:3px 0; }
.tt-chat-dots i{
  width:6px; height:6px; border-radius:50%;
  background:var(--txt-soft, #5d6471); opacity:.45;
  animation:tt-chat-bounce 1.25s infinite;
}
.tt-chat-dots i:nth-child(2){ animation-delay:.16s }
.tt-chat-dots i:nth-child(3){ animation-delay:.32s }
@keyframes tt-chat-bounce{ 0%,70%,100%{transform:translateY(0);opacity:.35} 35%{transform:translateY(-4px);opacity:.9} }
@media (prefers-reduced-motion:reduce){
  .tt-chat-dots i{ animation:none }
  .tt-chat-launch{ transition:none }
}

.tt-chat-foot{
  flex:none; border-top:1px solid var(--line, rgba(12,14,18,.10));
  background:var(--paper, #fff); padding:10px;
}
.tt-chat-form{ display:flex; gap:8px; align-items:flex-end; }
.tt-chat-form textarea{
  flex:1; resize:none; border:1px solid var(--line, rgba(12,14,18,.10));
  border-radius:9px; padding:9px 11px; max-height:96px;
  font-family:inherit; font-size:.88rem; line-height:1.45; color:var(--txt, #15171c);
  background:var(--paper, #fff);
}
.tt-chat-form textarea:focus{ outline:2px solid var(--tiger, #ff7a1a); outline-offset:-1px; }
.tt-chat-form button{
  flex:none; width:38px; height:38px; border:0; border-radius:9px; cursor:pointer;
  background:var(--tiger, #ff7a1a); color:#fff; display:grid; place-items:center;
}
.tt-chat-form button:disabled{ opacity:.4; cursor:not-allowed; }
.tt-chat-form button svg{ width:17px; height:17px; }
.tt-chat-note{
  margin-top:7px; font-size:.68rem; line-height:1.45;
  color:var(--txt-soft, #5d6471); text-align:center;
}
.tt-chat-note a{ color:inherit; text-decoration:underline; }

/* Phones: 600px matches the breakpoint the site's own stylesheets use.
   The launcher collapses from a labelled pill to a circular icon — the label
   is what makes it wide, so hiding it is the whole fix. The button keeps its
   aria-label, so screen readers are unaffected by dropping the visible text,
   and 52px stays above the 44px minimum touch target. */
@media (max-width:600px){
  /* Full screen: no margin, no radius, no shadow — it is the whole viewport.
     100dvh (with a vh fallback) rather than 100vh, because on iOS Safari 100vh
     includes the area behind the address bar, which pushes the text input off
     the bottom of the screen. env(safe-area-inset-*) keeps the header clear of
     the notch and the input clear of the home indicator. */
  .tt-chat-panel{
    /* width/height:auto so the inset:0 edges decide the size. `width:100%`
       resolves against the viewport *including* any scrollbar, which left a
       gap down the right-hand side; letting left:0/right:0 do the work is
       correct whether or not a scrollbar is present. */
    inset:0; width:auto; max-width:none; height:auto;
    min-height:100vh; min-height:100dvh;
    border:0; border-radius:0; box-shadow:none;
  }
  .tt-chat-head{ padding-top:calc(14px + env(safe-area-inset-top, 0px)); }
  /* The X is the only way out on mobile, so give it a real touch target. */
  .tt-chat-head .tt-chat-x{
    width:44px; height:44px; margin-right:-6px;
    display:grid; place-items:center; font-size:1.75rem;
  }
  .tt-chat-foot{ padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px)); }
  .tt-chat-msg{ max-width:92%; font-size:.94rem; }
  .tt-chat-form textarea{ font-size:1rem; }   /* >=16px stops iOS zooming on focus */

  /* Stop the page behind scrolling / rubber-banding while the panel is open.
     JS toggles this class unconditionally; only mobile acts on it. */
  body.tt-chat-open{ overflow:hidden; }

  .tt-chat-launch{
    /* More clearance than desktop, not less: on mobile the bottom of the layout
       viewport sits behind the browser's own toolbar, so a small offset reads as
       the bubble touching the edge. env(safe-area-inset-bottom) adds the home
       indicator area on notched phones on top of that. */
    right:18px;
    bottom:calc(22px + env(safe-area-inset-bottom, 0px));
    width:52px; height:52px; padding:0; gap:0;
    border-radius:50%; justify-content:center;
  }
  .tt-chat-launch span{ display:none; }
  .tt-chat-launch svg{ width:23px; height:23px; }

  /* Anchoring the bubble on mobile, which took three attempts — the notes are
     here so nobody re-treads them:
       * `bottom: 22px` anchors to the LAYOUT viewport, which mobile Chrome
         sizes to the tallest case (URL bar hidden). With the bar showing, the
         bottom of that viewport is off-screen and the button gets clipped.
       * `svh` is the stable small-viewport height, so it never clips — but it
         is stable in the wrong way: the gap grows to ~78px once the bar hides,
         which reads as the button jumping up the screen.
       * Correcting from JS via the VisualViewport API gives a constant gap but
         the browser only reports the new size once the toolbar animation
         settles, so the button visibly slid a frame behind the scroll.
     `dvh` is the dynamic viewport height — the viewport as it currently is —
     so `top: 100dvh - <button + gap>` yields the SAME 22px gap in both states.
     Browsers update dvh in a step rather than animating it, so there may be one
     small adjustment mid-transition, but the resting position never drifts.
     Keep the `bottom` rule above as the pre-dvh fallback. */
  @supports (height: 100dvh) {
    .tt-chat-launch{
      top: calc(100dvh - 52px - 22px - env(safe-area-inset-bottom, 0px));
      bottom: auto;
    }
  }
}