/* Brewmaster, the site's butler — matches the "Brewmaster site butler" mock-up.
   Colours are the site's own DF / BnB palette (same values as df-bnb-shell.css). */
#bm-butler{
  --bm-panel:#e6d9b4; --bm-panel2:#e6ddc2; --bm-accent:#205d58; --bm-on-accent:#f4efe0; --bm-text:#1a120e;
  --bm-stroke:rgba(26,18,14,.16); --bm-stroke2:rgba(26,18,14,.24); --bm-head-bg:#5b3f31; --bm-head-fg:#e6d9b4;
  --bm-me-bg:#205d58; --bm-me-fg:#f4efe0; --bm-bm-bg:#e6ddc2; --bm-err:#9b2c2c;
  position:fixed; right:24px; bottom:88px; z-index:99990;
  display:flex; flex-direction:column; align-items:flex-end; gap:12px;
  max-width:calc(100vw - 32px);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif; font-size:14px; line-height:1.45;
  color:var(--bm-text); pointer-events:none;
}
/* Colours follow the member's Theme (Default / Light / Dark / System) via data-skin,
   set by the theme's inc/theme-mode.php. .bm-bnb is only the fallback if that is missing. */
#bm-butler[data-skin="bnb"],
#bm-butler.bm-bnb:not([data-skin]){
  --bm-panel:#2b2b2b; --bm-panel2:#242424; --bm-accent:#d6863f; --bm-on-accent:#1a1209; --bm-text:#ffffff;
  --bm-stroke:rgba(255,255,255,.14); --bm-stroke2:rgba(255,255,255,.24); --bm-head-bg:#000000; --bm-head-fg:#ffffff;
  --bm-me-bg:#d6863f; --bm-me-fg:#1a1209; --bm-bm-bg:#242424; --bm-err:#ff8f8f;
}
#bm-butler > *{pointer-events:auto}
#bm-butler [hidden]{display:none !important}
#bm-butler *,#bm-butler *::before,#bm-butler *::after{box-sizing:border-box}
#bm-butler button{font:inherit; cursor:pointer; margin:0}
#bm-butler .bm-sr{position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap}
#bm-butler .bm-hp{position:absolute !important; left:-9999px !important; width:1px; height:1px; opacity:0}

/* icon */
#bm-butler .bm-icon{width:58px; height:58px; border-radius:999px; border:2px solid var(--bm-panel); background:var(--bm-accent); padding:0; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.35); display:flex}
#bm-butler .bm-icon img{width:100%; height:100%; object-fit:cover; display:block}
#bm-butler .bm-icon:hover{filter:brightness(1.08)}

/* intro card */
#bm-butler .bm-intro{width:340px; max-width:100%; background:var(--bm-panel); border:1px solid var(--bm-stroke2); border-radius:18px; box-shadow:0 12px 32px rgba(0,0,0,.35); display:flex; flex-direction:column; overflow:hidden}
#bm-butler .bm-intro-head{display:flex; align-items:center; gap:10px; padding:10px 10px 10px 12px; background:var(--bm-head-bg); color:var(--bm-head-fg)}
#bm-butler .bm-intro-titles{flex:1; min-width:0; display:flex; flex-direction:column; line-height:1.2}
#bm-butler .bm-title{font-size:15px; font-weight:900; color:var(--bm-head-fg)}
#bm-butler .bm-subtitle{font-size:12px; opacity:.75; color:var(--bm-head-fg)}
#bm-butler .bm-intro-main{padding:14px 16px 16px; display:flex; flex-direction:column; gap:12px}
#bm-butler .bm-intro-text{margin:0; color:var(--bm-text)}
#bm-butler .bm-x{width:32px; height:32px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--bm-head-fg); font-size:16px; line-height:1; flex-shrink:0; padding:0}

/* buttons */
#bm-butler .bm-row{display:flex; gap:8px; flex-wrap:wrap; align-items:center}
#bm-butler .bm-btn{min-height:40px; padding:8px 16px; border-radius:999px; border:1px solid var(--bm-stroke2); background:transparent; color:var(--bm-text); font-size:14px}
#bm-butler .bm-btn.bm-primary{border-color:var(--bm-accent); background:var(--bm-accent); color:var(--bm-on-accent); font-weight:700}
#bm-butler .bm-btn[disabled]{opacity:.6; cursor:wait}

/* panel */
#bm-butler .bm-panel{width:370px; max-width:100%; height:560px; max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px); min-height:340px; background:var(--bm-panel); border:1px solid var(--bm-stroke2); border-radius:18px; box-shadow:0 16px 40px rgba(0,0,0,.4); display:flex; flex-direction:column; overflow:hidden}
#bm-butler .bm-head{display:flex; align-items:center; gap:10px; padding:12px 12px 12px 14px; background:var(--bm-head-bg); color:var(--bm-head-fg)}
#bm-butler .bm-avatar{width:36px; height:36px; border-radius:999px; object-fit:cover; flex-shrink:0; background:var(--bm-accent)}
#bm-butler .bm-head-title{flex:1; font-size:15px; font-weight:900}
#bm-butler .bm-min{width:36px; height:36px; border-radius:999px; border:1px solid rgba(255,255,255,.3); background:transparent; color:var(--bm-head-fg); font-size:18px; line-height:1; padding:0}
#bm-butler .bm-body{flex:1; overflow-y:auto; padding:14px; display:flex; flex-direction:column; gap:10px; overscroll-behavior:contain}

#bm-butler .bm-msg{display:flex; flex-direction:column; max-width:100%}
#bm-butler .bm-msg.bm-me{align-items:flex-end}
#bm-butler .bm-msg.bm-bm{align-items:flex-start}
#bm-butler .bm-bubble{max-width:85%; padding:10px 13px; border-radius:16px; white-space:pre-wrap; overflow-wrap:anywhere}
#bm-butler .bm-me .bm-bubble{background:var(--bm-me-bg); color:var(--bm-me-fg); border-bottom-right-radius:6px}
#bm-butler .bm-bm .bm-bubble{background:var(--bm-bm-bg); color:var(--bm-text); border:1px solid var(--bm-stroke); border-bottom-left-radius:6px}
#bm-butler .bm-links{display:flex; flex-direction:column; gap:6px; margin-top:6px; max-width:85%}
#bm-butler .bm-link{display:flex; align-items:center; gap:8px; padding:9px 12px; border-radius:12px; background:var(--bm-panel2); border:1px solid var(--bm-stroke); color:var(--bm-accent); font-weight:800; text-decoration:none}
#bm-butler .bm-link:hover{text-decoration:underline}
#bm-butler .bm-typing{align-self:flex-start; font-size:13px; opacity:.7; font-style:italic; padding:2px 4px}

#bm-butler .bm-chips{display:flex; flex-wrap:wrap; gap:6px; margin-top:2px}
#bm-butler .bm-chip{min-height:36px; padding:6px 12px; border-radius:999px; border:1px solid var(--bm-stroke2); background:var(--bm-panel2); color:var(--bm-text); font-size:13px; font-weight:700}
#bm-butler .bm-chip:hover{filter:brightness(.96)}

#bm-butler .bm-form{display:flex; flex-direction:column; gap:8px; padding:12px; border-radius:14px; background:var(--bm-panel2); border:1px solid var(--bm-stroke)}
#bm-butler .bm-form-title{font-weight:900; color:var(--bm-accent)}
#bm-butler .bm-field{display:flex; flex-direction:column; gap:4px; font-size:13px; font-weight:700; color:var(--bm-text)}
#bm-butler .bm-input{height:40px; border-radius:10px; border:1px solid var(--bm-stroke2); background:var(--bm-panel); color:var(--bm-text); padding:0 10px; font:inherit; font-size:14px; font-weight:400; width:100%; margin:0}
#bm-butler .bm-textarea{height:auto; padding:8px 10px; resize:vertical}
#bm-butler .bm-input:focus{outline:2px solid color-mix(in srgb, var(--bm-accent) 60%, transparent); outline-offset:1px}
#bm-butler .bm-input[readonly]{opacity:.75}
#bm-butler .bm-err{font-size:13px; color:var(--bm-err); font-weight:700}

#bm-butler .bm-foot{border-top:1px solid var(--bm-stroke); padding:10px 12px 8px; display:flex; flex-direction:column; gap:6px}
#bm-butler .bm-askrow{flex-wrap:nowrap}
#bm-butler .bm-ask{flex:1; min-width:0; height:44px; border-radius:999px; background:var(--bm-panel2); padding:0 16px}
#bm-butler .bm-send{width:44px; height:44px; border-radius:999px; border:none; background:var(--bm-accent); color:var(--bm-on-accent); display:flex; align-items:center; justify-content:center; flex-shrink:0; padding:0}
#bm-butler .bm-footnote{justify-content:space-between; flex-wrap:nowrap; font-size:12px}
#bm-butler .bm-footnote span{opacity:.72; flex:1; min-width:0}
#bm-butler .bm-hide{flex-shrink:0}
#bm-butler .bm-hide{border:none; background:transparent; color:var(--bm-text); font-size:12px; text-decoration:underline; opacity:.8; padding:6px 2px; min-height:32px}

/* phone width */
@media (max-width:480px){
  #bm-butler{right:16px; bottom:80px}
  #bm-butler .bm-panel{width:calc(100vw - 32px); height:calc(100dvh - 110px); max-height:calc(100dvh - 110px)}
  #bm-butler .bm-intro{width:calc(100vw - 32px)}
}
@media print{#bm-butler{display:none !important}}

/* 31 Oct 2026 (Kat): his icon in the top bar, next to the light/dark button — brings him back after "Hide Brewmaster" */
.bm-head-btn { display: inline-flex; align-items: center; justify-content: center; overflow: hidden; padding: 0 !important; }
/* his picture fills the whole circle (was 26px, which left a big ring around him) */
.bm-head-btn img { width: 100% !important; height: 100% !important; max-width: none; border-radius: 50%; object-fit: cover; display: block; }
/* Safe size wherever the page's own bar styles don't size it (31 Oct 2026). The home,
   category and guide bars set their own button size, which wins over this. */
.bm-head-btn { width: 38px; height: 38px; border-radius: 50%; flex: 0 0 auto; }
#bnb-portal .bnb-topbar .bm-head-btn { width: 36px; height: 36px; border: 1px solid var(--border-light); }