/* Books on a phone + as an app (3 Nov 2026). Loaded after books-b2.css. Colours come from the Books theme. */
.bk-mtop,.bk-mbar,.bk-shade{display:none}
/* the shared "Get the app" sheet speaks the CRM's colour names: map them to the Books theme */
.cx-sheet-wrap{--panel:var(--card);--text:var(--ink);--muted:var(--muted);--line:var(--line);--hover:var(--soft);--hot:#C96B35;--on-hot:#fff}
.side-foot .getapp{all:unset;cursor:pointer;font-size:13px;color:inherit;opacity:.85;display:inline-flex;align-items:center;gap:6px;padding:6px 0}
.side-foot .getapp:hover{opacity:1;text-decoration:underline}

@media (max-width:860px){
  /* one slim top bar instead of the whole menu stacked above every page */
  .bk-mtop{display:flex;align-items:center;gap:8px;position:sticky;top:0;z-index:30;padding:8px 12px;padding-top:max(8px,env(safe-area-inset-top));background:var(--card);border-bottom:1px solid var(--line)}
  .bk-mtop .bk-mlogo{flex:1;display:flex;align-items:center;min-width:0}
  .bk-mtop .bk-mlogo img{height:30px;width:auto}
  .bk-mtop button,.bk-mtop .bk-mbell{all:unset;cursor:pointer;width:40px;height:40px;display:grid;place-items:center;border-radius:50%;position:relative;color:var(--ink)}
  .bk-mtop .ico{width:22px;height:22px}
  .bk-mtop .dot,.bk-mbar .dot{position:absolute;top:2px;right:0;min-width:16px;height:16px;line-height:16px;font-size:10px;font-weight:800;text-align:center;border-radius:9px;background:#C96B35;color:#fff;padding:0 4px;box-sizing:border-box}
  /* the menu slides in from the left */
  .shell>.side{position:fixed;inset:0 auto 0 0;z-index:50;width:min(84vw,320px);height:100dvh;overflow:auto;transform:translateX(-102%);transition:transform .22s ease;padding-top:max(14px,env(safe-area-inset-top));box-shadow:0 0 40px rgba(0,0,0,.3)}
  .shell>.side nav{grid-template-columns:1fr}
  body.bk-menu-open .shell>.side{transform:none}
  .bk-shade{display:block;position:fixed;inset:0;z-index:49;background:rgba(5,10,25,.45);opacity:0;pointer-events:none;transition:opacity .2s}
  body.bk-menu-open .bk-shade{opacity:1;pointer-events:auto}
  body.bk-menu-open{overflow:hidden}
  /* bottom bar: the pages people open most */
  .bk-mbar{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;position:fixed;left:0;right:0;bottom:0;z-index:40;background:var(--card);border-top:1px solid var(--line);padding:6px 4px max(6px,env(safe-area-inset-bottom))}
  .bk-mbar a,.bk-mbar button{all:unset;cursor:pointer;display:grid;justify-items:center;gap:3px;font-size:11px;font-weight:700;color:var(--muted);padding:4px 0;position:relative;-webkit-tap-highlight-color:transparent}
  .bk-mbar .ico{width:22px;height:22px}
  .bk-mbar .on{color:var(--ink)}
  .bk-mbar .on .ico{background:var(--soft);border-radius:14px;width:44px;padding:2px 0}
  .bk-mbar .dot{right:auto;left:calc(50% + 4px)}
  .shell>.main{padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  input,select,textarea{font-size:16px}
  html,body{overflow-x:clip}
}
@media (display-mode: standalone){body{overscroll-behavior-y:none}}
/* Messages: inside a conversation the bottom bar steps aside so the Send box has the whole width and height */
@media (max-width:860px){body:has(.inbox.has-conv) .bk-mbar{display:none}body:has(.inbox.has-conv) .shell>.main{padding-bottom:max(12px,env(safe-area-inset-bottom))}}