/* Follow the shared Light / Dark / System color-scheme, including live changes. */
.sa-float-wrap {
  --ask-brand:light-dark(#c5450b, #ffb07a);
  --ask-on-brand:light-dark(#fff, #2b190e);
  --ask-ink:light-dark(#182135, #ebe8e1);
  --ask-muted:light-dark(#706a64, #bdb7ae);
  --ask-surface:light-dark(rgb(255 252 249 / .98), rgb(44 44 41 / .98));
  --ask-surface-hover:light-dark(#fff, #383835);
  --ask-border-color:light-dark(rgb(105 62 35 / .2), rgb(255 255 255 / .2));
  --ask-accent-surface:light-dark(rgb(244 90 10 / .09), rgb(255 176 122 / .12));
  --ask-focus-ring:light-dark(rgb(197 69 11 / .18), rgb(255 176 122 / .2));
  --ask-shadow-sm:0 8px 28px light-dark(rgb(60 40 26 / .12), rgb(0 0 0 / .32));
  --ask-shadow-md:0 12px 36px light-dark(rgb(60 40 26 / .16), rgb(0 0 0 / .4));
  --ask-radius:999rem;
  --ask-font:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";
  --ask-z:1000;
}

.sa-float-wrap,
.sa-float-wrap * { box-sizing: border-box; }

/* Viewport-fixed wrapper centered via flex */
.sa-float-wrap {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(1.2rem + env(safe-area-inset-bottom, 0px));
  z-index: var(--ask-z);
  display: flex;
  justify-content: center;
  align-items: flex-end;
  width: 100vw;
  max-width: 100vw;
  box-sizing: border-box;
  margin: 0 !important;
  padding-inline: 16px;
  pointer-events: none;
  visibility: hidden;
  opacity: 0;
  transition: none;
}
@supports (width: 100dvw) {
  .sa-float-wrap { width: 100dvw; max-width: 100dvw; }
}
.sa-float-wrap.ready { transition: opacity .25s ease; }
.sa-float-wrap.visible,
.sa-float-wrap.open { visibility: visible; }

/* Shell: center contents; no gap when closed (gap only when open) */
.sa-float-shell {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0;
  pointer-events: auto;
  max-width: 100%;
  width: auto;
  min-width: 0;
}
.sa-float-wrap.open .sa-float-shell { gap: .8rem; }

/* Hide the button when open */
.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:1px solid var(--ask-border-color);
  box-shadow:var(--ask-shadow-sm);
  backdrop-filter:blur(8px);
  cursor:pointer;
  transition:transform .18s,box-shadow .18s,background .15s,color .15s;
  white-space: nowrap;
}
.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; }

.sa-float-btn:focus-visible,
.sa-float-send:focus-visible {
  outline:2px solid var(--ask-brand);
  outline-offset:3px;
}

/* Icon (chevron circle) */
.sa-float-icon {
  position:relative;
  display:inline-grid;
  place-items:center;
  width:28px;
  height:28px;
  border-radius:50%;
  background:var(--ask-accent-surface);
  color:var(--ask-brand);
}
.sa-float-icon::before {
  content:"";
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
}

/* Form: ZERO influence when closed; fully expands only when open */
.sa-float-form {
  display:flex;
  align-items:center;
  padding-inline:0;          /* closed: no padding */
  height:56px;
  background:var(--ask-surface);
  border-radius:var(--ask-radius);
  border-width:0;            /* closed: no border */
  border-style:solid;
  border-color:transparent;
  box-shadow:var(--ask-shadow-sm);
  backdrop-filter:blur(8px);
  overflow:hidden;
  visibility:hidden;

  /* make it occupy NO horizontal space when closed */
  flex:0 0 0;
  width:0;
  max-width:0;
  opacity:0;
  max-height:0;
  transform:scaleY(.92);
  transform-origin:bottom center;
  pointer-events:none;
  transition:none;
}

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

/* Open → expand to normal form */
.sa-float-wrap.open .sa-float-form {
  padding-inline:1.1rem 5px;
  gap:8px;
  border-width:1px;
  border-color:var(--ask-border-color);
  visibility:visible;
  opacity:1;
  max-height:72px;
  transform:scaleY(1);
  pointer-events:auto;

  /* allow natural width when open */
  flex:0 1 auto;
  width:600px;
  max-width:100%;
  box-shadow:var(--ask-shadow-md);
}

.sa-float-wrap.open .sa-float-form:focus-within {
  border-color:var(--ask-brand);
  box-shadow:0 0 0 3px var(--ask-focus-ring), var(--ask-shadow-md);
}

/* Form controls */
.sa-float-input {
  flex:1;
  min-width:0;
  width:100%;
  height:44px;
  padding:0;
  margin:0;
  background:transparent;
  border:none;
  color:var(--ask-ink);
  font:500 1rem/1.4 var(--ask-font);
  outline:none;
  caret-color:var(--ask-brand);
}
.sa-float-input::placeholder { color:var(--ask-muted); opacity:1; }
.sa-float-input::selection { background:var(--ask-brand); color:var(--ask-on-brand); }

.sa-float-send {
  display:inline-grid;
  place-items:center;
  flex:0 0 44px;
  width:44px;
  height:44px;
  padding:0;
  border:none;
  border-radius:50%;
  background:var(--ask-brand);
  color:var(--ask-on-brand);
  cursor:pointer;
  transition:transform .15s ease,filter .15s ease;
}
.sa-float-send:hover { transform:scale(1.03); filter:brightness(1.08); }
.sa-float-send:focus-visible { outline-offset:-4px; outline-color:var(--ask-on-brand); }
.sa-float-send .sa-float-icon { width:18px; height:18px; background:transparent; color:inherit; }
.sa-float-send .sa-float-icon::before {
  width:8px;
  height:8px;
  border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;
}

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

@media (prefers-reduced-motion: reduce) {
  .sa-float-wrap,
  .sa-float-wrap *,
  .sa-float-wrap.ready,
  .sa-float-wrap.ready .sa-float-form { transition:none; }
  .sa-float-btn:hover,
  .sa-float-send:hover { transform:none; }
}
