.sm4j { --sm4j-top:clamp(12px,var(--sm4j-offset,35vh),calc(100dvh - 72px)); position:fixed; top:var(--sm4j-top); z-index:900; width:max-content; max-width:min(220px,calc(100vw - 24px)); max-height:calc(100dvh - var(--sm4j-top) - 12px); overflow:auto; overscroll-behavior:contain; scrollbar-width:thin; margin:0; padding:3px 0; font:inherit; }
.sm4j, .sm4j * { box-sizing:border-box; }
.sm4j[data-side="left"] { left:0; }
.sm4j[data-side="right"] { right:0; direction:rtl; }
.sm4j[data-side="right"] .sm4j-list { direction:ltr; }
.sm4j .sm4j-list { display:flex; flex-direction:column; align-items:stretch; gap:4px; list-style:none; margin:0; padding:0; }
.sm4j .sm4j-list li { display:block; margin:0; padding:0; list-style:none; }
.sm4j .sm4j-link { display:flex; align-items:center; justify-content:center; gap:10px; min-width:48px; min-height:48px; padding:11px; margin:0; border:1px solid rgba(255,255,255,.3); border-radius:0 8px 8px 0; background:var(--sm4j-background,#15558c); color:var(--sm4j-foreground,#fff); text-decoration:none; font:inherit; font-weight:650; line-height:1.3; }
.sm4j[data-side="right"] .sm4j-link { border-radius:8px 0 0 8px; }
.sm4j .sm4j-link:hover { color:var(--sm4j-foreground,#fff); text-decoration:none; filter:brightness(1.15); }
.sm4j .sm4j-link:focus-visible { outline:3px solid #e7a817; outline-offset:-3px; }
.sm4j .sm4j-icon { display:block; width:24px; height:24px; flex:none; fill:currentColor; }
.sm4j[data-labels="icons"] .sm4j-label { display:none; }
.sm4j[data-labels="text"] .sm4j-link { justify-content:flex-start; }
.sm4j .sm4j-label { min-width:0; overflow-wrap:anywhere; }
@media(max-width:640px) {
  .sm4j { max-width:min(180px,calc(100vw - 24px)); }
  .sm4j .sm4j-link { min-width:44px; min-height:44px; padding:9px; font-size:.9rem; }
  .sm4j .sm4j-icon { width:22px; height:22px; }
}