:root {
  --ask-brand:#F06420;
  --ask-ink:#111827;
  --ask-surface:rgba(255,255,255,.92);
  --ask-surface-hover:rgba(255,255,255,.98);
  --ask-border:1px solid rgba(17,24,39,.10);
  --ask-shadow-sm:0 10px 28px rgba(17,24,39,.08);
  --ask-shadow-md:0 16px 40px rgba(17,24,39,.12);
  --ask-radius:999rem;
  --ask-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
}

/* Base: center by default; JS sets opacity. No transitions until .ready */
.sa-float-wrap {
  position:fixed;
  left:50%;
  bottom:1.4rem;
  transform:translateX(-50%);
  z-index:1000;
  opacity:0;                /* JS will drive this for proximity fade */
  pointer-events:none;      /* unlocked by .visible */
  transition:none;          /* prevent load flash */
}

/* JS flips this on when alpha > threshold; leave opacity to JS */
.sa-float-wrap.visible {
  pointer-events:auto;
}

/* After first paint JS adds .ready so left/opacity transitions feel smooth */
.sa-float-wrap.ready {
  transition:opacity .25s ease,left .25s ease;
}

/* Hide the button when open (form takes over) */
.sa-float-wrap.open .sa-float-btn {
  display:none;
}

/* Pill (closed state) */
.sa-float-btn {
  --ask-h:56px;
  display:flex;
  align-items:center;
  gap:.9rem;
  height:var(--ask-h);
  padding-inline:1.1rem .9rem;
  background:var(--ask-surface);
  color:var(--ask-ink);
  font:600 .9rem/1 var(--ask-font);
  border-radius:var(--ask-radius);
  border:var(--ask-border);
  box-shadow:var(--ask-shadow-sm);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .15s,color .15s;
}
.sa-float-btn:hover {
  background:var(--ask-surface-hover);
  transform:scale(1.03);
  box-shadow:var(--ask-shadow-md);
}

.sa-float-label { white-space:nowrap; }

/* Left circular icon in the pill (chevron) */
.sa-float-icon {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:rgba(17,24,39,.08);
}
.sa-float-icon::before {
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid #4B5563;
  border-bottom:2px solid #4B5563;
  transform:rotate(-45deg);
}

/* Expanded form (open state) with vertical expand/collapse */
.sa-float-form {
  display:flex;
  align-items:center;
  gap:.8rem;
  padding-inline:1.1rem .9rem;
  height:56px;                 /* visual height when open */
  background:var(--ask-surface);
  border-radius:var(--ask-radius);
  border:var(--ask-border);
  box-shadow:var(--ask-shadow-sm);
  backdrop-filter:blur(8px);
  overflow:hidden;

  /* collapsed baseline */
  opacity:0;
  max-height:0;
  transform:scaleY(.92);
  transform-origin:bottom center;
  transition:none;             /* enabled when .ready is present */
}

/* Enable smooth transitions after first paint */
.sa-float-wrap.ready .sa-float-form {
  transition:max-height .22s ease,opacity .2s ease,transform .22s ease,box-shadow .18s ease;
}

/* Open → vertically expand */
.sa-float-wrap.open .sa-float-form {
  opacity:1;
  max-height:72px;
  transform:scaleY(1);
  box-shadow:var(--ask-shadow-md);
}

.sa-float-input {
  flex:1;
  min-width:200px;
  height:36px;
  background:transparent;
  border:none;
  color:var(--ask-ink);
  font:500 .95rem/1 var(--ask-font);
  outline:none;
}
.sa-float-input::placeholder { color:#9CA3AF; }

/* Send button (right round) */
.sa-float-send {
  display:inline-grid;
  place-items:center;
  width:34px;
  height:34px;
  border:none;
  border-radius:50%;
  background:var(--ask-brand);
  color:#fff;
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.sa-float-send:hover {
  transform:scale(1.05);
  filter:saturate(1.05);
}
.sa-float-send .sa-float-icon {
  width:18px;
  height:18px;
  background:transparent;
}
.sa-float-send .sa-float-icon::before {
  width:8px;
  height:8px;
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
}

/* Desktop offset behavior: 57% when closed → 50% when open */
@media (min-width:641px) {
  .sa-float-wrap { left:53%; }  /* closed */
  .sa-float-wrap.open { left:50%; } /* open */
}

/* Mobile sizing */
@media (max-width:640px) {
  .sa-float-btn {
    --ask-h:52px;
    font-size:.86rem;
  }
  .sa-float-form { height:52px; }
}