/* ═══ BULLMAN HUB — the single Keelambi support layer (Phase B, 2026-08-19) ═══
   ONE support front door. Desktop: the nav portrait opens an anchored glass panel
   that belongs to the same material family as the mega sheets. Mobile: a compact
   character trigger opens a bottom sheet that obeys the existing bottom-slot
   governance. This file adds NO new sales CTA — it consolidates the ones that
   were already scattered (WhatsApp launcher, call icon, showroom entry, chip).

   DECLARED BULLMAN LAYER (no ad-hoc z-index): trigger 56 — above .stickybar(55),
   below .navmega(58) so the menu always wins; scrim 94 / sheet 95 — above the
   nav(60) and the legacy bm-overlay(90) while open. Nothing else is re-stacked. */
:root{
  --bm-z-trigger:56;
  --bm-z-scrim:94;
  --bm-z-panel:95;
  --bm-ease:cubic-bezier(.22,.61,.36,1);
}

/* ── the trigger: Bullman himself, never a generic bubble ────────────────── */
.bmh-fab{position:fixed;z-index:var(--bm-z-trigger);
  left:16px;bottom:calc(16px + env(safe-area-inset-bottom,0px));
  width:56px;height:56px;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(17,24,20,.10);background:rgba(251,250,247,.82);
  -webkit-backdrop-filter:blur(20px) saturate(1.6);backdrop-filter:blur(20px) saturate(1.6);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 8px 24px -10px rgba(10,20,16,.42);
  display:none;align-items:center;justify-content:center;overflow:hidden;
  transition:transform .18s var(--bm-ease),box-shadow .18s var(--bm-ease)}
.bmh-fab img{width:100%;height:100%;object-fit:cover;border-radius:50%;display:block}
.bmh-fab:hover,.bmh-fab:focus-visible{transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 14px 30px -12px rgba(10,20,16,.5)}
.bmh-fab:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:3px}
/* phones only — desktop already has the nav portrait, and adding a second
   Bullman would be exactly the clutter this phase removes */
@media(max-width:1023px){ .bmh-fab{display:flex} }
/* bottom-slot governance: when a primary contextual action owns the slot, the
   support layer steps back (same contract the stickybar/wizard already use) */
html.roiw-cta .bmh-fab,html.nav-open .bmh-fab,html.bmh-open .bmh-fab{
  opacity:0;visibility:hidden;pointer-events:none;transition:opacity .14s var(--bm-ease)}
/* lift clear of whichever bar is docked at the bottom on this page */
@media(max-width:1023px){
  body:has(.stickybar.show) .bmh-fab{bottom:calc(var(--sticky-h,67px) + 12px + env(safe-area-inset-bottom,0px))}
  body:has(.dt-dock.show) .bmh-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  body:has(.srm-bar.is-up) .bmh-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
  body:has(.kb-live.show) .bmh-fab{bottom:calc(86px + env(safe-area-inset-bottom,0px))}
}
@media(prefers-reduced-motion:reduce){ .bmh-fab{transition:none} }

/* ── scrim ──────────────────────────────────────────────────────────────── */
.bmh-scrim{position:fixed;inset:0;z-index:var(--bm-z-scrim);background:rgba(12,18,14,.28);
  opacity:0;visibility:hidden;transition:opacity .18s var(--bm-ease),visibility 0s linear .18s}
.bmh-scrim.on{opacity:1;visibility:visible;transition:opacity .2s var(--bm-ease),visibility 0s}
@media(min-width:1024px){ .bmh-scrim{background:rgba(12,18,14,.22)} }

/* ── the surface: one panel element, two intentional presentations ───────── */
.bmh{position:fixed;z-index:var(--bm-z-panel);
  background:rgba(252,251,248,.92);
  -webkit-backdrop-filter:blur(30px) saturate(1.55);backdrop-filter:blur(30px) saturate(1.55);
  border:1px solid rgba(17,24,20,.09);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.6),0 1px 2px rgba(10,20,16,.05),
    0 40px 110px -36px rgba(10,20,16,.45);
  visibility:hidden;opacity:0;pointer-events:none;
  display:flex;flex-direction:column;overflow:hidden}
.bmh.open{visibility:visible;opacity:1;pointer-events:auto}

/* MOBILE — a real bottom sheet: swipe-dismissible, safe-area aware */
@media(max-width:1023px){
  .bmh{left:0;right:0;bottom:0;border-radius:22px 22px 0 0;border-bottom:0;
    padding-bottom:env(safe-area-inset-bottom,0px);max-height:86vh;
    transform:translateY(101%);
    transition:transform .26s var(--bm-ease),opacity .01s linear,visibility 0s linear .26s}
  .bmh.open{transform:translateY(0);transition:transform .3s var(--bm-ease),visibility 0s}
  .bmh-grab{flex:0 0 auto;width:38px;height:4px;border-radius:4px;background:rgba(17,24,20,.18);
    margin:10px auto 2px}
}
/* DESKTOP — anchored to the nav portrait, not a modal, not a dropdown */
@media(min-width:1024px){
  .bmh{top:calc(84px + env(safe-area-inset-top,0px));right:max(20px,calc((100vw - 1280px)/2 + 10px));
    left:auto;bottom:auto;width:376px;border-radius:22px;
    transform:translateY(-8px) scale(.99);transform-origin:100% 0;
    transition:opacity .16s var(--bm-ease),transform .16s var(--bm-ease),visibility 0s linear .16s}
  .bmh.open{transform:none;transition:opacity .2s var(--bm-ease),transform .2s var(--bm-ease),visibility 0s}
  .bmh-grab{display:none}
}
@media(prefers-reduced-motion:reduce){
  .bmh,.bmh.open{transition:opacity .12s linear,visibility 0s;transform:none}
}

/* ── head: the character leads ───────────────────────────────────────────── */
.bmh-head{flex:0 0 auto;display:flex;align-items:center;gap:13px;padding:16px 20px 12px}
.bmh-por{flex:0 0 auto;width:48px;height:48px;border-radius:50%;overflow:hidden;
  background:var(--canvas-2,#F8F6F1);border:1px solid rgba(17,24,20,.08)}
.bmh-por img{width:100%;height:100%;object-fit:cover;display:block}
.bmh-id{display:flex;flex-direction:column;gap:1px;min-width:0}
.bmh-name{font-family:var(--f-display,"Bebas Neue",sans-serif);font-weight:400;letter-spacing:.05em;
  font-size:21px;line-height:1;color:var(--ink,#111)}
html[lang="kn"] .bmh-name{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif);font-weight:700;font-size:17px;letter-spacing:0}
.bmh-ask{font-size:13.5px;line-height:1.35;color:#4b4b50}
html[lang="kn"] .bmh-ask{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif)}
.bmh-x{position:absolute;top:12px;right:12px;width:34px;height:34px;border-radius:50%;
  border:0;background:transparent;color:#6b6b70;cursor:pointer;font-size:17px;line-height:1;
  display:flex;align-items:center;justify-content:center}
.bmh-x:hover{background:rgba(17,24,20,.06);color:var(--ink,#111)}
.bmh-x:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:2px}
/* touch: the close control must clear 44px like every other target in the sheet */
@media(max-width:1023px){ .bmh-x{top:14px;right:12px;width:44px;height:44px} }

/* ── modes: three calm rows, not a menu ─────────────────────────────────── */
.bmh-body{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:2px 16px 4px}
.bmh-mode{display:flex;align-items:center;gap:13px;width:100%;text-align:left;
  min-height:60px;padding:11px 13px;margin-bottom:8px;border-radius:15px;
  border:1px solid rgba(17,24,20,.08);background:rgba(255,255,255,.62);
  cursor:pointer;text-decoration:none;color:var(--ink,#111);
  transition:border-color .16s var(--bm-ease),background-color .16s var(--bm-ease),transform .16s var(--bm-ease)}
.bmh-mode:hover,.bmh-mode:focus-visible{border-color:rgba(255,153,51,.55);background:#fff;transform:translateY(-1px)}
.bmh-mode:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:2px}
@media(prefers-reduced-motion:reduce){ .bmh-mode:hover{transform:none} }
.bmh-ico{flex:0 0 auto;width:38px;height:38px;border-radius:11px;display:flex;align-items:center;
  justify-content:center;background:var(--canvas-2,#F8F6F1);color:var(--saffron-ink,#C2700E)}
.bmh-ico svg{width:19px;height:19px}
.bmh-mt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto}
.bmh-ml{font-family:var(--f-head,"DM Sans",sans-serif);font-weight:600;font-size:15px;line-height:1.2}
html[lang="kn"] .bmh-ml{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif)}
.bmh-ms{font-size:12.5px;line-height:1.3;color:#6b6b70}
html[lang="kn"] .bmh-ms{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif)}
.bmh-arw{flex:0 0 auto;color:#9aa0a6}
.bmh-mode:hover .bmh-arw{color:var(--saffron-ink,#C2700E)}

/* ── escalation: quieter by design — support, not a sales push ──────────── */
.bmh-foot{flex:0 0 auto;padding:12px 20px calc(16px + env(safe-area-inset-bottom,0px));
  border-top:1px solid rgba(17,24,20,.08);background:rgba(255,255,255,.35)}
@media(min-width:1024px){ .bmh-foot{padding-bottom:16px} }
.bmh-fl{display:block;font-family:var(--f-head,"DM Sans",sans-serif);font-weight:700;font-size:10.5px;
  letter-spacing:.11em;text-transform:uppercase;color:#8a8a90;margin-bottom:9px}
html[lang="kn"] .bmh-fl{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif);letter-spacing:0;text-transform:none}
.bmh-ch{display:flex;gap:8px}
.bmh-c{flex:1 1 0;display:flex;flex-direction:column;align-items:center;gap:5px;
  min-height:56px;padding:9px 6px;border-radius:13px;text-decoration:none;
  border:1px solid rgba(17,24,20,.08);background:rgba(255,255,255,.7);color:var(--ink,#111);
  font-family:var(--f-head,"DM Sans",sans-serif);font-weight:600;font-size:12px;
  transition:border-color .16s var(--bm-ease),background-color .16s var(--bm-ease)}
html[lang="kn"] .bmh-c{font-family:var(--f-kn,"Noto Sans Kannada",sans-serif)}
.bmh-c:hover,.bmh-c:focus-visible{border-color:rgba(17,24,20,.2);background:#fff}
.bmh-c:focus-visible{outline:2px solid var(--saffron,#FF9933);outline-offset:2px}
/* immediate tap feedback — the farmer is about to leave for another app */
.bmh-c:active{background:rgba(17,24,20,.06);transform:scale(.985)}
@media(prefers-reduced-motion:reduce){ .bmh-c:active{transform:none} }
/* three marks, three natural aspect ratios — sized to the same OPTICAL weight so
   the row reads as one support system rather than three pasted logos. The Gmail
   envelope is wider than it is tall, so it is matched on height, not on box. */
.bmh-i{display:block;flex:0 0 auto}
.bmh-i--wa{width:18px;height:18px}
.bmh-i--call{width:18px;height:18px}
.bmh-i--gmail{width:23px;height:17px;margin-top:1px}
.bmh-i--form{width:18px;height:18px}
.bmh-c--wa{color:#1FA855}
/* FOUR channels since 2026-08-19 (WhatsApp · Call · Email · Form). At the
   desktop panel's 376px the tiles land near 78px each, which is under the
   natural width of "WhatsApp" at 12px — so the row's type steps down and the
   labels are allowed to ellipsis rather than wrap into a second line and break
   the tiles' shared height. Below 360px the row folds to 2x2 instead of
   squeezing four 60px targets. */
.bmh-ch{flex-wrap:wrap}
.bmh-c{min-width:0;font-size:11.5px}
.bmh-c>span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
@media(max-width:359px){ .bmh-c{flex:1 1 calc(50% - 4px)} }

/* the legacy re-entry chip is superseded by the hub trigger — one door only */
.bm-chip{display:none!important}
