/* Measurements from the original 1170px references, normalized to 390 logical points.
   Conversation avatar 168/3=56; row pitch 216/3=72; text pitch 64/3=21.333.
   Badge card 840/3=280; badge disc 540/3=180. Font sizes are fitted estimates.
   A common unit scales the whole composition, avoiding unrelated media-query sizes. */
.hub{width:100%;max-width:520px;container-type:inline-size;--iu:calc(100cqw / 390)}
.main,.page,.avpage>*,.avpage section{min-width:0}.avpage{width:100%}.avpage .gb-grid,.avpage .bd-grid{width:100%;min-width:0}
.hub .hub-h.inbox-header{height:calc(58 * var(--iu));min-height:0;padding:0 calc(16 * var(--iu)) calc(8 * var(--iu));grid-template-columns:calc(44 * var(--iu)) minmax(0,1fr) calc(44 * var(--iu));gap:0}
.hub .inbox-account{gap:calc(6 * var(--iu))}
.hub .inbox-account h1{font-size:calc(24 * var(--iu));line-height:1.2;font-weight:750;letter-spacing:calc(-.6 * var(--iu));margin:0}
.hub .inbox-account>svg{width:calc(14 * var(--iu));height:calc(14 * var(--iu))}
.hub .inbox-header .icon-btn,.hub .inbox-back{width:calc(44 * var(--iu));height:calc(44 * var(--iu))}
.hub .inbox-header .icon-btn>svg,.hub .inbox-back>svg{width:calc(24 * var(--iu));height:calc(24 * var(--iu))}
.hub .hub-p.chats{padding:0 calc(16 * var(--iu)) calc(24 * var(--iu));gap:0}
.hub .search{margin:0 calc(-2.667 * var(--iu));height:calc(44 * var(--iu));min-height:calc(44 * var(--iu));padding:0 calc(16 * var(--iu));gap:calc(9 * var(--iu));border-radius:calc(24 * var(--iu));background:var(--soft)}
.hub .search input{font-size:calc(18 * var(--iu));line-height:1.2;font-weight:500;letter-spacing:calc(-.3 * var(--iu))}
.hub .search>svg{width:calc(18 * var(--iu));height:calc(18 * var(--iu));flex:none}
.hub .fr-rail{height:calc(136 * var(--iu));min-height:0;margin:calc(16 * var(--iu)) 0 0;padding:0;gap:calc(26.667 * var(--iu));align-items:start}
.hub .fr-c{position:relative;display:block;width:calc(80 * var(--iu));height:calc(136 * var(--iu));padding:0;font-size:calc(12 * var(--iu));line-height:calc(16 * var(--iu));font-weight:600;overflow:visible}
.hub .fr-c>.av,.hub .fr-c .note-avatar,.hub .fr-c.map-shortcut>svg{position:absolute;top:calc(32 * var(--iu));left:0;width:calc(80 * var(--iu));height:calc(80 * var(--iu));max-width:none;box-shadow:none}
.hub .fr-c .note-avatar>.av{width:100%;height:100%}
.hub .fr-c>span:last-child{position:absolute;top:calc(116 * var(--iu));left:calc(-8 * var(--iu));width:calc(96 * var(--iu));max-width:calc(96 * var(--iu));text-align:center;line-height:calc(16 * var(--iu))}
.hub .fr-c .note-bubble{position:absolute;top:0;left:50%;width:calc(80 * var(--iu));max-width:calc(94 * var(--iu));min-width:0;min-height:calc(44 * var(--iu));max-height:calc(56 * var(--iu));padding:calc(9 * var(--iu)) calc(7 * var(--iu));font-size:calc(12 * var(--iu));font-weight:500;line-height:calc(14 * var(--iu));border-radius:calc(18 * var(--iu));box-shadow:0 calc(3 * var(--iu)) calc(12 * var(--iu)) #00000013;white-space:normal}
.hub .fr-c .note-bubble::after{width:calc(5 * var(--iu));height:calc(5 * var(--iu));bottom:calc(-4 * var(--iu));left:calc(18 * var(--iu))}
.inbox-location{display:flex;align-items:center;gap:calc(3 * var(--iu));height:calc(18 * var(--iu));font:700 calc(12 * var(--iu))/1.2 var(--font);color:var(--fg);max-width:calc(160 * var(--iu));white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.inbox-location>svg{color:#ff3158;width:calc(11 * var(--iu));height:calc(11 * var(--iu));flex:none}
.inbox-location>span{overflow:hidden;text-overflow:ellipsis}
.hub .inbox-section{height:calc(24 * var(--iu));margin:calc(8 * var(--iu)) 0 calc(7 * var(--iu));padding:0;gap:calc(12 * var(--iu));align-items:center}
.hub .inbox-section h2{font-size:calc(20 * var(--iu));line-height:calc(24 * var(--iu));font-weight:800;letter-spacing:calc(-.45 * var(--iu))}
.hub .inbox-requests{font-size:calc(16 * var(--iu));line-height:calc(24 * var(--iu));font-weight:600;letter-spacing:calc(-.2 * var(--iu));color:var(--muted)}
.hub .clist2{gap:0}
.hub .clist2 .crow2{grid-template-columns:calc(56 * var(--iu)) minmax(0,1fr) auto;gap:calc(12.667 * var(--iu));height:calc(72 * var(--iu));min-height:0;padding:calc(8 * var(--iu)) 0;align-items:center}
.hub .clist2 .crow2 .av,.hub .clist2 .dm-group{width:calc(56 * var(--iu));height:calc(56 * var(--iu))}
.hub .clist2 .crow2>div{display:block;min-width:0}
.hub .clist2 .crow2 b{display:block;font-size:calc(16 * var(--iu));line-height:calc(21.333 * var(--iu));font-weight:600;letter-spacing:0;margin:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub .clist2 .crow2 small{display:block;font-size:calc(16 * var(--iu));line-height:calc(21.333 * var(--iu));font-weight:600;letter-spacing:calc(.1 * var(--iu));margin:0;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hub .clist2 .crow2.unread b,.hub .clist2 .crow2.unread small{font-weight:750}
.hub .clist2 .crow2 .dotn{width:calc(8 * var(--iu));height:calc(8 * var(--iu));margin:0}
.hub .group-back,.hub .group-front{width:calc(40 * var(--iu));height:calc(40 * var(--iu));border-width:calc(2 * var(--iu));font-size:calc(11 * var(--iu))}
.hub .group-front>svg{width:calc(22 * var(--iu));height:calc(22 * var(--iu))}
.hub .inbox-tools{font-size:calc(12 * var(--iu));margin-top:calc(16 * var(--iu))}
.hub .inbox-extra>summary{font-size:calc(12 * var(--iu));padding:calc(12 * var(--iu)) 0}
/* The badge detail uses the same width-based scale as the reference. */
.fbm,.sheet-wrap:has(.bd-sheet){--bu:calc(min(100vw,520px) / 390)}
.fbm-track{gap:calc(16 * var(--bu));padding:0 calc((100vw - 280 * var(--bu)) / 2)}
.fbm-card{width:calc(280 * var(--bu));height:calc(392 * var(--bu));min-height:0;max-height:calc(100dvh - 40px);overflow-y:auto;scrollbar-width:none;border-radius:calc(24 * var(--bu));background:var(--card);padding:calc(24 * var(--bu));display:flex;flex-direction:column;align-items:center;gap:0}
.fbm-card .fb-ic{width:calc(180 * var(--bu))!important;height:calc(180 * var(--bu))!important;flex:none}
.fbm-card .fb-ic>svg{width:100%;height:100%}
.fbm-card h3{font-size:calc(20 * var(--bu));font-weight:700;line-height:calc(26 * var(--bu));margin:calc(10 * var(--bu)) 0 0;letter-spacing:calc(-.2 * var(--bu))}
.fbm-card p{font-size:calc(14 * var(--bu));line-height:calc(20 * var(--bu));font-weight:500;margin:calc(14 * var(--bu)) 0 0;color:var(--muted)}
.fbm-card .fb-n{font-size:calc(20 * var(--bu));line-height:1.2;padding:calc(3 * var(--bu)) calc(10 * var(--bu));bottom:calc(-9 * var(--bu));border-radius:calc(11 * var(--bu))}
.fbm-card .fbm-foot{margin-top:auto;padding-top:calc(20 * var(--bu));opacity:.18}.fbm-card .fbm-foot>svg{width:calc(28 * var(--bu));height:calc(28 * var(--bu))}
.fbm-card>.badge-close{top:calc(10 * var(--bu));right:calc(10 * var(--bu));width:calc(24 * var(--bu));height:calc(24 * var(--bu));font-size:calc(20 * var(--bu))}
.sheet-panel:has(.bd-sheet){width:calc(280 * var(--bu));border-radius:calc(24 * var(--bu));background:var(--card)}
.bd-sheet>.bd-svg,.bd-sheet>.gb{width:calc(180 * var(--bu));height:calc(180 * var(--bu))}.bd-sheet .sh-t{font-size:calc(20 * var(--bu))}.bd-sheet .bd-msg{font-size:calc(14 * var(--bu));line-height:calc(20 * var(--bu))}
@media(max-width:900px){
 :root{--nav-unit:calc(min(100vw,520px) / 390);--nav-height:calc(94 * var(--nav-unit) + env(safe-area-inset-bottom,0px))}
 .bottombar.is-player{left:50%;right:auto;transform:translateX(-50%);width:calc(min(100vw,520px) - 44 * var(--nav-unit));height:calc(60 * var(--nav-unit));bottom:calc(22 * var(--nav-unit) + env(safe-area-inset-bottom,0px));padding:calc(5 * var(--nav-unit)) 0;gap:0;box-shadow:0 calc(4 * var(--nav-unit)) calc(24 * var(--nav-unit)) #00000012}
 .bottombar.is-player a,.bottombar.is-player .fab{height:calc(50 * var(--nav-unit));min-height:0;padding:0;align-self:center;justify-self:stretch}
 .bottombar.is-player a>svg{width:calc(24 * var(--nav-unit));height:calc(24 * var(--nav-unit));stroke-width:2.25}
 .bottombar.is-player a .nav-av{width:calc(24 * var(--nav-unit));height:calc(24 * var(--nav-unit))}
 .bottombar.is-player a.on{width:calc(76 * var(--nav-unit));justify-self:center}
 .bottombar.is-player .msg-ic .unread-dot{width:calc(6 * var(--nav-unit));height:calc(6 * var(--nav-unit));bottom:calc(8 * var(--nav-unit));right:calc(50% - 15 * var(--nav-unit))}
}