/* BHROMI — "Need help?" sheet v2: clean white, navy text, brand blue + yellow accents (loads last) */
.bh-hl-sheet{--hn:#06064a;--hm:#5d6788;--hl:#e4e9f1;--hb:#1B4FF1;--hy:#FFB400;font-family:"Inter","Noto Sans Bengali",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#fff;color:var(--hn);box-shadow:0 -10px 40px rgba(6,6,74,.22);padding-bottom:calc(14px + env(safe-area-inset-bottom,0px))}
.bh-hl-backdrop{background:rgba(6,6,74,.42)}
@media (max-width:767px){.bh-hl-sheet{border-radius:24px 24px 0 0}}
@media (min-width:768px){.bh-hl-sheet{box-shadow:0 20px 50px rgba(6,6,74,.22),0 0 0 1px rgba(6,6,74,.06);padding-bottom:12px}}

/* header */
.bh-hl-sheet .bh-hl-head{padding:10px 16px 14px;color:var(--hn);background:#fff;border-bottom:1px solid var(--hl);position:relative}
.bh-hl-sheet .bh-hl-head::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;background:linear-gradient(90deg,#FFD23F,#FFB400)}
.bh-hl-sheet .bh-hl-grab{display:block;width:38px;height:4px;margin:2px auto 12px;background:#cdd5e3}
.bh-hl-sheet .bh-hl-head-row{gap:12px}
.bh-hl-sheet .bh-hl-avatar{width:44px;height:44px;border-radius:14px;background:#EEF3FF;color:var(--hb);box-shadow:none}
.bh-hl-sheet .bh-hl-avatar .bh-hl-ic{width:22px;height:22px}
.bh-hl-sheet .bh-hl-ttl h2{color:var(--hn)!important;font-size:18px;font-weight:800;letter-spacing:-.01em}
.bh-hl-sheet .bh-hl-ttl p{margin-top:4px;font-size:12.5px;font-weight:500;color:var(--hm)}
.bh-hl-sheet .bh-hl-dot{width:7px;height:7px;background:#22c55e;box-shadow:0 0 0 3px rgba(34,197,94,.18)}
.bh-hl-sheet .bh-hl-x{width:34px;height:34px;background:#F1F4F9;color:var(--hn)}
.bh-hl-sheet .bh-hl-x:hover{background:#E4E9F1;transform:none}

/* quick actions */
.bh-hl-sheet .bh-hl-quick{gap:10px;padding:16px 16px 6px}
.bh-hl-sheet .bh-hl-tile{box-sizing:border-box;min-width:0;min-height:0;flex-direction:row;align-items:center;gap:11px;padding:12px;border-radius:16px;color:var(--hn);box-shadow:none;border:1px solid var(--hl);background:#fff}
.bh-hl-sheet .bh-hl-tile[data-tone="call"]{background:#F4F8FF;border-color:#D6E3FF}
.bh-hl-sheet .bh-hl-tile[data-tone="wa"]{background:#F2FBF6;border-color:#CBEBD8}
.bh-hl-sheet .bh-hl-tile:hover{transform:none;box-shadow:0 4px 14px rgba(6,6,74,.10)}
.bh-hl-sheet .bh-hl-tile:active{transform:scale(.98)}
.bh-hl-sheet .bh-hl-tile-ic{flex:none;width:38px;height:38px;border-radius:12px;color:#fff}
.bh-hl-sheet .bh-hl-tile[data-tone="call"] .bh-hl-tile-ic{background:var(--hb)}
.bh-hl-sheet .bh-hl-tile[data-tone="wa"] .bh-hl-tile-ic{background:#22B35E}
.bh-hl-sheet .bh-hl-tile .bh-hl-rt{min-width:0;gap:2px}
.bh-hl-sheet .bh-hl-tile b{font-size:14.5px;font-weight:700;color:var(--hn);white-space:nowrap}
.bh-hl-sheet .bh-hl-tile small{font-size:11.5px;font-weight:500;color:var(--hm);opacity:1;line-height:1.25}

/* list */
.bh-hl-sheet .bh-hl-list{margin:6px 16px 0;padding:0}
.bh-hl-sheet .bh-hl-row{gap:12px;padding:12px 2px;border-radius:0;border-bottom:1px solid var(--hl);color:var(--hn)}
.bh-hl-sheet .bh-hl-row:last-child{border-bottom:0}
.bh-hl-sheet .bh-hl-row:hover,.bh-hl-sheet .bh-hl-row:focus-visible{background:transparent}
.bh-hl-sheet .bh-hl-row:active{background:#F6F8FC}
.bh-hl-sheet .bh-hl-chip{width:40px;height:40px;border-radius:12px}
.bh-hl-sheet .bh-hl-row[data-tone="msgr"] .bh-hl-chip{background:#E8F1FF;color:#0A7CFF}
.bh-hl-sheet .bh-hl-row[data-tone="mail"] .bh-hl-chip{background:#FFF4CC;color:#8A5A00}
.bh-hl-sheet .bh-hl-row[data-tone="help"] .bh-hl-chip{background:#ECEEFA;color:var(--hn)}
.bh-hl-sheet .bh-hl-row b{font-size:14.5px;font-weight:700;color:var(--hn)}
.bh-hl-sheet .bh-hl-row small{font-size:12px;font-weight:500;color:var(--hm)}
.bh-hl-sheet .bh-hl-go{width:16px;height:16px;color:#b3bdd0}
.bh-hl-sheet .bh-hl-row:hover .bh-hl-go{color:var(--hb)}
.bh-hl-sheet .bh-hl-tile:focus-visible,.bh-hl-sheet .bh-hl-row:focus-visible,.bh-hl-sheet .bh-hl-x:focus-visible{outline:2px solid var(--hy);outline-offset:2px}
@media (max-width:360px){.bh-hl-sheet .bh-hl-tile small{display:none}}

/* v2.1: clearer close button, drag handle area, bigger icons */
.bh-hl-sheet .bh-hl-x{width:38px;height:38px;background:#fff;color:var(--hn);border:1px solid #d9e0ec;box-shadow:0 3px 10px rgba(6,6,74,.18),0 1px 2px rgba(6,6,74,.10)}
.bh-hl-sheet .bh-hl-x:hover{background:#fff;box-shadow:0 5px 14px rgba(6,6,74,.24),0 1px 2px rgba(6,6,74,.12)}
.bh-hl-sheet .bh-hl-x:active{transform:scale(.94);box-shadow:0 1px 4px rgba(6,6,74,.2)}
.bh-hl-sheet .bh-hl-x .bh-hl-ic{width:18px;height:18px;stroke-width:2.4}
@media (max-width:767px){.bh-hl-sheet .bh-hl-head{touch-action:none;cursor:grab}.bh-hl-sheet .bh-hl-grab{width:44px;height:5px;margin:0 auto 14px}}
.bh-hl-sheet .bh-hl-tile-ic .bh-hl-ic{width:21px;height:21px}
.bh-hl-sheet .bh-hl-chip .bh-hl-ic{width:22px;height:22px}
.bh-hl-sheet .bh-hl-row[data-tone="msgr"] .bh-hl-chip .bh-hl-ic{width:20px;height:20px}