/* ============================================================
   HFA Concierge — Mirror Chatbot framework, HFA skin
   Forked from the kit's reference widget. Namespaced #hcx.
   Doctrine: no persona, no greeting, freeform-first, chips as
   invitations, one question per turn, never re-ask a banked fact.
   ============================================================ */
#hcx, #hcx *, #hcx *::before, #hcx *::after { box-sizing: border-box; margin: 0; padding: 0 }
#hcx {
  --acc: #1E8BC3; --acc-d: #15618C; --acc-soft: #46A6D8;
  --ink: #1B2A4A; --ink-s: #5C6478; --ink-f: #8A8F9C;
  --ln: #E6E2D8; --ln-s: #EFEDE5; --card: #F4F1E9;
  --panel: #111E38; --r: 13px; --r-sm: 9px;
  --shadow: 0 24px 60px -22px rgba(17,30,56,.4), 0 6px 18px -10px rgba(17,30,56,.22);
  position: fixed; z-index: 99999; right: 26px; top: var(--nav-h, 96px); width: 358px;
  --hcx-vh: 1vh;
  font-family: 'Work Sans', system-ui, sans-serif;
  color: var(--ink); line-height: 1.5; -webkit-font-smoothing: antialiased;
}
@supports (height: 1dvh) { #hcx { --hcx-vh: 1dvh } }
#hcx[data-hidden="1"] { display: none }
#hcx button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; text-align: left }
#hcx img { max-width: 100%; display: block }
#hcx .x-shell { background: #fff; border: 1px solid var(--ln); border-radius: var(--r); box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; max-height: calc(100vh - var(--nav-h, 96px) - 22px); position: relative }
#hcx[data-wide="1"] { width: 660px }
/* header */
#hcx .x-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--panel); border-bottom: 3px solid var(--acc); color: #fff; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none }
#hcx .x-hd:active { cursor: grabbing }
#hcx[data-dragging="1"] { transition: none !important }
#hcx[data-dragging="1"] .x-shell, #hcx[data-dragging="1"] .x-bar { box-shadow: 0 40px 90px -26px rgba(8,14,28,.6), 0 0 0 2px var(--acc) }
#hcx .x-grip { display: grid; grid-template-columns: 3px 3px; gap: 3px 3px; flex: 0 0 auto; opacity: .3; transition: opacity .15s }
#hcx .x-grip i { display: block; width: 3px; height: 3px; border-radius: 50%; background: #fff }
#hcx .x-hd:hover .x-grip, #hcx .x-bar:hover .x-grip { opacity: .62 }
#hcx .x-mark { width: 22px; height: 22px; border-radius: 50%; flex: 0 0 auto; background: url('hfa-mark.png') center/cover }
#hcx .x-name { font-family: 'Libre Caslon Text', serif; font-size: 14px; font-weight: 700; letter-spacing: -.01em; flex: 1 1 auto; color: #fff }
#hcx .x-name em { font-style: normal; font-family: 'Work Sans', sans-serif; font-weight: 500; font-size: 11px; color: rgba(255,255,255,.55); margin-left: 6px }
#hcx .x-hd-btns { display: flex; gap: 1px; flex: 0 0 auto }
#hcx .x-ib.x-up { display: none }
#hcx[data-size="mid"] .x-ib.x-up { display: grid }
#hcx[data-size="mid"] .x-ib[data-a="restart"] { display: none }
#hcx .x-ib { width: 26px; height: 26px; border-radius: 6px; display: grid; place-items: center; color: rgba(255,255,255,.55); font-size: 15px; line-height: 1; transition: background .14s, color .14s }
#hcx .x-ib:hover { background: rgba(255,255,255,.12); color: #fff }
#hcx .x-ib svg { display: block; width: 13px; height: 13px }
/* body split */
#hcx .x-split { display: flex; flex: 1 1 auto; min-height: 0 }
#hcx .x-conv { flex: 1 1 auto; display: flex; flex-direction: column; min-width: 0; min-height: 0 }
#hcx .x-body { flex: 1 1 auto; overflow-y: auto; min-height: 0; padding: 12px 13px 10px; display: flex; flex-direction: column; gap: 8px }
#hcx .x-body::-webkit-scrollbar { width: 8px }
#hcx .x-body::-webkit-scrollbar-thumb { background: #d9d4c8; border-radius: 8px; border: 2px solid transparent; background-clip: content-box }
/* messages */
#hcx .x-row { display: flex; gap: 8px; align-items: flex-start; animation: x-rise .3s cubic-bezier(.2,.7,.3,1) both }
#hcx .x-row.u { flex-direction: row-reverse }
#hcx .x-b { max-width: 88%; background: var(--card); border-radius: 12px 12px 12px 3px; padding: 10px 13px; font-size: 13.5px; line-height: 1.55 }
#hcx .x-row.u .x-b { background: var(--panel); color: #fff; border-radius: 12px 12px 3px 12px; font-weight: 500 }
#hcx .x-b b, #hcx .x-b strong { font-weight: 700 }
#hcx .x-b a { color: var(--acc-d); font-weight: 600; text-decoration: none; border-bottom: 1px solid rgba(30,139,195,.35) }
#hcx .x-b a:hover { color: var(--acc) }
/* Booking fallback only — a visitor who has just said yes must not dead-end
   while the embed's phone presentation is still under review (update doc §6.5). */
#hcx a.x-sched { display: inline-block; background: var(--acc-d); color: #fff; font-weight: 600; text-decoration: none; border: 0 }
#hcx a.x-sched:hover { background: var(--acc); color: #fff }

/* ---- Calendly scheduler -------------------------------------------------
   Desktop: inline in the conversation, on the wide panel. 650px is Calendly's
   DEFAULT embed height, measured 2026-08-20 -- the height the embed needs with
   its event details showing. We ran 460px until 2026-08-24, which was that
   same embed with hide_event_type_details stripping the meeting name, duration
   and description; the ruling is details visible at every screen size, so the
   row is back to the full height. It scrolls in the conversation like any
   other tall card. Phones do not use this rule -- see the booking state. */
#hcx .x-sched-row { display: block }
#hcx .x-sched-wrap { position: relative; display: flex; flex-direction: column; border: 1px solid var(--ln); border-radius: 10px; overflow: hidden; background: var(--card) }
#hcx .x-sched-fr { display: block; width: 100%; height: 650px; border: 0 }
/* Failure is ADDITIVE -- the frame is never hidden, because "failed" here
   only means Calendly has not said hello yet, and it may still arrive. */
#hcx .x-sched-wrap a.x-sched { flex: 0 0 auto; margin: 10px auto; text-align: center }
/* the dedicated booking state is phones only -- nothing to draw here */
#hcx .x-book { display: none }
@keyframes x-rise { from { opacity: 0; transform: translateY(7px) } to { opacity: 1; transform: none } }
#hcx .x-typing { display: inline-flex; gap: 4px; padding: 13px 15px; background: var(--card); border-radius: 12px 12px 12px 3px }
#hcx .x-typing i { width: 6px; height: 6px; border-radius: 50%; background: #b3ada0; animation: x-blink 1.3s infinite both }
#hcx .x-typing i:nth-child(2) { animation-delay: .18s }
#hcx .x-typing i:nth-child(3) { animation-delay: .36s }
@keyframes x-blink { 0%,80%,100% { opacity: .3 } 40% { opacity: 1 } }
/* opener */
#hcx .x-lead { font-size: 14px; font-weight: 600; letter-spacing: -.008em; line-height: 1.45; color: var(--ink); animation: x-rise .34s both }
#hcx .x-lead-s { font-size: 12.5px; color: var(--ink-s); line-height: 1.45; margin-top: 4px; font-weight: 500 }
#hcx .x-ask { font-size: 14px; font-weight: 500; color: var(--ink); letter-spacing: -.008em; line-height: 1.4; animation: x-rise .34s both }
/* chips */
#hcx .x-chips { display: flex; flex-wrap: wrap; gap: 7px; animation: x-rise .3s both }
#hcx .x-chip { display: inline-flex; align-items: center; gap: 8px; border: 1px solid #cfc9bb; background: #fff; border-radius: 20px; padding: 7px 13px; font-size: 13px; font-weight: 600; color: var(--ink); letter-spacing: -.008em; position: relative; box-shadow: 0 1px 2px rgba(17,30,56,.05); transition: border-color .16s, background .16s, color .16s, transform .13s, box-shadow .16s }
#hcx .x-chip:hover { border-color: var(--acc); background: var(--acc); color: #fff; transform: translateY(-2px); box-shadow: 0 6px 16px -6px rgba(30,139,195,.5) }
#hcx .x-chips.x-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5px }
#hcx .x-chips.x-grid .x-chip { border-radius: var(--r-sm) }
#hcx .x-chips.x-grid .x-chip.x-wide { grid-column: span 2 }
/* composer */
#hcx .x-ft { flex: 0 0 auto; border-top: 1px solid var(--ln); padding: 11px 12px 10px; background: #FBFAF7 }
#hcx .x-inbar { display: flex; gap: 8px; align-items: flex-end; background: #fff; border: 1.5px solid #9CB0C0; border-radius: 11px; padding: 5px 5px 5px 12px; transition: border-color .15s, box-shadow .15s }
#hcx .x-inbar:focus-within { border-color: var(--acc); box-shadow: 0 0 0 3px rgba(30,139,195,.18) }
#hcx .x-inbar textarea { flex: 1 1 auto; resize: none; border: none; background: transparent; font-family: inherit; line-height: 1.45; max-height: 92px; color: var(--ink); font-size: 13.5px !important; padding: 8px 0 !important; text-indent: 0 !important; text-align: left !important; margin: 0 !important; min-height: 22px }
#hcx .x-inbar textarea:focus { outline: none }
#hcx .x-inbar textarea::placeholder { color: #8893a3; font-weight: 500 }
#hcx .x-send { flex: 0 0 auto; width: 33px; height: 33px; border-radius: 8px; background: var(--acc); color: #fff; display: grid; place-items: center; transition: background .15s, transform .12s }
#hcx .x-send:hover { background: var(--acc-soft); transform: translateY(-1px) }
#hcx .x-send:active { transform: translateY(0) }
#hcx .x-send svg { width: 15px; height: 15px; display: block }
#hcx .x-priv { display: flex; align-items: flex-start; gap: 5px; font-size: 10px; color: var(--ink-f); margin-top: 7px; line-height: 1.35 }
#hcx .x-priv svg { flex: 0 0 auto; margin-top: 1px }
/* ---------- the panel: navy, slides in once earned ---------- */
#hcx .x-panel { flex: 0 0 auto; width: 0; background: var(--panel); color: #fff; overflow: hidden; display: flex; flex-direction: column; transition: width .52s cubic-bezier(.19,1,.22,1); position: relative }
#hcx[data-panel="1"] .x-panel { width: 258px; border-right: 2px solid var(--acc) }
#hcx .x-p-in { width: 258px; padding: 14px 14px 13px; display: flex; flex-direction: column; height: 100%; opacity: 0; transform: translateX(-10px); transition: opacity .34s .2s, transform .44s .18s cubic-bezier(.19,1,.22,1) }
#hcx[data-panel="1"] .x-p-in { opacity: 1; transform: none }
#hcx .x-p-k { font-size: 9px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: var(--acc-soft); margin-bottom: 3px }
#hcx .x-p-t { font-family: 'Libre Caslon Text', serif; font-size: 15px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 11px }
#hcx .x-p-note { font-size: 9.5px; font-weight: 600; color: rgba(255,255,255,.42); margin: -7px 0 11px; line-height: 1.4; letter-spacing: .01em }
#hcx .x-p-scroll { flex: 1 1 auto; overflow-y: auto; min-height: 0; margin: 0 -14px; padding: 0 14px }
#hcx .x-p-scroll::-webkit-scrollbar { width: 6px }
#hcx .x-p-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,.16); border-radius: 6px }
#hcx .x-p-sec { font-size: 8.5px; font-weight: 700; letter-spacing: .15em; text-transform: uppercase; color: rgba(255,255,255,.45); padding: 12px 0 4px }
/* theme rows */
#hcx .x-li { padding: 8px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; gap: 9px; align-items: flex-start; animation: x-land .42s cubic-bezier(.22,1,.36,1) both }
#hcx .x-li-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--acc-soft); flex: 0 0 auto; margin-top: 5px; box-shadow: 0 0 0 3px rgba(70,166,216,.18) }
#hcx .x-li-x { flex: 1 1 auto; min-width: 0 }
#hcx .x-li-t { display: block; font-size: 11.5px; font-weight: 700; line-height: 1.3 }
#hcx .x-li-s { display: block; font-size: 9.5px; color: rgba(255,255,255,.48); margin-top: 2px; font-weight: 500 }
@keyframes x-land { from { opacity: 0; transform: translateX(-8px) } to { opacity: 1; transform: none } }
#hcx .x-li.x-new { animation: x-land .42s cubic-bezier(.22,1,.36,1) both, x-flash 1.4s ease-out .5s }
/* reading rows — real links into Field Notes */
#hcx .x-rd { display: flex; gap: 9px; align-items: baseline; padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); animation: x-land .42s both; text-decoration: none; color: #fff }
#hcx .x-rd:hover .x-rd-t { color: var(--acc-soft) }
#hcx .x-rd-m { font-family: 'Libre Caslon Text', serif; font-size: 12px; color: var(--acc-soft); flex: 0 0 auto }
#hcx .x-rd-x { flex: 1 1 auto; min-width: 0 }
#hcx .x-rd-t { display: block; font-size: 11px; font-weight: 700; line-height: 1.3; transition: color .14s }
#hcx .x-rd-s { display: block; font-size: 9px; color: rgba(255,255,255,.42); margin-top: 1px; font-weight: 500 }
/* CHOICE dimension tags */
#hcx .x-dims { display: flex; flex-wrap: wrap; gap: 5px; padding: 6px 0 2px; animation: x-land .42s both }
#hcx .x-dim { font-size: 9px; font-weight: 700; letter-spacing: .05em; background: rgba(70,166,216,.14); color: var(--acc-soft); border: 1px solid rgba(70,166,216,.35); padding: 3px 8px; border-radius: 20px }
/* key-value rows */
#hcx .x-kv { padding: 7px 0; border-top: 1px solid rgba(255,255,255,.1); display: flex; justify-content: space-between; gap: 9px; align-items: baseline; animation: x-land .42s both }
#hcx .x-kv-k { font-size: 9.5px; color: rgba(255,255,255,.46); font-weight: 600; letter-spacing: .05em; text-transform: uppercase }
#hcx .x-kv-v { font-size: 11.5px; font-weight: 600; text-align: right }
#hcx .x-kv-v.y { color: var(--acc-soft) }
#hcx .x-kv-v.q { color: rgba(255,255,255,.24); font-style: italic; font-weight: 500 }
#hcx .x-kv-new { animation: x-land .42s both, x-flash 1.4s ease-out .5s }
@keyframes x-flash { 0% { background: rgba(70,166,216,.25) } 100% { background: transparent } }
/* panel footer */
#hcx .x-p-ft { flex: 0 0 auto; margin-top: auto; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.13) }
#hcx .x-p-cta { display: block; width: 100%; background: var(--acc); color: #fff; font-size: 11.5px; font-weight: 700; padding: 9px; border-radius: 7px; text-align: center; letter-spacing: -.005em; transition: background .15s, transform .12s }
#hcx .x-p-cta:hover { background: var(--acc-soft); transform: translateY(-1px) }
#hcx .x-p-sub { font-size: 9.5px; color: rgba(255,255,255,.4); text-align: center; margin-top: 7px; font-weight: 500; line-height: 1.45 }
/* inline cards (brief) */
#hcx .x-card { flex: 0 0 auto; border: 1px solid var(--ln); border-radius: var(--r-sm); overflow: hidden; background: #fff; animation: x-rise .34s both }
#hcx .x-card-k { font-size: 8.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--acc-d); padding: 11px 12px 0 }
#hcx .x-card-t { font-family: 'Libre Caslon Text', serif; font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; padding: 4px 12px 10px; line-height: 1.2 }
#hcx .x-card-rows { padding: 4px 12px 10px }
#hcx .x-card-row { display: flex; justify-content: space-between; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--ln-s); font-size: 12px }
#hcx .x-card-row:last-child { border-bottom: none }
#hcx .x-card-row .k { color: var(--ink-s) }
#hcx .x-card-row .v { font-weight: 600; text-align: right }
/* fresh-message cue */
#hcx .x-row.x-fresh .x-b { animation: xfresh 2.4s ease-out 1 }
@keyframes xfresh { 0% { box-shadow: -2px 0 0 var(--acc) } 70% { box-shadow: -2px 0 0 var(--acc) } 100% { box-shadow: -2px 0 0 rgba(30,139,195,0) } }
/* ---------- size states ---------- */
#hcx { transition: width .34s cubic-bezier(.22,1,.36,1) }
#hcx[data-size="mid"] { width: 358px }
#hcx[data-size="mid"] .x-panel { width: 0 !important; border-right: none }
#hcx[data-size="mid"] .x-body { flex: 0 0 auto; height: 96px; max-height: 96px }
#hcx[data-size="mid"] .x-hd { padding: 10px 13px }
#hcx[data-size="mid"] .x-chips { display: none }
#hcx[data-size="mid"] .x-priv { display: none }
#hcx[data-size="mid"] .x-ft { padding: 9px 12px }
#hcx[data-size="mid"] .x-lead-s { display: none }
#hcx .x-strip { display: none }
#hcx[data-size="mid"] .x-strip { display: flex; align-items: center; gap: 8px; padding: 8px 12px; background: var(--panel); color: #fff; border-bottom: 2px solid var(--acc); cursor: pointer; flex: 0 0 auto }
#hcx .x-strip-k { font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--acc-soft); flex: 0 0 auto }
#hcx .x-strip-t { font-size: 11.5px; font-weight: 600; flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
#hcx .x-strip-go { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 4px; color: var(--acc-soft); flex: 0 0 auto; background: rgba(70,166,216,.14) }
#hcx .x-strip:hover .x-strip-go { background: var(--acc); color: #fff }
#hcx .x-strip-go svg { display: block; width: 12px; height: 12px }
#hcx[data-size="bar"] { width: auto }
#hcx .x-bar { display: flex; align-items: center; gap: 10px; width: 306px; background: var(--panel); color: #fff; border: 1px solid rgba(255,255,255,.14); border-left: 5px solid var(--acc); border-radius: 10px; padding: 11px 13px 11px 10px; box-shadow: 0 0 0 2px rgba(255,255,255,.92), 0 10px 20px -6px rgba(8,14,28,.42), 0 28px 56px -18px rgba(8,14,28,.5); text-align: left; cursor: grab; touch-action: none; user-select: none; -webkit-user-select: none; transition: transform .16s, box-shadow .16s }
#hcx .x-bar:active { cursor: grabbing }
#hcx .x-bar:hover { transform: translateY(-2px); box-shadow: 0 0 0 2px #fff, 0 14px 26px -6px rgba(8,14,28,.46), 0 34px 66px -18px rgba(8,14,28,.56) }
#hcx .x-bar .x-mark { width: 20px; height: 20px }
#hcx .x-bar-x { flex: 1 1 auto; min-width: 0 }
#hcx .x-bar-k { display: block; font-size: 9px; font-weight: 700; letter-spacing: .13em; text-transform: uppercase; color: var(--acc-soft); margin-bottom: 2px }
#hcx .x-bar-t { display: block; font-size: 12.5px; font-weight: 600; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis }
#hcx .x-bar-go { flex: 0 0 auto; width: 28px; height: 28px; border-radius: 6px; background: var(--acc); color: #fff; display: grid; place-items: center }
#hcx .x-bar-go svg { display: block; width: 14px; height: 14px }
/* ---------- mobile ---------- */
/* House standard, per the "Chat widget - mobile behavior specification" v1.0
   (19 Aug 2026). Two rules govern everything below:
     1. the widget anchors TOP RIGHT -- never the bottom, never full-bleed left
     2. it never covers the site nav, in any state, at any width
   The nav floor is MEASURED in JS and written to --nav-h. Do not hardcode it:
   the nav changes height at 760px and would move again if HFA add an
   announcement bar. Mobile takes the measurement flush (+0); desktop +12. */
@media (max-width: 600px) {
  #hcx { --hcx-mtop: var(--nav-h, 78px);
         --hcx-h78: calc(78 * var(--hcx-vh) - var(--hcx-mtop) - env(safe-area-inset-top));
         --hcx-h93: calc(93 * var(--hcx-vh) - var(--hcx-mtop) - env(safe-area-inset-top)) }
  /* expanded (mid/full): a sheet hanging flush from the nav. No room for a
     floating panel at 375px, so it goes edge to edge -- square top corners and
     no top border, because a gap with square corners reads as a render bug. */
  #hcx, #hcx[data-wide="1"], #hcx[data-size="mid"] { left: 0 !important; right: 0 !important; top: var(--hcx-mtop) !important; width: auto }
  /* resting (bar): a floating pill in the TOP-RIGHT corner, 10px in.
     Keeps its desktop shape -- all four corners rounded, accent edge left,
     drop shadow -- because it is a floating object, not a docked banner. */
  #hcx[data-size="bar"] { left: auto !important; right: 10px !important; bottom: auto !important;
                          top: calc(var(--hcx-mtop) + 10px) !important;
                          width: auto; max-width: calc(100% - 20px) }
  #hcx .x-hd, #hcx .x-bar { cursor: default }
  #hcx .x-grip { display: none }
  /* intrinsic width so a short teaser stays compact; the cap stops a long one
     ever overflowing the screen. 44px floor keeps it a legal tap target.
     The cap is 100% and NOT 100vw: on a fixed element 100vw INCLUDES the
     scrollbar, so calc(100vw - 20px) plus a side anchor overhangs the edge
     under a classic scrollbar. Same trap flagged here on 2026-07-14. */
  #hcx .x-bar { width: auto; max-width: 100%; min-height: 44px }
  #hcx[data-size="mid"] .x-body { flex: 0 0 auto; height: 84px; max-height: 84px }
  #hcx .x-shell { border-radius: 0 0 var(--r) var(--r); border-left: none; border-right: none; border-top: none;
                  max-height: var(--hcx-h78) }
  #hcx .x-hd { padding-top: 11px }
  #hcx .x-split { flex-direction: column }
  #hcx .x-panel { width: auto !important; max-height: 0; border-right: none; transition: max-height .52s cubic-bezier(.19,1,.22,1) }
  #hcx[data-panel="1"] .x-shell { height: var(--hcx-h93); max-height: var(--hcx-h93) }
  #hcx[data-panel="1"] .x-panel { height: 55%; max-height: 55%; border-bottom: 2px solid var(--acc) }
  #hcx[data-size="mid"] .x-panel { height: 0 !important; max-height: 0 !important; border-bottom: none }
  #hcx[data-size="mid"][data-panel="1"] .x-shell { height: auto; max-height: var(--hcx-h78) }
  #hcx .x-p-in { width: auto; transform: translateY(-8px) }
  #hcx[data-panel="1"] .x-p-in { transform: none }
  #hcx .x-inbar textarea { font-size: 16px !important }
  #hcx .x-send { width: 44px; height: 44px }
  #hcx .x-chip { min-height: 44px }
  #hcx .x-ib { width: 44px; height: 44px }
  #hcx .x-ft { padding-bottom: calc(10px + env(safe-area-inset-bottom)) }
  /* keyboard up (2026-09-21): the JS measures the band visible above the iOS
     keyboard and writes --hcx-kbmax. The messages keep every pixel left once
     header and composer are placed; the privacy line and the safe-area pad
     (the keyboard covers the home indicator) give theirs back. */
  #hcx[data-kb="1"] .x-shell { max-height: var(--hcx-kbmax) !important }
  #hcx[data-kb="1"][data-panel="1"] .x-shell { height: var(--hcx-kbmax) }
  #hcx[data-kb="1"] .x-priv { display: none }
  #hcx[data-kb="1"] .x-ft { padding-bottom: 8px }

  /* ---- booking state -- option 1, answered 2026-08-24 ----
     The scheduler takes the whole shell under the nav. The conversation is
     REMOVED for the duration, not hidden behind it, so there is nothing to
     scroll underneath and no composer to fight the phone keyboard.
     100vh, not the 93vh panel state: 93vh is tall because the situation panel
     is out, and that panel eats 55% of it. */
  #hcx { --hcx-hbk: calc(100 * var(--hcx-vh) - var(--hcx-mtop) - env(safe-area-inset-top)) }
  #hcx[data-booking="1"] .x-split { display: none }
  #hcx[data-booking="1"] .x-shell { height: var(--hcx-hbk); max-height: var(--hcx-hbk) }
  #hcx[data-booking="1"] .x-book { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0 }
  #hcx[data-booking="1"] .x-sched-wrap { flex: 1 1 auto; min-height: 0; border: 0; border-radius: 0 }
  #hcx[data-booking="1"] .x-sched-fr { height: 100% }
  #hcx .x-book-hd { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 2px; background: #fff; border-bottom: 1px solid var(--ln) }
  #hcx .x-book-back { min-height: 44px; padding: 0 10px; background: none; border: 0; font: inherit; font-weight: 600; color: var(--acc-d); cursor: pointer }
  #hcx .x-book-t { font-weight: 600; color: var(--panel) }
  /* collapse/expand have nothing to act on while the conversation is out */
  #hcx[data-booking="1"] .x-ib.x-up, #hcx[data-booking="1"] .x-ib[data-a="restart"] { display: none }

  /* Standard v2.0 section 6a: on a phone the open widget PUSHES the page down,
     it never covers it. It can take 78% of the screen (93% with the situation
     panel), so covering means the visitor cannot read the page they came for
     without closing the chat.

     padding-top on body, deliberately: margins collapse, and a transform would
     break every position:fixed descendant -- the site header is fixed. The
     value is published by the widget as --hcx-push; when the widget is absent
     the attribute never appears and no page reserves anything. */
  html[data-hcx-open] body {
    padding-top: var(--hcx-push, 0px);
  }
  /* DEVIATION from v2.0 6a, flagged 2026-08-20: the rule eases the
     padding over .26s. The ease has to come out, because the page moves twice
     on one state change -- the push grows AND the hero releases the resting
     pill's clearance -- and only one of the two can be animated. While the
     ease runs, the document has not finished growing, so the browser clamps
     the compensating scroll and a visitor reading mid-page slips ~80px. Both
     changes instant means the correction is exact. The widget's own open
     animation still carries the motion. Measured before/after: 83px -> 0px. */
}

/* The mobile menu (hamburger appears at <=980px) opens as a full-width drop
   inside the header and can run 500px+ tall. The concierge outranks it on
   z-index, so it steps aside entirely while the menu is open. */
@media (max-width: 980px) {
  header.nav.menu-open ~ #hcx { display: none }
}


/* ---- consent gate + privacy microcopy, ported from Deb's v4.3 package 2026-09-29 ---- */
#hcx .x-priv-s { display: none }
#hcx .x-fine { display: block; font-size: 10.5px; line-height: 1.45; color: var(--ink-f) }
#hcx .x-fine a { color: var(--ink-s) }
/* ---------- consent gate: prior consent, input disabled behind it ---------- */
#hcx .x-gate { display: none }
#hcx[data-gate="1"] .x-gate { display: flex; flex: 1 1 auto; min-height: 0; overflow-y: auto; align-items: flex-start }
#hcx .x-gate-in { padding: 16px 16px 18px; animation: x-rise .34s both }
#hcx .x-gate-h { font-family: 'Libre Caslon Text', Georgia, serif; font-size: 17px; font-weight: 600; color: var(--ink); letter-spacing: -.01em; margin-bottom: 9px }
#hcx .x-gate-p { font-size: 12.5px; line-height: 1.5; color: var(--ink-s); margin: 0 0 9px }
#hcx .x-gate-warn { color: var(--ink); border-left: 2px solid var(--acc); padding-left: 10px }
#hcx .x-gate-warn b { font-weight: 600 }
#hcx .x-gate-btns { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 14px }
#hcx .x-gate-go { font: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .01em; color: #fff; background: var(--acc); border: 0; border-radius: 9px; padding: 10px 16px; cursor: pointer; transition: background .15s, transform .12s }
#hcx .x-gate-go:hover { background: #166D99; transform: translateY(-1px) }
#hcx .x-gate-go:active { transform: translateY(0) }
#hcx .x-gate-lk { font-size: 11.5px; color: var(--ink-s); text-decoration: underline; text-underline-offset: 2px }
#hcx .x-gate-lk:hover { color: var(--acc) }
#hcx .x-priv-l { display: none }
#hcx .x-priv-s { display: inline }
#hcx .x-gate-go { min-height: 44px }