/* === HFAI Pillbar — base (non-floating) ===================== */
.hfai-pillbar-wrap { width: 100%; }
.hfai-pillbar-wrap.is-centered { display: flex; justify-content: center; }

.hfai-pillbar{
  display:flex; align-items:center; gap:.5rem; flex-wrap:wrap;
  background:#fff; border:1px solid #e5e7eb; border-radius:var(--hfai-radius,8px);
  padding:.5rem .5rem .5rem .75rem; box-shadow:0 2px 10px rgba(0,0,0,.06);
  width:fit-content; max-width:100%;
}

.hfai-pillbar .pill-field{ display:flex; align-items:center; gap:.5rem; padding:.35rem .6rem; }
.hfai-pillbar label{ font-size:1rem; color:#6b7280; white-space:nowrap; }
.hfai-pillbar input[type="text"], .hfai-pillbar select{
  border:0; background:transparent; padding:.25rem 0; font-size:.95rem; color:#111827;
  outline:none; min-width:6ch;
}
.hfai-pillbar .pill-sep{ opacity:.35; user-select:none; }

.hfai-pillbar .pill-cta[disabled]{ opacity:.8; cursor:not-allowed; pointer-events:none; }

/* === HFAI Pillbar — floating (form is the thing we float) === */
.hfai-pillbar.is-floating{
  position: fixed;
  z-index: 9999;
  left: 50%;
  top: var(--pb-top, 116px);        /* tune per breakpoint if needed */
  transform: translate(-50%, -50%); /* half above / half below header bottom */
  max-width: calc(100vw - 32px);    /* 16px gutters */
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);

  /* compact single row */
  display:flex; flex-wrap:nowrap; align-items:center; justify-content:flex-start;
  gap:10px; padding:10px 14px; box-sizing:border-box; white-space:nowrap;
}

/* no child flex-grow fillers; kill mystery gaps */
.hfai-pillbar.is-floating > *{ flex:0 0 auto; margin:0; }

/* hide decorative separators in floating mode */
.hfai-pillbar.is-floating .pill-sep,
.hfai-pillbar.is-floating .separator,
.hfai-pillbar.is-floating .divider{ display:none; }

/* precise field widths */
.hfai-pillbar.is-floating input.form-control.input,
.hfai-pillbar.is-floating input[type="text"]{ width:14ch; max-width:14ch; }
.hfai-pillbar.is-floating select{ width:6ch; max-width:6ch; }

/* keep buttons compact */
.hfai-pillbar.is-floating .pill-cta,
.hfai-pillbar.is-floating .pill-hide{ flex:0 0 auto; }

/* Flatpickr above the bar (once) */
.flatpickr-calendar{ z-index: 10050 !important; }

/* Optional per-breakpoint vertical tuning */
@media (max-width: 1199.98px){ .hfai-pillbar.is-floating { --pb-top: 108px; } }
@media (max-width: 991.98px) { .hfai-pillbar.is-floating { --pb-top: 100px; } }
@media (max-width: 767.98px) { .hfai-pillbar.is-floating { --pb-top: 92px; } }

/* Show FAB only when minimized */
.hfai-pillbar-wrap:not(.is-minimized) .hfai-pillbar-toggle{ display:none !important; }

.hfai-pillbar-wrap.is-minimized .hfai-pillbar{ display:none !important; }
.hfai-pillbar-wrap.is-minimized .hfai-pillbar-toggle{
  display:grid !important;
  position:fixed !important; left:16px; bottom:16px; z-index:10000;
  width:var(--hfai-fab-size,44px); height:var(--hfai-fab-size,44px);
  border-radius:50%; place-items:center; padding:0; border:0;
  background:var(--hfai-accent,#11574A); color:#fff;
  box-shadow:0 10px 24px rgba(0,0,0,.18), 0 2px 8px rgba(0,0,0,.10);
}
.hfai-pillbar-wrap.is-minimized .hfai-pillbar-toggle i{ font-size:calc(var(--hfai-fab-size,44px)*.58); line-height:1; }

/* === Pillbar: precise floating + button sizing (ROE step) === */

/* Float the FORM (visual thing) above everything */
.hfai-pillbar.is-floating{
  position: fixed;
  z-index: 9995;                 /* always above header/admin bar */
  left: 50%;
  top: var(--pb-top, 104px);            /* tune: 104px = a bit higher; lower value = higher position */
  transform: translate(-50%, -50%);     /* half above / half below header bottom */

  /* width/spacing: compact, no unexpected stretching */
  width: max-content;                   /* content width, not 100% */
  max-width: calc(100vw - 32px);        /* 16px gutters each side */
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 10px 14px; box-sizing: border-box; white-space: nowrap;

  /* shell */
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
}

/* Never allow children to grow (removes big gap to CTA) */
.hfai-pillbar.is-floating > * { flex: 0 0 auto; margin: 0; }

/* Compact field widths (matches Flatpickr alt inputs) */
.hfai-pillbar.is-floating input.form-control.input,
.hfai-pillbar.is-floating input[type="text"]{ width: 14ch; max-width: 14ch; }
.hfai-pillbar.is-floating select{ width: 6ch; max-width: 6ch; }

/* Smaller, tidy close button */
.hfai-pillbar .pill-hide{
  line-height: 1;
  padding: .25rem .5rem;
  font-size: 16px;                      /* reduce ∴ smaller “×” pill */
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  background: #fff;
  color: #111827;
}

/* Hide separators in floating mode */
.hfai-pillbar.is-floating .pill-sep,
.hfai-pillbar.is-floating .separator,
.hfai-pillbar.is-floating .divider{ display: none; }

/* Flatpickr above the bar (once) */
.flatpickr-calendar{ z-index: 9995 !important; }

/* === HFAI Pillbar — final floating form (portalized) ================== */

/* Float the FORM (visual thing) — centered, straddling header bottom */
form.hfai-pillbar.is-floating{
  position: fixed;
  z-index: 9995;                 /* above header, always */
  left: 50%;
  top: 144px;                           /* your finalized vertical offset */
  transform: translate(-50%, -50%);     /* half above / half below */
  width: max-content;
  max-width: calc(100vw - 32px);        /* 16px gutters */
  display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start;
  gap: 10px; padding: 10px 14px; box-sizing: border-box; white-space: nowrap;
  background: #fff;
  border: 1px solid rgba(0,0,0,.28);
  border-radius: 12px;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12);
}

/* No child growth → kills the big gap before CTA */
form.hfai-pillbar.is-floating > *{ flex: 0 0 auto; margin: 0; }

/* Compact widths (matches Flatpickr alt inputs) */
form.hfai-pillbar.is-floating input.form-control.input,
form.hfai-pillbar.is-floating input[type="text"]{ width: 14ch; max-width: 14ch; }
form.hfai-pillbar.is-floating select{ width: 6ch; max-width: 6ch; }

/* Close (×) size tidy */
form.hfai-pillbar .pill-hide{
  line-height: 1; padding: .25rem .5rem; font-size: 16px;
  border: 1px solid #e5e7eb; border-radius: 8px; background: #fff; color: #111827;
}

/* CTA color comes ONLY from shortcode inline var */
.hfai-pillbar .pill-cta{
  background: var(--hfai-accent) !important;
  border-color: var(--hfai-accent) !important;
  color: #fff !important;
}

/* Calendar above all */
.flatpickr-calendar{ z-index: 10000 !important; }

/* Neutralize any legacy "float the WRAPPER" rules (if still present) */
.hfai-pillbar-wrap.is-floating{
  position: static !important; left:auto !important; top:auto !important;
  bottom:auto !important; transform:none !important; width:auto !important; max-width:none !important;
}
/* === Pillbar — authoritative compact floating (init == reopen) === */
form.hfai-pillbar.is-floating{
  position: fixed !important;
  z-index: 9995 !important;
  left: 50% !important;                
  transform: translate(-50%, -50%) !important;

  /* compact single row */
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;

  width: max-content !important;
  max-width: calc(100vw - 32px) !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12) !important;
}

/* never let children create gaps */
form.hfai-pillbar.is-floating > *{
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* compact field widths */
form.hfai-pillbar.is-floating input.form-control.input,
form.hfai-pillbar.is-floating input[type="text"]{
  width: 14ch !important; max-width: 14ch !important;
}
form.hfai-pillbar.is-floating select{
  width: 6ch !important; max-width: 6ch !important;
}

/* hide dot separators while floating */
form.hfai-pillbar.is-floating .pill-sep,
form.hfai-pillbar.is-floating .separator,
form.hfai-pillbar.is-floating .divider{ display: none !important; }

/* close button size */
form.hfai-pillbar .pill-hide{
  line-height: 1 !important;
  padding: .25rem .5rem !important;
  font-size: 16px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
}

/* CTA: color from shortcode var; never push with auto margin */
.hfai-pillbar .pill-cta{
  background: var(--hfai-accent) !important;
  border-color: var(--hfai-accent) !important;
  color: #fff !important;
  margin-left: 0 !important;               /* kill any old “margin-left:auto” rules */
  display: inline-flex !important;         /* bulletproof visibility */
  align-items: center !important;
}

/* calendar always above */
.flatpickr-calendar{ z-index: 10000 !important; }

/* neutralize any old “float the wrapper” styles */
.hfai-pillbar-wrap.is-floating{
  position: static !important; left:auto !important; top:auto !important;
  bottom:auto !important; transform:none !important; width:auto !important; max-width:none !important;
}

/* === Pillbar: compact floating (init == reopen) ===================== */
form.hfai-pillbar.is-floating{
  position: fixed !important;
  z-index: 9995 !important;
  left: 50% !important;
  top: 115px;                 /* final offset you approved */
  transform: translate(-50%, -50%) !important;

  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: flex-start !important;
  gap: 10px !important;
  padding: 10px 14px !important;
  box-sizing: border-box !important;
  white-space: nowrap !important;

  width: max-content !important;
  max-width: calc(100vw - 32px) !important;

  background: #fff !important;
  border: 1px solid rgba(0,0,0,.28) !important;
  border-radius: 12px !important;
  box-shadow: 0 14px 36px rgba(0,0,0,.28), 0 2px 6px rgba(0,0,0,.12) !important;
}

/* Children never grow; kills gap before CTA */
form.hfai-pillbar.is-floating > *{
  flex: 0 0 auto !important;
  margin: 0 !important;
}

/* Compact field widths */
form.hfai-pillbar.is-floating input.form-control.input,
form.hfai-pillbar.is-floating input[type="text"]{
  width: 14ch !important; max-width: 14ch !important;
}
form.hfai-pillbar.is-floating select{
  width: 6ch !important; max-width: 6ch !important;
}

/* Hide decorative separators while floating */
form.hfai-pillbar.is-floating .pill-sep,
form.hfai-pillbar.is-floating .separator,
form.hfai-pillbar.is-floating .divider{ display: none !important; }

/* Close (×) size */
form.hfai-pillbar .pill-hide{
  line-height: 1 !important;
  padding: .25rem .5rem !important;
  font-size: 16px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  background: #fff !important;
  color: #111827 !important;
}

/* CTA: always visible; color from shortcode var */
.hfai-pillbar .pill-cta{
  display: inline-flex !important;
  align-items: center !important;
  background: var(--hfai-accent) !important;
  border-color: var(--hfai-accent) !important;
  color: #fff !important;
}

/* Flatpickr above everything */
.flatpickr-calendar{ z-index: 10000 !important; }

/* CTA rounded corners */
.hfai-pillbar .pill-cta{
  border-radius: var(--hfai-radius, 8px) !important;
}