/* Mobile brand headers share the message page's dimensions. */
@media (width < 900px){
 .shell:has(>.topbar){padding-top:24px;padding-left:24px;padding-right:24px}
 .messages-page>.top,.shell>.topbar{display:flex;align-items:center;gap:12px;min-height:42px;padding:0;margin:0 0 24px;border:0;color:var(--ink)}
 .shell>.topbar .mobile-brand{display:flex;align-items:center;gap:12px;flex:1;min-width:0;color:inherit;white-space:normal}
 .messages-page>.top .brand-image,.shell>.topbar .brand-icon{display:block;width:42px;height:42px;flex:0 0 42px;object-fit:contain;filter:none}
 .messages-page .mobile-site-name,.shell>.topbar .mobile-brand>span{font:700 20px/1.6 system-ui,-apple-system,'Segoe UI','Microsoft YaHei',sans-serif;letter-spacing:0;margin:0;overflow-wrap:anywhere}
 .messages-page>.top>.search,.shell>.topbar [data-mobile-search]{display:inline-flex;align-items:center;justify-content:center;flex:0 0 42px;width:42px;height:42px;min-width:42px;min-height:42px;padding:9px;margin:0 0 0 auto;border:0;border-radius:8px;background:transparent;color:var(--ink);box-shadow:none}
 .messages-page>.top>.search svg,.shell>.topbar [data-mobile-search] svg{width:23px;height:23px;stroke-width:2;flex:none}
}
/* Keep the primary page header visible without a scroll listener. */
.messages-page>.top,.shell>.topbar{
 position:sticky;top:0;z-index:8;
 background:var(--bg,#f7f8fb);
 padding-top:max(10px,env(safe-area-inset-top));padding-bottom:10px;
 box-shadow:0 -24px 0 var(--bg,#f7f8fb);
}
@media (max-width:600px){
 .shell:has(>.topbar){padding-top:16px;padding-left:14px;padding-right:14px}
 .messages-page>.top,.shell>.topbar,.shell>.topbar .mobile-brand{gap:8px}
 .messages-page .mobile-site-name,.shell>.topbar .mobile-brand>span{font-size:18px}
}