/* Shared with the native app: white surface, outline icons and purple top marker. */
.cma-tabbar{display:none}
@media(max-width:768px){
 :root{--cma-tabbar-height:calc(72px + env(safe-area-inset-bottom,0px))}
 .cma-tabbar{position:fixed;inset-inline:0;bottom:0;z-index:40;display:flex;align-items:stretch;box-sizing:border-box;height:var(--cma-tabbar-height);padding:6px 6px calc(2px + env(safe-area-inset-bottom,0px));background:#fff;border-top:1px solid #e0ddd8;color:#6f6b65;font-family:inherit}
 .cma-tabbar__item{position:relative;flex:1 1 0;min-width:0;min-height:57px;display:flex;flex-direction:column;align-items:center;justify-content:flex-start;gap:5px;padding:10px 1px 5px;background:transparent;color:#6f6b65;text-decoration:none!important;text-align:center;-webkit-tap-highlight-color:transparent}
 .cma-tabbar__item::before{content:'';position:absolute;top:0;width:22px;height:3px;border-radius:99px;background:transparent}
 .cma-tabbar__item[aria-current="page"]{color:#7c3aed}
 .cma-tabbar__item[aria-current="page"]::before{background:#7c3aed}
 .cma-tabbar__item:focus-visible{outline:2px solid #7c3aed;outline-offset:-2px;border-radius:8px}
 .cma-tabbar__icon{position:relative;display:block;flex:none;width:24px;height:24px}
 .cma-tabbar__icon svg{display:block;width:24px;height:24px}
 .cma-tabbar__label{font-size:11px;line-height:15px;font-weight:500;white-space:nowrap}
 .cma-tabbar__item[aria-current="page"] .cma-tabbar__label{font-weight:600}
 .cma-tabbar__badge{position:absolute;top:-6px;inset-inline-end:-10px;min-width:16px;height:16px;padding:0 4px;align-items:center;justify-content:center;box-sizing:border-box;border:1.5px solid #fff;border-radius:99px;background:#ef4444;color:#fff;font-size:9px;font-weight:700;line-height:1}
 body:has(.cma-tabbar):not(.focused-mode):not(.cma-chat-page) #main-content,
 body:has(.cma-tabbar):not(.focused-mode):not(.cma-chat-page) main:not(#main-content){padding-bottom:calc(var(--cma-tabbar-height) + 16px)!important}
 html:has(.cma-tabbar){scroll-padding-bottom:calc(var(--cma-tabbar-height) + 16px)}
 body.focused-mode .cma-tabbar,
 body:has(input:focus,textarea:focus,[contenteditable="true"]:focus) .cma-tabbar{display:none}
 /* Chat keeps the tabs on the conversation list, with full height restored once a chat opens. */
 body.cma-chat-page .cma-tabbar{z-index:10000}
 body.cma-chat-page .messenger-listView{bottom:var(--cma-tabbar-height)!important;height:auto!important}
 body.cma-chat-page:has(.messenger-listView.hide-on-mobile) .cma-tabbar,
 body.cma-chat-page:has(.messenger-listView[style*="display: none"]) .cma-tabbar{display:none}
}
@media(max-width:359px){.cma-tabbar__label{font-size:10px}}