/* R112 · load LAST, after panel-scroll.css and all route/component styles.
   Presentation only. Existing ResizeObservers keep writing --front-nav-height
   and --dock-panel-bottom from the real bar, avatar and crest rectangles.
   Keep the historical --front-nav-base (88px / short-screen 76px): its signed
   delta must also carry shrinkage to the remaining legacy offset consumers. */
.product-body .phone {
 --compact-topbar-height:48px;
 --compact-main-topbar-height:44px;
 --compact-dock-height:56px;
 --compact-dock-crest:20px;
 --compact-dock-avatar:44px;
 --compact-dock-avatar-offset:4px;
 --compact-dock-curve-width:180px;
 --compact-dock-label-gap:3px;
 --compact-dock-button:calc(var(--compact-dock-height) - 4px);
 --compact-dock-fallback:calc(var(--compact-dock-height) + env(safe-area-inset-bottom,0px));
 /* --front-nav-height is measured on body: inherit it, never shadow it here. */
 --compact-dock-clearance:var(--dock-panel-bottom,calc(var(--front-nav-height,var(--compact-dock-fallback)) + var(--compact-dock-crest) + 8px));
 --feed-header-bottom:calc(var(--compact-main-topbar-height) + env(safe-area-inset-top,0px) + 2px);
 --feed-dock-rise:var(--compact-dock-crest);
 --catalog-top:var(--feed-header-bottom);
 --catalog-bottom:var(--compact-dock-clearance);
}

/* The channel bar already has 44px targets: keep that content height and only
   leave 2px of background below it. Route bars below compact separately to 48px. */
.product-body .phone>#feedHeader {
 top:env(safe-area-inset-top,0px);
 box-sizing:border-box;
 height:auto;
 min-height:var(--compact-main-topbar-height);
 padding-block:0;
}
.product-body .phone>#feedHeader::before {
 top:calc(0px - env(safe-area-inset-top,0px));
 bottom:-2px;
}
.product-body .phone>#feedHeader .top-tabs {align-items:center;min-height:44px;}
.product-body .phone>#feedHeader .top-tabs>button {
 flex:0 0 auto;
 min-width:44px;
 min-height:44px;
 padding-block:2px;
}
.product-body .phone>#feedHeader :is(#headerSearchButton,#headerLanguageButton) {
 width:44px;height:44px;min-width:44px;min-height:44px;
}
.product-body .phone>#feedHeader :is(#headerSearchButton .icon,#headerLanguageButton svg) {width:24px;height:24px;}

/* Very narrow phones use the remaining width beside the tools; normal phones
   retain the original symmetric 94px gutters and true channel-group centering. */
@media(max-width:359px) {
 .product-body .phone>#feedHeader:has(#headerLanguageButton) {padding-inline-start:0;padding-inline-end:94px;}
 .product-body .phone>#feedHeader .top-tabs {justify-content:safe center;}
}
@media(min-width:360px) and (max-width:389px) {
 .product-body .phone>#feedHeader:has(#headerLanguageButton) {padding-inline:94px;}
 .product-body .phone>#feedHeader .top-tabs {gap:clamp(2px,calc((100vw - 356px) / 2),12px);}
}

/* Route bars, including immersive detail's header, share the compact minimum.
   The fullscreen playback overlay still owns its separate player controls. */
.product-body .phone #routePanel {--compact-route-safe-top:env(safe-area-inset-top,0px);}
.product-body .phone #dockRoutePanel {--compact-route-safe-top:0px;}
.product-body .phone :is(#routePanel,#dockRoutePanel)>.route-top {
 box-sizing:border-box;
 height:auto;
 min-height:calc(var(--compact-topbar-height) + var(--compact-route-safe-top,0px));
 padding-top:calc(2px + var(--compact-route-safe-top,0px));
 padding-bottom:2px;
}
.product-body .phone :is(#routePanel,#dockRoutePanel)>.route-top>button {
 min-height:44px;
 padding-block:2px;
}
.product-body .phone .route-panel:has(>.account-page[data-account-view=wallet]) {--wallet-topbar-height:var(--compact-topbar-height);}
.product-body .phone #dockRoutePanel>.route-top.dock-route-top {border-bottom:0;box-shadow:inset 0 -1px #ffffff12;}
.product-body .phone .route-panel.dock-route {
 /* Root writes each panel's actual header height, including translated growth. */
 scroll-padding-top:calc(var(--route-top-height,var(--compact-topbar-height)) + 10px);
}
.product-body .phone .dock-route>.message-tabs {top:var(--route-top-height,var(--compact-topbar-height));}
/* Override the old inherited phone-level 68px value at the measured panel.
   The existing detail header's negative margin reads this same local variable. */
.product-body .phone #routePanel:has(>.drama-detail-immersive) {
 --detail-screen-topbar-height:var(--route-top-height,var(--compact-topbar-height));
 scroll-padding-top:calc(var(--route-top-height,var(--compact-topbar-height)) + 10px);
}

/* R116: compact body + safe area; independent avatar, shoulder and label row.
   Minima, not clipping: a second label line increases the measured grid row. */
.product-body .phone>#bottomNav {
 box-sizing:border-box;
 height:auto;
 min-height:var(--compact-dock-fallback);
 padding:2px 8px calc(2px + env(safe-area-inset-bottom,0px));
 align-items:stretch;
 row-gap:0;
 overflow:visible;
}
.product-body .phone>#bottomNav:has(.dock-character)::before {
 height:var(--compact-dock-crest);
 width:var(--compact-dock-curve-width);
 max-width:60%;
}
.product-body .phone>#bottomNav>button {
 box-sizing:border-box;
 min-width:44px;
 min-height:var(--compact-dock-button);
 height:auto;
 padding:3px 2px;
 gap:var(--compact-dock-label-gap);
 font-size:11px;
 line-height:1.4;
}
.product-body .phone>#bottomNav>button>[data-ui-key] {
 display:block;
 max-width:100%;
 font-size:11px;
 line-height:1.4;
 white-space:normal;
 overflow-wrap:anywhere;
}
.product-body .phone>#bottomNav .nav-icon {
 flex:0 0 24px;
 width:24px;height:24px;min-width:24px;min-height:24px;
}
.product-body .phone>#bottomNav :is(.nav-icon>.icon,button>.icon) {width:24px;height:24px;}
.product-body .phone>#bottomNav>.create-nav {
 /* A fixed icon row anchors the label independently from the avatar size. */
 display:grid;
 grid-template-columns:minmax(0,1fr);
 grid-template-rows:24px auto;
 align-content:center;
 justify-items:center;
 min-height:var(--compact-dock-button);
 margin-top:0;
 padding:3px 2px;
 gap:var(--compact-dock-label-gap);
}

.product-body .phone>#bottomNav .dock-character {
 grid-row:1;
 align-self:end;
 top:var(--compact-dock-avatar-offset);
 flex:0 0 var(--compact-dock-avatar);
 width:var(--compact-dock-avatar);height:var(--compact-dock-avatar);
 min-width:var(--compact-dock-avatar);min-height:var(--compact-dock-avatar);
}

/* Generic page padding follows the measured visible dock edge, including safe
   area and any translated-label growth. More specific studio/checkout/player
   scroll owners retain their own bottom-padding contracts. */
.product-body .phone .route-panel:not(.dock-route) {
 padding-bottom:calc(var(--compact-dock-clearance) + 16px);
 scroll-padding-bottom:calc(var(--compact-dock-clearance) + 16px);
}

/* Desktop retains the centered, width-bounded dock and desktop route layout. */
@media(min-width:1024px) {
 .product-body .phone {--compact-topbar-height:54px;}
}