.mfss-bar { --mfss-size: var(--mfss-desktop-size,46px); position: fixed; top: max(64px,env(safe-area-inset-top)); bottom: max(64px,env(safe-area-inset-bottom)); z-index: 990; display: grid; grid-template-rows: minmax(0,var(--mfss-before,50fr)) auto minmax(0,var(--mfss-after,50fr)); width: max-content; max-width: calc(100vw - 16px); direction: ltr; isolation: isolate; pointer-events: none; }
.mfss-bar[data-side="right"] { right: max(var(--mfss-offset,8px),env(safe-area-inset-right)); }
.mfss-bar[data-side="left"] { left: max(var(--mfss-offset,8px),env(safe-area-inset-left)); }
.mfss-bar *, .mfss-bar *::before, .mfss-bar *::after { box-sizing: border-box; }
.mfss-bar .mfss-list { grid-row: 2; display: flex; flex-direction: column; gap: var(--mfss-gap,8px); list-style: none; margin: 0; padding: 4px; max-height: calc(100vh - 128px); max-height: calc(100dvh - 128px); overflow-y: auto; scrollbar-width: thin; pointer-events: auto; }
.mfss-bar[data-side="right"] .mfss-list { align-items: flex-end; }
.mfss-bar[data-side="left"] .mfss-list { align-items: flex-start; }
.mfss-bar .mfss-list > li { margin: 0; padding: 0; list-style: none; max-width: 100%; }
.mfss-bar .mfss-link { display: flex; align-items: center; width: max-content; max-width: calc(100vw - 32px); min-height: var(--mfss-size,46px); background: var(--mfss-bg,#174b43); color: var(--mfss-fg,#fff); border: 0; border-radius: 10px; text-decoration: none; box-shadow: 0 2px 9px #0002; outline-offset: 2px; -webkit-tap-highlight-color: #0002; touch-action: manipulation; overflow: hidden; }
.mfss-bar[data-side="right"] .mfss-link { flex-direction: row-reverse; }
.mfss-bar[data-shape="square"] .mfss-link { border-radius: 0; }
.mfss-bar[data-shape="circle"] .mfss-link { border-radius: 999px; }
.mfss-bar .mfss-icon { width: var(--mfss-size,46px); height: var(--mfss-size,46px); flex: 0 0 var(--mfss-size,46px); display: grid; place-items: center; font: 600 20px/1 system-ui,sans-serif; color: inherit; }
.mfss-bar .mfss-icon img { display: block; width: 60%; height: 60%; max-width: none; object-fit: contain; margin: 0; padding: 0; border: 0; border-radius: 0; box-shadow: none; }
.mfss-bar .mfss-label { display: block; max-width: 0; opacity: 0; overflow: hidden; white-space: nowrap; font-family: inherit; font-size: 13px; font-weight: 500; line-height: 1.5; color: inherit; transition: max-width .18s ease,opacity .18s ease,padding .18s ease; }
.mfss-bar .mfss-link:focus-visible { outline: 3px solid #1279d3; }
.mfss-bar .mfss-link:focus-visible .mfss-label { max-width: min(220px,calc(100vw - 110px)); opacity: 1; padding-inline: 12px; text-overflow: ellipsis; }
@media(hover:hover) and (pointer:fine) { .mfss-bar .mfss-link:hover .mfss-label { max-width: min(220px,calc(100vw - 110px)); opacity: 1; padding-inline: 12px; text-overflow: ellipsis; } }
@media(max-width:1023px) { .mfss-bar { --mfss-size: var(--mfss-mobile-size,40px); } .mfss-bar.mfss-desktop-only { display: none; } .mfss-bar .mfss-label { display: none; } }
@media(hover:none), (pointer:coarse) { .mfss-bar .mfss-label { display: none; } }
@media(prefers-reduced-motion:reduce) { .mfss-bar .mfss-label { transition: none; } }
@media print { .mfss-bar { display: none !important; } }