/* Help mode skeleton (XA-4e9b6a2bc5). Tokens come from theme-beta.css with literal fallbacks. */
/* XA-93196e248f: room the round Help button needs (wider than a phone; 0 on a phone page whose help is the top bar "?", XA-48827c6420; the offer pages' floating pill keeps it); the staff footer and the realtor page bottom both clear it by this much. Defined here once; both layouts load this file. */
:root{--bb-help-clear:84px}
@media (max-width:575.98px){:root:has(#bb-help-top){--bb-help-clear:0px}}
/* XA-ed2bf476ec: the page body always ends with the Help button's room, at every width, so the fixed button can never sit on the last row's controls (the campaign wait row delete x at 1440). */
.bb-body-clear{padding-bottom:calc(var(--bb-help-clear) + env(safe-area-inset-bottom,0px))}
#bb-help-bar{position:fixed;top:0;left:0;right:0;z-index:10050;display:flex;align-items:center;gap:12px;flex-wrap:wrap;
  padding:8px 12px;background:var(--r-ink,#0B1330);color:#fff;font-size:14px;font-family:inherit}
#bb-help-bar .bb-help-bar-text{flex:1 1 auto}
#bb-help-bar button{min-height:36px;padding:0 18px;border:0;border-radius:999px;cursor:pointer;font-weight:600;font-size:14px;
  background:var(--r-accent,#E9B11C);color:var(--r-ink,#0B1330)}
body.bb-help-on [data-help]{outline:2px dashed var(--r-accent,#E9B11C);outline-offset:2px;cursor:help}
body.bb-help-on [data-help].bb-help-selected{outline:2px solid var(--r-accent,#E9B11C);box-shadow:0 0 0 5px var(--r-accent-soft,#FDF3CF)}
#bb-help-explain{position:fixed;z-index:10060;background:#fff;color:var(--r-fg-2,#3E4664);font-family:inherit}
#bb-help-explain .bb-help-title{font-size:17px;font-weight:600;color:var(--r-ink,#0B1330);margin:0 0 6px}
#bb-help-explain .bb-help-text{font-size:15px;line-height:1.45;margin:0;color:var(--r-fg-2,#3E4664)}
#bb-help-explain .bb-help-grab{display:none}
#bb-help-explain.bb-help-sheet{left:0;right:0;bottom:0;padding:10px 18px calc(18px + env(safe-area-inset-bottom,0px));
  border-radius:18px 18px 0 0;box-shadow:0 -8px 30px rgba(11,19,48,.25)}
#bb-help-explain.bb-help-sheet .bb-help-grab{display:block;width:40px;height:4px;border-radius:2px;background:var(--r-border,#E5E7EE);margin:0 auto 12px}
#bb-help-explain.bb-help-sheet .bb-help-gotit{display:block;width:100%;min-height:44px;margin-top:14px;border:0;border-radius:10px;
  background:var(--r-ink,#0B1330);color:#fff;font-size:15px;font-weight:600;cursor:pointer}
#bb-help-explain.bb-help-bubble{width:280px;padding:14px 16px;border:1px solid var(--r-border,#E5E7EE);border-radius:12px;
  box-shadow:0 10px 30px rgba(11,19,48,.18)}
#bb-help-explain.bb-help-bubble .bb-help-gotit{margin-top:10px;padding:0;border:0;background:none;cursor:pointer;
  color:var(--r-blue,#1E6FEA);font-size:14px;font-weight:600}
#bb-help-explain.bb-help-bubble::before{content:"";position:absolute;top:-7px;left:var(--bb-help-arrow,24px);width:12px;height:12px;
  background:#fff;border-left:1px solid var(--r-border,#E5E7EE);border-top:1px solid var(--r-border,#E5E7EE);transform:rotate(45deg)}
#bb-help-explain.bb-help-bubble.bb-help-pinned::before{display:none}
#bb-help-explain.bb-help-bubble.bb-help-above::before{top:auto;bottom:-7px;transform:rotate(225deg)}

.bb-help-video{position:relative;width:100%;aspect-ratio:16/9;background:#000;border-radius:10px;overflow:hidden}
.bb-help-video iframe,.bb-help-video video{position:absolute;inset:0;width:100%;height:100%;border:0}
.bb-help-video-inline{margin-top:12px}
.bb-help-watch{display:inline-flex;align-items:center;gap:8px;margin-top:12px;padding:0 14px;min-height:36px;border:1px solid var(--r-accent,#E9B11C);
  border-radius:999px;background:var(--r-accent-soft,#FDF3CF);color:var(--r-ink,#0B1330);font-size:14px;font-weight:600;cursor:pointer}
#bb-help-explain.bb-help-sheet .bb-help-watch{display:flex;width:100%;justify-content:center;min-height:44px}
#bb-help-vo{position:fixed;inset:0;z-index:10080;display:flex;align-items:center;justify-content:center;padding:16px}
.bb-help-vo-back{position:absolute;inset:0;background:rgba(11,19,48,.72)}
.bb-help-vo-card{position:relative;width:min(900px,100%);padding-top:44px}
.bb-help-vo-x{position:absolute;top:0;right:0;width:40px;height:40px;border:0;border-radius:999px;background:var(--r-accent,#E9B11C);
  color:var(--r-ink,#0B1330);font-size:24px;line-height:1;cursor:pointer}

/* XA-48827c6420: on phones help is the "?" in the top bar (#bb-help-top) and the floating button is gone, so nothing floats over the page and
   no phone page needs room for it: the ONE room token is 0 at phone width. Wider screens keep the round button and its room. */
/* Any sticky or fixed bottom bar wears .bb-help-clear-bar and keeps its right edge clear of the round button (token; 0 on a phone). Never per-page padding. */
.bb-help-clear-bar{padding-right:var(--bb-help-clear,84px)!important;box-sizing:border-box}
/* XA-2da0045817, XA-82b6b4426e: the standalone page's own floating "Help mode" pill (_HelpModeStandalone.cshtml, no top bar there) still floats on a phone,
   so it alone keeps hiding while a field has focus and while the page scrolls. The round button (#bb-help-widget) is gone on phones and needs neither. */
@media (max-width:575.98px){
body:has(input:not([type=checkbox],[type=radio],[type=button],[type=submit],[type=reset],[type=range],[type=file],[type=color],[type=image]):focus,select:focus,textarea:focus) #bb-help-launch{display:none!important}
body.bb-help-typing #bb-help-launch{display:none!important}
#bb-help-launch{transition:opacity .18s ease,transform .18s ease}
body.bb-help-scrolling #bb-help-launch:not(:focus){opacity:0;transform:translateY(8px);pointer-events:none}
}
@media (max-width:575.98px) and (prefers-reduced-motion:reduce){#bb-help-launch{transition:none}}

/* XA-48827c6420: the top bar help "?" shows only on phones (the phone rule below); same look as the bell next to it. */
.navbar-top .right-list li.bb-help-top-li{display:none;padding:5px 4px}
#bb-help-top{width:34px;height:34px;border:0;border-radius:50%;background:transparent;color:var(--grey-color,#6b7280);font-size:22px;font-weight:600;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
#bb-help-top:focus-visible{outline:none;box-shadow:0 0 0 3px rgba(37,99,235,.45)}
@media (max-width:575.98px){
  #bb-help-fab{display:none!important}
  .navbar-top .right-list li.bb-help-top-li{display:inline-flex}
  /* the open panel hangs under the top bar, inside the viewport (its own max-width and scroll clamps still apply) */
  #bb-help-widget{top:calc(65px + env(safe-area-inset-top,0px) + 8px)!important;bottom:auto!important;right:12px!important;max-height:calc(100dvh - 65px - env(safe-area-inset-top,0px) - 20px)!important}
  #bb-help-panel{max-height:calc(100dvh - 65px - env(safe-area-inset-top,0px) - 20px)!important;max-width:calc(100vw - 24px)!important}
}

/* XA-2da0045817: ONE rule hides the floating Help pill (z-index 9999, above every overlay) whenever ANY pop-up is open, in both shells:
   the realtor Add a Buyer pop-up (.bb-modal[data-open]), Bootstrap (.modal.show) native <dialog open>, and the custom pop-ups: no-campaign-agents (.nca-overlay), Send Later (.sl-modal), Re-engage chooser (.bulk-campaign-overlay, exists only while open) and the officer Pipeline pop-ups (needs-review, duplicates, enroll, follow-up), which open by inline display:flex. It used to be a realtor-only rule in _Layout.cshtml. */
body:has(:is(.bb-modal[data-open],.modal.show,dialog[open],
  .nca-overlay:not([hidden]),.sl-modal:not([hidden]),.bulk-campaign-overlay,.tt-pick:not([hidden]),
  #needsReviewModal[style*="display: flex"],#duplicatesModal[style*="display: flex"],#dripEnrollModal[style*="display: flex"],#followUpBackdrop[style*="display: flex"])) #bb-help-widget{display:none!important}