.ui-btt {
  position: fixed; right: max(20px, env(safe-area-inset-right)); bottom: max(20px, env(safe-area-inset-bottom)); z-index: 40;
}
.ui-btt-inline { position: sticky; right: auto; bottom: 12px; z-index: 2; height: 0; }
.ui-btt-inline .ui-btt-btn { position: absolute; right: 12px; bottom: 0; }
.ui-btt-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-width: 44px; height: 44px; padding: 0 12px;
  border: 1px solid var(--ui-border); border-radius: 999px; background: var(--ui-surface); color: var(--ui-fg);
  box-shadow: var(--ui-shadow); font: 500 14px/1 var(--ui-font); cursor: pointer;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .2s, transform .2s, visibility .2s, background .15s, border-color .15s, box-shadow .15s;
}
.ui-btt-btn svg { width: 18px; height: 18px; flex: none; }
.ui-btt-btn:not(.ui-btt-labelled) { width: 44px; padding: 0; }
.ui-btt-shown .ui-btt-btn { opacity: 1; visibility: visible; transform: none; }
.ui-btt-btn:hover { border-color: var(--ui-strong); background: var(--ui-subtle); }
.ui-btt-btn:focus-visible { outline: none; box-shadow: var(--ui-shadow), var(--ui-focus); }
@media (prefers-reduced-motion: reduce) { .ui-btt-btn { transition: none; } }