/* UI-015 · continuous shoulder profile; existing navigation and asset loading stay in JS. */
.dock-character {position:relative;}
.dock-character>img[data-dock-animation] {position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:contain;border-radius:50%;opacity:0;pointer-events:none;}
.dock-character>img[data-dock-animation][data-ready] {opacity:1;}
.bottom-nav:has(.dock-character) {--dock-bar-surface:rgba(21,23,25,0.8);grid-template-columns:repeat(5,minmax(0,1fr));gap:4px;height:auto;min-height:calc(88px + env(safe-area-inset-bottom,0px));padding:10px 8px calc(4px + env(safe-area-inset-bottom,0px));overflow:visible;border:0;border-radius:0;background:var(--dock-bar-surface);box-shadow:none;isolation:isolate;}
/* One filled Bezier ridge joins the flat bar with horizontal tangents at both shoulders. */
.bottom-nav:has(.dock-character):before {content:"";position:absolute;left:0;right:0;bottom:100%;height:22px;z-index:0;pointer-events:none;background:var(--dock-bar-surface);-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20430%2026'%20preserveAspectRatio='none'%3E%3Cpath%20fill='white'%20d='M0%2026H104C146%2026%20152%201%20215%201S284%2026%20326%2026H430V26H0Z'/%3E%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%20430%2026'%20preserveAspectRatio='none'%3E%3Cpath%20fill='white'%20d='M0%2026H104C146%2026%20152%201%20215%201S284%2026%20326%2026H430V26H0Z'/%3E%3C/svg%3E");-webkit-mask-size:100% 100%;mask-size:100% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;}
.bottom-nav:has(.dock-character)>button {position:relative;z-index:1;min-width:44px;min-height:64px;width:100%;padding:4px 2px;gap:7px;align-self:stretch;font-size:11px;line-height:1.5;}
.bottom-nav:has(.dock-character)>button>[data-ui-key] {display:block;max-width:100%;font-size:11px;line-height:1.5;overflow-wrap:anywhere;text-align:center;}
.bottom-nav:has(.dock-character) .nav-icon {width:28px;height:28px;min-width:28px;min-height:28px;}
.bottom-nav:has(.dock-character) .nav-icon>.icon {width:24px;height:24px;}
.bottom-nav:has(.dock-character) .nav-unread {top:-5px;right:-10px;}
.bottom-nav:has(.dock-character)>.create-nav {position:relative;justify-content:flex-start;gap:10px;min-height:94px;margin-top:-22px;padding:0;color:#f4e8ed;}
.bottom-nav:has(.dock-character) .dock-character {display:grid;place-items:center;flex:0 0 60px;width:60px;height:60px;min-width:60px;min-height:60px;overflow:hidden;border:0;border-radius:50%;background:none;box-shadow:none;}
.dock-character>img[data-dock-character] {display:block;width:100%;height:100%;min-width:0;object-fit:contain;border-radius:50%;}
.bottom-nav:has(.dock-character)>.create-nav:is(.selected,[aria-current=page]) {color:var(--accent,#f0698c);}
.bottom-nav:has(.dock-character)>.create-nav:is(.selected,[aria-current=page]) .dock-character {box-shadow:none;}
.bottom-nav:has(.dock-character)>button:focus-visible {outline:2px solid var(--accent-soft,#ffb6c9);outline-offset:2px;border-radius:12px;}
@media(max-height:600px){
 .bottom-nav:has(.dock-character) {min-height:calc(76px + env(safe-area-inset-bottom,0px));padding-top:6px;padding-bottom:calc(8px + env(safe-area-inset-bottom,0px));border-radius:0;}
 .bottom-nav:has(.dock-character)>button {min-height:60px;}
 .bottom-nav:has(.dock-character)>.create-nav {min-height:86px;margin-top:-26px;gap:7px;}
 .bottom-nav:has(.dock-character) .dock-character {flex-basis:56px;width:56px;height:56px;min-width:56px;min-height:56px;}
}
@media(prefers-reduced-motion:no-preference){
 .dock-character>img[data-dock-animation] {transition:opacity .18s ease-out;}
 .dock-character {transition:transform .16s cubic-bezier(.2,.85,.25,1.12),box-shadow .18s ease-out;}
 .create-nav:active .dock-character {transform:scale(.96);}
}

/* 弧坡宽度：数值越小，两侧越集中、越陡；原高度保持不变。 */
.bottom-nav:has(.dock-character)::before {
 left:50%;
 right:auto;
 width:220px;
 transform:translateX(-50%);
}

/* UI-017-TITLE addition: rendered by membership logic only; never changes navigation geometry. */
.bottom-nav .profile-vip-badge {position:absolute;left:50%;bottom:calc(100% + 2px);z-index:2;display:inline-flex;align-items:center;justify-content:center;width:20px;min-width:20px;height:11px;padding:0 2px;border:0;border-radius:4px;background:var(--profile-vip-badge-bg,#7651a8);color:#fff;font-size:7px;font-weight:750;line-height:1;letter-spacing:.03em;white-space:nowrap;pointer-events:none;transform:translateX(-50%);}