/* =========================================================================
   Techno AI chat
   Figma: Techno / node 1387:1379. Panel, bubbles, input pill and the black
   arrow button follow that frame; the border beam and the thinking orb are
   rebuilt in CSS/canvas after libraries.dev's Beam and Orbs.
   ========================================================================= */

@property --beam{
  syntax:'<angle>';
  inherits:false;
  initial-value:0deg;
}

.chat{
  --chat-ink:#242E3D;
  --chat-cod:#131313;
  --chat-teal:#2AB7CA;
  --chat-bubble:#F4F3F8;
  --chat-text:#333;
  --chat-hint:rgba(17,17,17,.39);
  --chat-ease:cubic-bezier(.22,1,.36,1);
  --chat-spring:cubic-bezier(.34,1.3,.64,1);

  /* the intro-call badge already owns the corner, so the chat sits beside it */
  --badge-r:clamp(14px, 2vw, 34px);
  --badge-b:clamp(14px, 3.4vh, 40px);
  --badge-w:clamp(86px, 8.6vw, 124px);
  --launcher-h:52px;

  position:fixed;
  inset:auto 0 0 auto;
  z-index:85;
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  -webkit-font-smoothing:antialiased;
}

/* ---------------------------------------------------------------- launcher */
.chat-launcher{
  position:fixed;
  right:calc(var(--badge-r) + var(--badge-w) + 12px);
  bottom:calc(var(--badge-b) + (var(--badge-w) - var(--launcher-h)) / 2);
  height:var(--launcher-h);
  display:flex; align-items:center; gap:10px;
  padding:0 20px 0 8px;
  border-radius:100px;
  background:#fff;
  color:var(--chat-ink);
  font-weight:600; font-size:14px; letter-spacing:-.2px;
  box-shadow:0 10px 30px rgba(19,19,19,.14), 0 1px 0 rgba(19,19,19,.04);
  opacity:0;
  transform:translateY(16px) scale(.96);
  transition:opacity .5s var(--chat-ease), transform .5s var(--chat-ease), box-shadow .3s var(--chat-ease);
}
.chat.is-ready .chat-launcher{ opacity:1; transform:none; }
.chat-launcher:hover{ transform:translateY(-2px); box-shadow:0 16px 38px rgba(19,19,19,.18); }
.chat-launcher:active{ transform:scale(.97); }
.chat-launcher__bloub{
  width:38px; height:38px; flex:none;
  border-radius:50%;
  object-fit:cover;
}
.chat.is-open .chat-launcher{ opacity:0; transform:translateY(10px) scale(.94); pointer-events:none; }

/* an open chat sits above the cookie bar (z 90); the closed launcher
   stays below it and simply moves up, further down this file */
.chat.is-open{ z-index:95; }

/* the badge steps aside while the panel is open */
body.chat-open .call-badge{ opacity:0 !important; pointer-events:none; transform:scale(.9) !important; }

/* ------------------------------------------------------------------- panel */
.chat-panel{
  position:fixed;
  right:var(--badge-r);
  bottom:var(--badge-b);
  width:min(372px, calc(100vw - 2 * var(--badge-r)));
  height:min(560px, calc(100svh - var(--badge-b) - 96px));
  display:flex; flex-direction:column;
  background:#fff;
  border-radius:20px;
  box-shadow:0 30px 80px rgba(19,19,19,.18), 0 6px 18px rgba(19,19,19,.06);
  overflow:hidden;
  transform-origin:calc(100% - 40px) calc(100% - 20px);
  opacity:0;
  transform:translateY(14px) scale(.92);
  pointer-events:none;
  visibility:hidden;
  transition:
    opacity .34s var(--chat-ease),
    transform .5s var(--chat-spring),
    visibility 0s linear .5s;
}
.chat.is-open .chat-panel{
  opacity:1; transform:none; pointer-events:auto; visibility:visible;
  transition:opacity .28s var(--chat-ease), transform .55s var(--chat-spring), visibility 0s;
}

/* header */
.chat-head{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:8px;
  padding:14px 14px 10px 15px;
  background:#fff;
}
.chat-avatar{
  width:30px; height:30px; flex:none;
  border-radius:50%;
  overflow:hidden;
}
.chat-avatar img{ width:100%; height:100%; display:block; object-fit:cover; }
.chat-title{
  flex:1 1 auto;
  font-weight:700; font-size:16px; line-height:28px; letter-spacing:-.32px;
  color:var(--chat-ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;
}
.chat-close,
.chat-new,
.chat-sound{
  width:32px; height:32px;
  display:grid; place-items:center;
  border-radius:50%;
  color:var(--chat-ink);
  transition:background .2s var(--chat-ease), transform .3s var(--chat-ease);
}
.chat-close:hover{ background:var(--chat-bubble); transform:rotate(90deg); }
.chat-new:hover{ background:var(--chat-bubble); transform:rotate(-40deg); }
.chat-sound:hover{ background:var(--chat-bubble); }
.chat-close svg,
.chat-new svg,
.chat-sound svg{ width:16px; height:16px; }
.chat-sound__off{ display:none; }
.chat-sound.is-off{ color:rgba(36,46,61,.45); }
.chat-sound.is-off .chat-sound__wave{ display:none; }
.chat-sound.is-off .chat-sound__off{ display:inline; }

/* ------------------------------------------------------------ message log */
.chat-body{ position:relative; flex:1 1 auto; min-height:0; }

/* Messages scroll up underneath a soft white fade rather than meeting the
   header at a hard line. It only appears once there is something above. */
.chat-fade{
  position:absolute; left:0; right:0; z-index:2;
  pointer-events:none;
  opacity:0;
  transition:opacity .35s var(--chat-ease);
}
.chat-fade--top{ top:0; height:56px; background:linear-gradient(#fff 12%, rgba(255,255,255,.85) 45%, rgba(255,255,255,0)); }
.chat-fade--bottom{ bottom:0; height:24px; background:linear-gradient(rgba(255,255,255,0), #fff); }
.chat-body.has-above .chat-fade--top{ opacity:1; }
.chat-body.has-below .chat-fade--bottom{ opacity:1; }

.chat-log{
  height:100%;
  overflow-y:auto;
  overscroll-behavior:contain;
  scroll-behavior:auto;
  padding:14px 20px 12px;
  display:flex; flex-direction:column; gap:12px;
  scrollbar-width:none;
}
.chat-log::-webkit-scrollbar{ display:none; }
.chat-log > :first-child{ margin-top:auto; }   /* conversation sits at the bottom */

.chat-msg{
  max-width:86%;
  padding:10px 14px;
  border-radius:10px;
  font-weight:500; font-size:13px; line-height:19px; letter-spacing:-.24px;
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  animation:chatIn .42s var(--chat-ease) both;
  transform-origin:bottom left;
}
.chat-msg--user{
  align-self:flex-end;
  background:rgba(42,183,202,.07);
  color:var(--chat-teal);
  transform-origin:bottom right;
}
.chat-msg--ai{
  align-self:flex-start;
  background:var(--chat-bubble);
  color:var(--chat-text);
}
.chat-msg a{ color:var(--chat-teal); text-decoration:underline; text-underline-offset:2px; }
@keyframes chatIn{
  from{ opacity:0; transform:translateY(10px) scale(.97); }
  to{ opacity:1; transform:none; }
}

/* A reply sits beside the bloub, avatar anchored to the bubble's bottom
   edge as in the reference. The row animates in; the bubble inside does not
   also animate, or the two would fight. */
.chat-row{
  align-self:flex-start;
  display:flex; align-items:flex-end; gap:8px;
  max-width:92%;
  animation:chatIn .42s var(--chat-ease) both;
  transform-origin:bottom left;
}
.chat-row__avatar{
  width:28px; height:28px; flex:none;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
}
.chat-row__avatar img{ width:100%; height:100%; display:block; object-fit:cover; }
.chat-row .chat-msg{ max-width:none; min-width:0; animation:none; }

/* streamed words settle in rather than popping */
.chat-word{ display:inline; animation:wordIn .32s var(--chat-ease) both; }
@keyframes wordIn{ from{ opacity:0; filter:blur(3px); } to{ opacity:1; filter:none; } }

/* suggestions under the greeting */
.chat-chips{
  align-self:flex-start;
  margin-left:36px;
  display:flex; flex-wrap:wrap; gap:6px;
  animation:chatIn .42s var(--chat-ease) .12s both;
}
.chat-chip{
  padding:7px 12px;
  border:1px solid rgba(42,183,202,.35);
  border-radius:100px;
  font-size:12px; font-weight:500; line-height:16px; letter-spacing:-.2px;
  color:var(--chat-teal);
  background:#fff;
  transition:background .2s var(--chat-ease), border-color .2s var(--chat-ease), transform .2s var(--chat-ease);
}
.chat-chip:hover{ background:rgba(42,183,202,.07); border-color:var(--chat-teal); transform:translateY(-1px); }

/* thinking: the orb takes the avatar's place, the label its bubble */
.chat-thinking{ align-items:center; animation-duration:.36s; }
.chat-row__avatar--orb{ display:grid; place-items:center; background:transparent; }
.chat-thinking canvas{ width:24px; height:24px; display:block; }
.chat-thinking__bubble{
  display:inline-flex;
  padding:8px 14px;
  border-radius:100px;
  background:var(--chat-bubble);
}
/* the shimmer is clipped to the letters, so it lives on the inner span and
   leaves the pill's own colour alone */
.chat-thinking__label{
  font-size:12.5px; font-weight:500; letter-spacing:-.2px; line-height:16px;
  background-image:linear-gradient(90deg, rgba(51,51,51,.38) 0%, rgba(51,51,51,.38) 35%, #333 50%, rgba(51,51,51,.38) 65%, rgba(51,51,51,.38) 100%);
  background-size:220% 100%;
  -webkit-background-clip:text; background-clip:text;
  color:transparent;
  animation:shimmer 1.6s linear infinite;
}
@keyframes shimmer{ from{ background-position:110% 0; } to{ background-position:-110% 0; } }
.chat-thinking.is-leaving{ animation:chatOut .22s var(--chat-ease) both; }
@keyframes chatOut{ to{ opacity:0; transform:translateY(-4px) scale(.98); } }

/* Details card: what will be emailed, editable, sent only on tap */
.chat-lead{
  align-self:stretch;
  margin-left:36px;
  display:flex; flex-direction:column; gap:8px;
  padding:14px;
  border:1px solid rgba(42,183,202,.3);
  border-radius:14px;
  background:#fff;
  animation:chatIn .42s var(--chat-ease) .08s both;
}
.chat-lead__title{
  font-weight:600; font-size:13px; line-height:18px; letter-spacing:-.24px;
  color:var(--chat-ink);
}
.chat-lead__field{ display:flex; flex-direction:column; gap:3px; min-width:0; }
.chat-lead__pair{ display:grid; grid-template-columns:1fr 1fr; gap:8px; }
.chat-lead__field span{
  font-size:11px; font-weight:500; letter-spacing:-.1px;
  color:rgba(51,51,51,.6);
}
.chat-lead__field input,
.chat-lead__field textarea{
  width:100%;
  padding:7px 10px;
  border:1px solid transparent;
  border-radius:8px;
  background:var(--chat-bubble);
  font:inherit; font-weight:500; font-size:13px; line-height:18px; letter-spacing:-.24px;
  color:var(--chat-text);
  resize:none;
  outline:0;
  transition:border-color .2s var(--chat-ease), background .2s var(--chat-ease);
}
.chat-lead__field input:focus,
.chat-lead__field textarea:focus{ border-color:var(--chat-teal); background:#fff; }
.chat-lead__status{ font-size:12px; line-height:16px; color:#C0392B; }
.chat-lead__status:empty{ display:none; }
.chat-lead__status a{ color:var(--chat-teal); text-decoration:underline; }
.chat-lead__send{
  align-self:flex-start;
  margin-top:2px;
  padding:9px 16px;
  border-radius:100px;
  background:var(--chat-cod);
  color:#fff;
  font-weight:600; font-size:13px; letter-spacing:-.2px;
  transition:transform .2s var(--chat-ease), background .2s var(--chat-ease);
}
.chat-lead__send:hover{ transform:translateY(-1px); }
.chat-lead__send:disabled{ cursor:default; transform:none; }
.chat-lead.is-sent{ border-color:rgba(19,19,19,.08); }
.chat-lead.is-sent .chat-lead__field input,
.chat-lead.is-sent .chat-lead__field textarea{ background:transparent; padding-left:0; padding-right:0; }
.chat-lead.is-sent .chat-lead__send{ background:var(--chat-teal); }

/* Turnstile stays out of sight unless Cloudflare needs a click */
.chat-turnstile{ position:relative; z-index:3; padding:0 16px; background:#fff; }
.chat-turnstile:not(.is-asking){ height:0; overflow:hidden; }
.chat-turnstile.is-asking{ padding-top:8px; overflow-x:auto; }
.chat-turnstile__hint{
  margin:0 0 6px;
  font-size:12px; font-weight:500; line-height:16px; letter-spacing:-.2px;
  color:var(--chat-text);
}

/* ---------------------------------------------------------------- composer */
.chat-composer{
  position:relative; z-index:3;
  display:flex; align-items:center; gap:10px;
  padding:10px 16px 16px 20px;
  background:#fff;
}

/* Border beam: a conic sweep masked to a ring, plus a blurred copy for the
   glow. It idles slowly, brightens on focus and races while thinking. */
.chat-input{
  --beam-speed:6s;
  --ring:.38;
  --glow:.22;
  position:relative;
  flex:1 1 auto;
  isolation:isolate;
  border-radius:100px;
}
.chat-input::before,
.chat-input::after{
  content:"";
  position:absolute;
  border-radius:inherit;
  background:conic-gradient(from var(--beam),
      transparent 0deg, transparent 150deg,
      #2AB7CA 205deg, #6D7CFF 250deg, #C07CFF 285deg, #FF8FB1 318deg, #FFC37A 342deg,
      transparent 360deg);
  animation:beam var(--beam-speed) linear infinite;
  pointer-events:none;
  transition:opacity .45s var(--chat-ease);
}
.chat-input::before{               /* the ring */
  inset:-1.5px;
  padding:1.5px;
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask-composite:exclude;
  opacity:var(--ring);
  z-index:2;
}
.chat-input::after{                /* the glow bleeding outside it */
  inset:-5px;
  filter:blur(12px);
  opacity:var(--glow);
  z-index:0;
}
@keyframes beam{ to{ --beam:360deg; } }

.chat-input__field{
  position:relative; z-index:1;
  display:flex; align-items:center;
  height:40px;
  padding:0 18px;
  border-radius:inherit;
  background:var(--chat-bubble);
}
.chat-input input{
  flex:1 1 auto; min-width:0;
  height:100%;
  border:0; outline:0; background:transparent;
  font:inherit; font-weight:500; font-size:13px; letter-spacing:-.24px;
  color:var(--chat-text);
}
.chat-input input::placeholder{ color:var(--chat-hint); }

.chat-input:focus-within{ --ring:.9; --glow:.42; --beam-speed:4s; }
.chat.is-thinking .chat-input{ --ring:1; --glow:.55; --beam-speed:1.6s; }

.chat-send{
  width:40px; height:40px; flex:none;
  display:grid; place-items:center;
  border-radius:40px;
  background:var(--chat-cod);
  color:#fff;
  transition:transform .25s var(--chat-ease), opacity .25s var(--chat-ease);
}
.chat-send img{ width:20px; height:20px; display:block; transition:transform .3s var(--chat-ease); }
.chat-send:hover img{ transform:translate(2px,-2px); }
.chat-send:active{ transform:scale(.92); }
/* Figma keeps the button solid black even with an empty field; it simply
   does nothing until there is something to send */
.chat-send:disabled{ cursor:default; }
.chat-send:disabled:hover img{ transform:none; }
.chat-send:disabled:active{ transform:none; }

/* the site's cookie bar takes the bottom edge while it is showing */
body:has(.cookie-bar:not([hidden])) .chat-launcher{ bottom:calc(var(--badge-b) + (var(--badge-w) - var(--launcher-h)) / 2 + 92px); }

/* ------------------------------------------------------------------ mobile */
@media (max-width:640px){
  .chat{ --badge-r:12px; --badge-b:12px; --badge-w:68px; --launcher-h:48px; }
  .chat-launcher{ padding:0 5px; width:var(--launcher-h); justify-content:center; }
  .chat-launcher__label{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }
  .chat-panel{
    left:10px; right:10px; bottom:10px;
    width:auto;
    height:min(82svh, 640px);
    transform-origin:50% 100%;
  }
}

@media (prefers-reduced-motion:reduce){
  .chat-launcher, .chat-panel, .chat-msg, .chat-chips, .chat-thinking, .chat-word, .chat-lead{ animation:none !important; transition:none !important; }
  .chat-input::before, .chat-input::after, .chat-thinking__label{ animation:none; }
}