/* TADApix chat widget — dependency-free, scoped under #tadapix-chat-widget to
   avoid colliding with Elementor/theme styles on the site's custom templates. */
#tadapix-chat-widget {
  position: fixed;
  bottom: 24px;
  right: 24px;
  z-index: 999999;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}

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

#tadapix-chat-bubble {
  width: 60px;
  height: 60px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  overflow: visible;
  transition: transform 0.15s ease;
}
#tadapix-chat-bubble:hover { transform: scale(1.06); }

/* Toucan badge: a colored circle "frame" with the mascot headshot layered on
   top, sized and positioned so the beak and top hat poke past the circle's
   rim rather than being clipped by it. Reused at different sizes (bubble vs.
   header) via a modifier class + percentage-based image sizing, so the
   poke-past-the-rim proportions stay consistent at any size. */
.tadapix-toucan-badge {
  position: relative;
  flex-shrink: 0;
  display: block;
}
.tadapix-toucan-disc {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: #1B3A4B;
  border: 3px solid #F1BA53;
  z-index: 1;
  transition: transform 0.3s ease, background-color 0.3s ease;
}
/* while the chat is open, the vacated bubble circle collapses to a small
   solid gold dot at half size (click target to reopen) */
#tadapix-chat-widget.mini .tadapix-toucan-badge--bubble .tadapix-toucan-disc {
  transform: scale(0.5);
  background: #F1BA53;
}
/* Circular mask for the base image. Uses clip-path (not a smaller inset box)
   so its containing block stays the same size as the poke layer's — an
   inset box would shift what the poke layer's percentage offsets resolve
   against and knock the two layers out of alignment. The radius is pulled
   in by the border width so the mask stops at the INNER dark circle — the
   gold ring stays a clean border the toucan never overlaps — and this is
   also what keeps the wing/body neatly framed instead of poking out. */
.tadapix-toucan-clip {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  clip-path: circle(calc(50% - 3px) at 50% 50%);
  z-index: 2;
}
.tadapix-toucan-img {
  position: absolute;
  width: 167%;
  max-width: none;
  left: -42%;
  top: -34%;
  pointer-events: none;
}
/* The poke layer sits above the clip mask, unclipped — it's pre-masked (see
   toucan-badge-poke.png) down to just the beak + hat, so only those bits
   show past the circle's rim. */
.tadapix-toucan-img--poke {
  z-index: 3;
}
/* Lower beak layer — pixel-cut from the same artwork (toucan-jaw.png), so
   at rest it sits exactly where it was removed from the other two layers.
   transform-origin = the mouth-corner hinge (160,126 in the 300x236 image). */
.tadapix-toucan-jaw {
  z-index: 3;
  transform-origin: 53.3% 53.4%;
}
/* Chatter while a teaser bubble is up — negative rotation swings the beak
   tip (left of the hinge) downward. Bubble icon only; the header portrait
   is mirrored and stays still. */
#tadapix-chat-widget.teasing .tadapix-toucan-badge--bubble .tadapix-toucan-jaw {
  animation: tadapix-flap 0.11s ease-in-out infinite alternate;
}
@keyframes tadapix-flap {
  from { transform: rotate(0deg); }
  to   { transform: rotate(-8deg); }
}
/* Header (mirrored) flap — runs while a reply is typing out. Keyframes must
   carry the same translateX/scaleX terms as the header jaw's resting
   transform, since `animation` replaces the whole transform. */
#tadapix-chat-widget.answering .tadapix-toucan-badge--header .tadapix-toucan-jaw {
  animation: tadapix-flap-mirrored 0.11s ease-in-out infinite alternate;
}
@keyframes tadapix-flap-mirrored {
  from { transform: translateX(-6.6%) scaleX(-1) rotate(0deg); }
  to   { transform: translateX(-6.6%) scaleX(-1) rotate(-8deg); }
}
/* The header portrait faces the opposite way from the bubble icon — mirror
   both layers, and shift left so the beak pokes out to the right by roughly
   the same amount it pokes left on the (unflipped) bubble icon. */
.tadapix-toucan-badge--header .tadapix-toucan-img {
  transform: scaleX(-1);
  left: -25%;
}

/* ── Open/close transition (ported from the sandbox, Sam-tuned timings:
   dive 0.42s, rise/emerge 0.8s) ──────────────────────────────────────────
   stage = static mask surface; birdbox = layered bird (steady state);
   wholebox = single flattened sprite, shown only during transitions and
   animated as one unit with its pivot at the circle center. */
/* z-index 2 keeps the stage above the disc (z1) — the animated wholebox
   forms its own stacking context via its transform, so without this it
   paints BEHIND the circle for the whole transition */
.tadapix-toucan-stage { position: absolute; inset: 0; z-index: 2; }
.tadapix-toucan-birdbox { position: absolute; inset: 0; }
.tadapix-toucan-wholebox {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  display: none;
}
.tadapix-toucan-whole {
  position: absolute;
  width: 167%;
  max-width: none;
  left: -42%;
  top: -34%;
  pointer-events: none;
}
.tadapix-toucan-badge--header .tadapix-toucan-whole { transform: scaleX(-1); left: -25%; }
.tadapix-toucan-badge.transit .tadapix-toucan-birdbox { visibility: hidden; }
.tadapix-toucan-badge.transit .tadapix-toucan-wholebox { display: block; }

/* transition mask: open on top (hat/beak overflow freely), clipped along
   the gold ring's inner LOWER arc. Element-px paths per badge size. */
.tadapix-toucan-badge--bubble .tadapix-toucan-stage.masked {
  clip-path: path('M -200,-200 L 260,-200 L 260,30 L 57,30 A 27,27 0 0 1 3,30 L -200,30 Z');
}
.tadapix-toucan-badge--header .tadapix-toucan-stage.masked {
  clip-path: path('M -200,-200 L 280,-200 L 280,40 L 77,40 A 37,37 0 0 1 3,40 L -200,40 Z');
}

.tadapix-toucan-wholebox.dive { animation: tdx-dive 0.42s ease-in forwards; }
.tadapix-toucan-wholebox.hidden-bird { transform: translateY(130%) scale(0.5); opacity: 0; }
.tadapix-toucan-wholebox.emerge { animation: tdx-emerge 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }
.tadapix-toucan-wholebox.rise { animation: tdx-emerge 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) both; }

@keyframes tdx-dive {
  0%   { transform: none; }
  25%  { transform: rotate(-9deg) translateY(-3%) scale(0.98); } /* head tilts up */
  60%  { transform: rotate(2deg) translateY(40%) scale(0.72); }  /* shrinks early so the beak tucks inside the ring */
  100% { transform: rotate(6deg) translateY(125%) scale(0.5); }
}
@keyframes tdx-emerge {
  0%   { transform: rotate(6deg) translateY(118%) scale(0.55); }
  60%  { transform: rotate(-2deg) translateY(-3%) scale(1.02); }
  100% { transform: none; }
}
.tadapix-toucan-badge--bubble {
  width: 60px;
  height: 60px;
}
.tadapix-toucan-badge--bubble .tadapix-toucan-disc {
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25);
}
.tadapix-toucan-badge--header {
  width: 80px;
  height: 80px;
  margin-top: -40px; /* medallion straddles the panel's top edge, half above */
}
/* Header jaw alignment: the jaw's transform-origin is its flap hinge (53.3%),
   so a bare scaleX(-1) mirrors it around that axis instead of the image
   center like the other layers — which is what offset the lower beak. The
   translateX(-6.6%) (= 2 x the 3.3% origin offset) puts the mirrored jaw
   back where the other mirrored layers are. */
.tadapix-toucan-badge--header .tadapix-toucan-jaw {
  transform: translateX(-6.6%) scaleX(-1);
}

#tadapix-chat-panel {
  display: none;
  flex-direction: column;
  position: absolute;
  bottom: 76px;
  right: 0;
  width: 360px;
  max-width: calc(100vw - 32px);
  height: 500px;
  max-height: calc(100vh - 140px);
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.28);
  /* overflow stays visible so the header's toucan medallion can poke above
     the panel's top edge; the rounded corners are re-applied per-child
     (header top, form bottom) since the panel no longer clips them. */
  overflow: visible;
  overscroll-behavior: contain;
}
#tadapix-chat-widget.open #tadapix-chat-panel {
  display: flex;
  transform-origin: 100% 100%;
  animation: tdx-panel-grow 0.32s cubic-bezier(0.34, 1.4, 0.64, 1) both;
}
#tadapix-chat-panel.closing {
  display: flex;
  transform-origin: 100% 100%;
  animation: tdx-panel-shrink 0.26s ease-in both;
}
@keyframes tdx-panel-grow {
  0%   { transform: scale(0.08); opacity: 0.3; }
  100% { transform: none; opacity: 1; }
}
@keyframes tdx-panel-shrink {
  0%   { transform: none; opacity: 1; }
  100% { transform: scale(0.08); opacity: 0; }
}

/* Portrait-style header: big centered toucan badge with the title beneath,
   close button pinned to the corner. */
#tadapix-chat-header {
  background: #1B3A4B;
  color: #fff;
  padding: 0 16px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 8px;
  position: relative;
  flex-shrink: 0;
  border-radius: 12px 12px 0 0;
}
#tadapix-chat-header strong { font-size: 15px; }
#tadapix-chat-close {
  background: none; border: none; color: #fff; font-size: 20px; cursor: pointer;
  line-height: 1; padding: 4px; opacity: 0.8;
  position: absolute;
  top: 8px;
  right: 10px;
}
#tadapix-chat-close:hover { opacity: 1; }

/* Idle teaser speech bubble — only shown while the widget is closed */
#tadapix-chat-teaser {
  position: absolute;
  right: 90px;
  bottom: 48px;
  max-width: 190px;
  background: #fff;
  color: #1B3A4B;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.3;
  box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
  opacity: 0;
  transform: translateY(6px) scale(0.95);
  transform-origin: right bottom;
  transition: opacity 0.25s ease, transform 0.25s ease;
  pointer-events: none;
  /* short lines hug their text; long ones wrap inside max-width */
  white-space: normal;
  width: max-content;
  text-align: center;
}
/* Pointer aims down-right toward the toucan now that the bubble floats up
   and away from it. */
#tadapix-chat-teaser::after {
  content: "";
  position: absolute;
  bottom: -6px;
  right: 12px;
  border-width: 6px 6px 0 6px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
}
#tadapix-chat-teaser.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  animation: tadapix-teaser-pop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Grow-then-shake entrance so a new line actually catches the eye instead of
   just fading in. transform-origin stays at the bubble's pointer (right
   edge) so the grow/shake reads as coming from the mascot, not the corner. */
@keyframes tadapix-teaser-pop {
  0%   { opacity: 0; transform: translateY(6px) scale(0.4); }
  55%  { opacity: 1; transform: translateY(0) scale(1.08) rotate(0deg); }
  65%  { transform: scale(1.03) rotate(-2.5deg); }
  75%  { transform: scale(1.03) rotate(2deg); }
  85%  { transform: scale(1.01) rotate(-1deg); }
  95%  { transform: scale(1) rotate(0.5deg); }
  100% { transform: scale(1) rotate(0deg); }
}
#tadapix-chat-widget.open #tadapix-chat-teaser { display: none; }

/* The site's reCAPTCHA badge (contact form popup) defaults to bottom-right,
   where it collides with the toucan chat bubble — park it bottom-left.
   This stylesheet loads sitewide, so the rule applies everywhere. */
.grecaptcha-badge {
  left: 8px !important;
  right: auto !important;
}

#tadapix-chat-messages {
  flex: 1;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 14px 16px;
  background: #f7f8f9;
}

.tadapix-chat-msg {
  max-width: 85%;
  margin-bottom: 10px;
  padding: 9px 13px;
  border-radius: 14px;
  font-size: 14px;
  line-height: 1.45;
  white-space: pre-wrap;
  word-wrap: break-word;
}
.tadapix-chat-msg.bot {
  background: #fff;
  border: 1px solid #e6e8eb;
  color: #1B3A4B;
  border-bottom-left-radius: 4px;
}
.tadapix-chat-msg.user {
  background: #1B3A4B;
  color: #fff;
  margin-left: auto;
  border-bottom-right-radius: 4px;
}
.tadapix-chat-msg a { color: inherit; text-decoration: underline; }
.tadapix-chat-msg.bot a { color: #1a73e8; }
.tadapix-chat-msg.bot strong { font-weight: 700; }

.tadapix-chat-video-card {
  max-width: 85%;
  margin: -2px 0 12px;
  background: #fff;
  border: 1px solid #e6e8eb;
  border-radius: 10px;
  overflow: hidden;
}

.tadapix-chat-video-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background-size: cover;
  background-position: center;
  border: none;
  padding: 0;
  cursor: pointer;
  position: relative;
}
.tadapix-chat-video-thumb::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.15);
  transition: background 0.15s ease;
}
.tadapix-chat-video-thumb:hover::after { background: rgba(0, 0, 0, 0.05); }

.tadapix-chat-play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.65);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  z-index: 1;
}

.tadapix-chat-video-embed {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  border: none;
}

/* Compact playback bar below the video — replaces YouTube's on-video
   controls (controls=0), which smothered the picture at this frame size. */
.tadapix-chat-video-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  background: #1B3A4B;
}
/* !important guards: the theme's global button styles were washing these
   out (icons only visible on hover) */
.tadapix-chat-video-btn {
  background: none !important;
  border: none !important;
  color: #fff !important;
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px !important;
  display: inline-flex;
  align-items: center;
  opacity: 1 !important;
}
.tadapix-chat-video-btn svg { display: block; }
.tadapix-chat-video-btn:hover { opacity: 0.75 !important; }
.tadapix-chat-video-vol {
  flex: 1;
  height: 4px;
  accent-color: #F1BA53;
  cursor: pointer;
}

.tadapix-chat-video-title {
  padding: 8px 12px 0;
  font-size: 13px;
  font-weight: 600;
  color: #1B3A4B;
}

.tadapix-chat-video-link {
  display: block;
  padding: 4px 12px 10px;
  font-size: 13px;
  color: #1B7A8B;
  text-decoration: none;
}
.tadapix-chat-video-link:hover { text-decoration: underline; }

/* Gold quote-form CTA the bot can drop into the conversation */
.tadapix-chat-quote-btn {
  display: block;
  margin: 2px 0 12px;
  padding: 10px 22px;
  background: #F1BA53 !important;
  color: #1B3A4B !important;
  border: none !important;
  border-radius: 22px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
  transition: transform 0.12s ease;
}
.tadapix-chat-quote-btn:hover { transform: scale(1.04); }

#tadapix-chat-typing {
  display: none;
  font-size: 15px;
  font-weight: 600;
  color: #6b7780;
  padding: 0 16px 10px;
  letter-spacing: 0.3px;
}
#tadapix-chat-widget.typing #tadapix-chat-typing { display: block; }
/* each letter fades/rises in with a stagger (delays set inline); the run
   replays every time the indicator shows, since display:none resets it */
.tdx-t-l {
  display: inline-block;
  opacity: 0;
  animation: tdx-letter-in 0.22s ease-out forwards;
}
@keyframes tdx-letter-in {
  0%   { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
/* dots appear after the word, then pulse in sequence until the reply lands */
.tdx-t-d {
  display: inline-block;
  opacity: 0;
  margin-left: 1px;
  animation: tdx-dot-in 0.2s ease-out forwards, tdx-dot-pulse 0.9s ease-in-out 1s infinite;
}
.tdx-t-d:nth-of-type(2) { animation: tdx-dot-in 0.2s ease-out forwards, tdx-dot-pulse 0.9s ease-in-out 1.15s infinite; }
.tdx-t-d:nth-of-type(3) { animation: tdx-dot-in 0.2s ease-out forwards, tdx-dot-pulse 0.9s ease-in-out 1.3s infinite; }
@keyframes tdx-dot-in {
  0%   { opacity: 0; transform: translateY(5px); }
  100% { opacity: 1; transform: none; }
}
@keyframes tdx-dot-pulse {
  0%, 100% { transform: scale(1); }
  35%      { transform: scale(1.6) translateY(-1px); }
}

#tadapix-chat-form {
  display: flex;
  border-top: 1px solid #e6e8eb;
  padding: 10px;
  gap: 8px;
  flex-shrink: 0;
  background: #fff;
  border-radius: 0 0 12px 12px;
}
#tadapix-chat-input {
  flex: 1;
  border: 1px solid #d8dce0;
  border-radius: 20px;
  padding: 9px 14px;
  font-size: 14px;
  outline: none;
}
#tadapix-chat-input:focus { border-color: #1B3A4B; }
#tadapix-chat-send {
  background: #1B3A4B;
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0 18px;
  font-size: 14px;
  cursor: pointer;
}
#tadapix-chat-send:disabled { opacity: 0.5; cursor: default; }

@media (max-width: 480px) {
  /* Lift the bubble so its circle sits level with the hero's "Start your
     project" CTA in the initial mobile view instead of slightly below it. */
  #tadapix-chat-widget {
    bottom: 44px;
  }
  #tadapix-chat-panel {
    width: calc(100vw - 32px);
    /* dvh tracks the ACTUAL visible viewport, shrinking when the mobile
       keyboard opens — so the header (toucan + title) stays on screen
       instead of being pushed out the top. vh line is the fallback for
       browsers without dvh support. */
    height: calc(100vh - 160px);
    height: calc(100dvh - 160px);
    max-height: calc(100vh - 140px);
    max-height: calc(100dvh - 140px);
  }
  /* Condensed header so the portrait + greeting survive a short viewport */
  .tadapix-toucan-badge--header {
    width: 56px;
    height: 56px;
    margin-top: -28px;
  }
  /* transition mask re-sized for the 56px mobile header badge (inner r=25) */
  .tadapix-toucan-badge--header .tadapix-toucan-stage.masked {
    clip-path: path('M -200,-200 L 256,-200 L 256,28 L 53,28 A 25,25 0 0 1 3,28 L -200,28 Z');
  }
  #tadapix-chat-header { padding-bottom: 8px; gap: 5px; }
  #tadapix-chat-header strong { font-size: 14px; }
  /* 16px is the iOS threshold: any input font below it makes Safari zoom
     the whole page on focus — which is what was mangling the layout. */
  #tadapix-chat-input { font-size: 16px; }
}