.ui-keyboard-bar-host { min-width: 0; }
.ui-keyboard-bar {
  position: fixed; inset: auto 0 0 0; z-index: 40; container-type: inline-size; visibility: hidden; box-sizing: border-box;
  border-top: 1px solid var(--ui-border); background: var(--ui-subtle); color: var(--ui-fg); font: 15px/1.3 var(--ui-font);
  padding-inline: max(4px, env(safe-area-inset-left)) max(4px, env(safe-area-inset-right)); will-change: transform; touch-action: manipulation;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none;
}
.ui-keyboard-bar-on { visibility: visible; }
/* With the keyboard down the bar reaches the screen's edge, and clears the home indicator. */
.ui-keyboard-bar-low { padding-bottom: env(safe-area-inset-bottom); }
.ui-keyboard-bar-row { display: flex; align-items: center; gap: 4px; }
.ui-keyboard-bar-btn {
  display: grid; place-items: center; min-width: 48px; height: 46px; margin: 0; padding: 0 6px; border: 0; border-radius: var(--ui-radius-sm);
  background: transparent; color: var(--ui-accent); font: 500 16px var(--ui-font); cursor: pointer; touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
.ui-keyboard-bar-btn svg { width: 24px; height: 24px; }
.ui-keyboard-bar-btn[aria-disabled="true"] { color: var(--ui-muted); opacity: .45; cursor: default; }
.ui-keyboard-bar-btn:focus-visible { outline: none; box-shadow: var(--ui-focus); }
.ui-keyboard-bar-where { flex: 1; min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: center; color: var(--ui-muted); visibility: hidden; }
.ui-keyboard-bar-done { padding: 0 12px; font-weight: 600; }
@media (hover: hover) { .ui-keyboard-bar-btn:hover:not([aria-disabled="true"]) { background: var(--ui-bg); } }
@container (min-width: 440px) {
  .ui-keyboard-bar-where { visibility: visible; }
}