/* UI-013 · load last. JS owns opening/closing transform and opacity. */
/* UI-016 顶部栏背景透明度：0完全透明，1不透明；只调整背景，不影响标题/按钮及上下Dock。 */
.phone {--ui-topbar-bg-alpha:0.8;}
#dockScrim {position:absolute;inset:0;z-index:44;width:100%;height:100%;padding:0;border:0;border-radius:0;background:#03040766;cursor:default;}
.phone .route-panel.dock-route {position:absolute;inset:auto 0 0;z-index:45;width:100%;height:min(78%,720px);max-height:calc(100% - 56px);min-height:0;min-width:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#ffffff24 transparent;-webkit-overflow-scrolling:touch;padding:0 20px max(24px,calc(var(--dock-panel-bottom,112px) + 12px));border:1px solid #ffffff1c;border-bottom:0;border-radius:26px 26px 0 0;background:#181a1d;box-shadow:0 -16px 60px #0005;scroll-padding-top:82px;scroll-padding-bottom:calc(var(--dock-panel-bottom,112px) + 12px);transform-origin:center bottom;}
.route-panel.dock-route:is([data-motion=entering],[data-motion=leaving]) {will-change:transform,opacity;}
.route-panel.dock-route[data-motion=open] {will-change:auto;}
.route-panel.dock-route>.route-top.dock-route-top {display:grid;grid-template-columns:minmax(44px,1fr) minmax(0,2fr) minmax(44px,1fr);gap:8px;align-items:center;position:sticky;top:0;z-index:3;min-height:72px;margin:0 -20px 14px;padding:14px 20px;border-bottom:1px solid #ffffff12;background:rgb(24 26 29 / var(--ui-topbar-bg-alpha));isolation:isolate;}
.route-panel.dock-route>.route-top.dock-route-top:before {content:none;background:none;}
.dock-route>.route-top.dock-route-top>:first-child {justify-self:start;min-width:0;}
.dock-route>.route-top.dock-route-top>:nth-child(2) {min-width:0;max-width:100%;text-align:center;font-size:20px;font-weight:550;line-height:1.6;overflow-wrap:anywhere;}
.dock-route>.route-top.dock-route-top>button {min-height:44px;min-width:44px;max-width:100%;padding:10px 0;font-size:13px;line-height:1.7;overflow-wrap:anywhere;}
.dock-route>.route-top.dock-route-top>button[data-close-dock] {display:grid;place-items:center;justify-self:end;width:44px;height:44px;padding:10px;border:1px solid #ffffff13;border-radius:50%;background:#ffffff05;font-size:24px;line-height:1;}
.dock-route>.route-top.dock-route-top>button[data-close-dock] .icon {width:20px;height:20px;}
.route-panel.dock-route :is(button,a,input,select,textarea):focus-visible {outline:2px solid var(--accent-soft,#ffb6c9);outline-offset:3px;}
.route-panel.dock-route :is(.account-page,.creator-page,.public-work-page) {min-width:0;}
.dock-route>.message-tabs {position:sticky;top:72px;z-index:2;background:#181a1d;}

/* R13 coordinator's interim choice: white primary copy in Messages/Profile only. */
.dock-route {--dock-main-text:#fff;--dock-secondary-text:#bbc3c9;}
.dock-route:has(>#messageRecords) {color:var(--dock-main-text);}
.dock-route:has(>#messageRecords)>.dock-route-top>:nth-child(2),
.dock-route:has(>.account-page[data-account-view=profile])>.dock-route-top>:nth-child(2),
.dock-route:has(>#messageRecords)>h1,
.dock-route:has(>#messageRecords) :is(.message-main strong,.message-main small:first-of-type,.empty-state h2) {color:var(--dock-main-text);}
.dock-route:has(>#messageRecords) :is(.message-main small:last-of-type,.empty-state p,.route-note,.eyebrow) {color:var(--dock-secondary-text);}
.dock-route:has(>#messageRecords)>.route-note {color:var(--dock-secondary-text)!important;}
.dock-route .account-page[data-account-view=profile] {--account-text:#fff;--account-secondary:var(--dock-secondary-text);color:var(--dock-main-text);}
.dock-route .account-page[data-account-view=profile] :is(h1,h2,h3,strong,.balance-number) {color:var(--dock-main-text);}
.dock-route .account-page[data-account-view=profile] :is(.account-eyebrow,.account-id,.member-copy>p,.member-dates,.wallet-card small,.balance-number>span,.account-note,.account-record-card small,.account-empty>p) {color:var(--dock-secondary-text);}

/* Fullscreen creation keeps a text back button and an empty right slot. */
/* Remove the old 22px scroll-container inset so sticky starts at the visible top immediately. */
.phone #routePanel:has(>.route-top.fullscreen-route-top) {padding-top:0;}
#routePanel>.route-top.fullscreen-route-top {display:grid;grid-template-columns:minmax(60px,1fr) minmax(0,2fr) minmax(60px,1fr);align-items:center;gap:8px;min-height:68px;position:sticky;top:0;z-index:3;margin-left:-22px;margin-right:-22px;padding-left:22px;padding-right:22px;background:rgb(16 17 18 / var(--ui-topbar-bg-alpha));isolation:isolate;}
#routePanel>.route-top.fullscreen-route-top:before {content:none;background:none;}
#routePanel>.route-top.fullscreen-route-top>:first-child {justify-self:start;text-align:left;}
#routePanel>.route-top.fullscreen-route-top>:nth-child(2) {min-width:0;text-align:center;font-size:15px;font-weight:550;line-height:1.6;overflow-wrap:anywhere;}
#routePanel>.route-top.fullscreen-route-top>:last-child {justify-self:end;}
#routePanel>.route-top.fullscreen-route-top>button {min-height:44px;min-width:56px;padding:10px 0;font-size:14px;line-height:1.7;}

@media(max-width:350px){
 .phone .route-panel.dock-route {padding-left:16px;padding-right:16px;border-radius:23px 23px 0 0;}
 .route-panel.dock-route>.route-top.dock-route-top {margin-left:-16px;margin-right:-16px;padding-left:16px;padding-right:16px;}
 :is(.dock-route>.route-top.dock-route-top,#routePanel>.route-top.fullscreen-route-top)>:nth-child(2) {font-size:16px;}
}
@media(max-height:600px){
 .route-panel.dock-route>.route-top.dock-route-top {min-height:64px;padding-top:10px;padding-bottom:10px;margin-bottom:12px;}
 .dock-route>.message-tabs {top:64px;}
 .phone .route-panel.dock-route {scroll-padding-top:74px;}
}

/* Match the shared important footnote rule without changing status colors. */
.dock-route:has(>#messageRecords) .route-note {color:var(--dock-secondary-text)!important;}