/* Besties app layer, V2.2.0. Additive only: nothing here changes the site's own styles. */
:root{--bb-ink:#2B2320;--bb-bg:#F5EEE3;--bb-card:#FFFBF5;--bb-accent:#9E1A15;--bb-line:rgba(43,35,32,.14)}
.bb-bar{position:fixed;left:12px;right:12px;bottom:calc(132px + env(safe-area-inset-bottom));z-index:900;display:flex;gap:8px;align-items:center;flex-wrap:wrap;padding:12px 14px;background:var(--bb-ink);color:#fff;border-radius:14px;box-shadow:0 8px 28px rgba(0,0,0,.28);font:500 15px/1.35 system-ui,sans-serif;max-width:560px;margin:0 auto}
.bb-bar .grow,.bb-bar>span{flex:1 1 180px}
.bb-btn{appearance:none;border:0;border-radius:999px;background:var(--bb-accent);color:#fff;font:600 15px/1 system-ui,sans-serif;padding:12px 18px;min-height:44px;cursor:pointer}
.bb-btn.ghost{background:transparent;color:inherit;box-shadow:inset 0 0 0 1px currentColor;opacity:.85}
.bb-btn:focus-visible,#bbTabs button:focus-visible,.bb-switch:focus-visible{outline:3px solid #1a73e8;outline-offset:2px}
.bb-offline{position:fixed;top:0;left:0;right:0;z-index:950;padding:calc(6px + env(safe-area-inset-top)) 12px 6px;background:#5f6368;color:#fff;text-align:center;font:500 14px/1.3 system-ui,sans-serif}
#bbToast{position:fixed;left:50%;bottom:calc(92px + env(safe-area-inset-bottom));transform:translate(-50%,12px);opacity:0;pointer-events:none;z-index:960;background:var(--bb-ink);color:#fff;padding:11px 16px;border-radius:12px;font:500 15px/1.3 system-ui,sans-serif;max-width:88vw;transition:opacity .2s,transform .2s}
#bbToast.on{opacity:1;transform:translate(-50%,0)}
.bb-scrim{position:fixed;inset:0;z-index:1000;background:rgba(20,14,12,.55);display:flex;align-items:center;justify-content:center;padding:20px}
.bb-card{background:var(--bb-card);color:var(--bb-ink);border-radius:20px;padding:26px 22px 20px;width:100%;max-width:420px;box-shadow:0 18px 50px rgba(0,0,0,.35);font-family:system-ui,sans-serif}
.bb-card h2{margin:10px 0 8px;font-size:22px;line-height:1.25}
.bb-card p{margin:0 0 18px;font-size:16px;line-height:1.5}
.bb-dots{display:flex;gap:6px}.bb-dots span{width:8px;height:8px;border-radius:50%;background:var(--bb-line)}.bb-dots span.on{background:var(--bb-accent)}
.bb-row{display:flex;gap:10px;flex-wrap:wrap}
.bb-card .bb-btn.ghost{color:var(--bb-ink)}
#bbVeil{position:fixed;inset:0;z-index:2000;background:var(--bb-bg);display:flex;align-items:center;justify-content:center;font:700 28px system-ui,sans-serif;color:var(--bb-accent)}
#bbPtr{position:fixed;top:0;left:0;right:0;z-index:940;display:flex;align-items:flex-end;justify-content:center;padding-bottom:6px;overflow:hidden;background:var(--bb-bg);color:var(--bb-ink);font:500 14px system-ui,sans-serif}
.bb-setting{display:flex;align-items:center;gap:12px;justify-content:space-between;padding:12px 4px;border-bottom:1px solid var(--bb-line)}
.bb-setting .txt{display:flex;flex-direction:column;gap:2px}.bb-setting small{opacity:.7;font-size:13px;line-height:1.35}
.bb-switch{flex:none;width:52px;height:30px;border-radius:999px;border:0;background:#9aa0a6;position:relative;cursor:pointer;padding:0}
.bb-switch .knob{position:absolute;top:3px;left:3px;width:24px;height:24px;border-radius:50%;background:#fff;transition:transform .15s}
.bb-switch[aria-checked="true"]{background:var(--bb-accent)}.bb-switch[aria-checked="true"] .knob{transform:translateX(22px)}
.bb-times{display:flex;gap:14px;padding:10px 4px}.bb-times input{font:inherit;padding:6px;margin-left:4px}
#bbSkip{position:fixed;left:8px;top:-60px;z-index:3000;background:#fff;color:#000;padding:10px 14px;border-radius:8px}
#bbSkip:focus{top:8px}
#bbSiteLink{display:none;position:fixed;top:calc(8px + env(safe-area-inset-top));right:10px;z-index:80;font:500 13px system-ui,sans-serif;color:inherit;opacity:.75;text-decoration:underline}
@media (display-mode:standalone){#bbSiteLink{display:block}}
.bb-pulse{animation:bbPulse 1.4s ease-out 1}
@keyframes bbPulse{0%{box-shadow:0 0 0 0 rgba(158,26,21,.55)}100%{box-shadow:0 0 0 18px rgba(158,26,21,0)}}
@media (prefers-reduced-motion:reduce){.bb-pulse{animation:none}#bbToast{transition:none}.bb-switch .knob{transition:none}}
/* bottom tabs */
#bbTabs{position:fixed;left:0;right:0;bottom:0;z-index:850;display:flex;background:var(--bb-card);border-top:1px solid var(--bb-line);padding-bottom:env(safe-area-inset-bottom)}
#bbTabs button{flex:1;appearance:none;background:none;border:0;color:#6b605a;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:58px;font:600 11px system-ui,sans-serif;position:relative;cursor:pointer}
#bbTabs button.on{color:var(--bb-accent)}
#bbTabs svg{width:24px;height:24px}
#bbTabs .bb-dot{position:absolute;top:8px;left:calc(50% + 6px);width:9px;height:9px;border-radius:50%;background:var(--bb-accent)}
#bbTabs .bb-dot[hidden]{display:none}
#bbTabs.bb-away{display:none}
html.bb-has-tabs body{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
@media (min-width:900px){#bbTabs{display:none}html.bb-has-tabs body{padding-bottom:0}.bb-bar{left:auto;right:20px;bottom:20px;margin:0}#bbToast{bottom:30px}}
/* MOD-81 calm mode hides asides; keep the opened menu reachable */
body.a11y-calm aside.sidebar.open{display:block!important}
/* keep the accessibility dock clear of the tab bar */
html.bb-has-tabs [class*="a11y-dock"],html.bb-has-tabs #a11y-dock{bottom:calc(76px + env(safe-area-inset-bottom))}
@media (min-width:900px){html.bb-has-tabs [class*="a11y-dock"],html.bb-has-tabs #a11y-dock{bottom:16px}}

/* while the side menu is open, the menu has the whole screen */
body:has(aside.sidebar.open) #a11y-dock{display:none}
body:has(.scrim) #a11y-dock,body:has(#bbWelcome) #a11y-dock{display:none}
#bbTabs[hidden]{display:none}