/* GRID Keybar: accessory key bar for terminals on touch devices. See keybar.js for the API.
   Override --gk-* on the bar's container (or :root) to retheme. */
.gk-bar {
  --gk-bg: #0a0d22; --gk-key: #141a3a; --gk-text: #d8e6ff; --gk-accent: #7df9ff; --gk-danger: #ff4d6d;
  display: flex; gap: 4px; align-items: stretch; box-sizing: border-box; width: 100%;
  padding: 5px 4px calc(5px + env(safe-area-inset-bottom, 0px) * 0); background: var(--gk-bg);
  border-top: 1px solid rgba(125, 249, 255, .35); overflow-x: auto; overflow-y: hidden;
  -webkit-overflow-scrolling: touch; scrollbar-width: none;
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  font-family: 'JetBrains Mono', ui-monospace, Menlo, Consolas, monospace;
}
.gk-bar[hidden] { display: none; }
.gk-bar::-webkit-scrollbar { display: none; }
.gk-fixed { position: fixed; left: 0; right: 0; top: 0; z-index: 2147483000; }
.gk-key {
  flex: 1 0 44px; min-width: 44px; min-height: 44px; padding: 0 6px; margin: 0;
  font: inherit; font-size: 17px; font-weight: 700; line-height: 1; color: var(--gk-text);
  background: var(--gk-key); border: 1px solid rgba(125, 249, 255, .4); border-radius: 8px;
  box-shadow: 0 1px 0 rgba(0, 0, 0, .6); cursor: pointer;
  touch-action: manipulation; -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none;
}
.gk-key.gk-wide { flex-grow: 1.5; min-width: 54px; font-size: 15px; }
.gk-key:active, .gk-key.on { background: var(--gk-accent); color: #02030a; border-color: var(--gk-accent); }
.gk-key.danger { color: var(--gk-danger); border-color: rgba(255, 77, 109, .55); }
.gk-key.danger:active { background: var(--gk-danger); color: #02030a; }
@media (max-height: 520px) {
  .gk-bar { padding-top: 3px; padding-bottom: 3px; }
}
@media (prefers-reduced-motion: reduce) { .gk-key { transition: none; } }