/* mobile-keyboard.css — Floating accessory toolbar above the iOS keyboard.
   Hidden by default; the JS adds .visible while #editor is focused and the
   soft keyboard is up. Position is updated from JS via inline style.bottom
   so the bar tracks visualViewport changes during the keyboard animation. */

.mobile-kb-bar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  display: none;
  flex-wrap: nowrap;
  align-items: center;
  gap: 6px;
  padding: 4px 8px;
  background: var(--bg);
  border-top: 1px solid var(--border);
  box-shadow: 0 -2px 8px var(--shadow-light, rgba(0, 0, 0, 0.15));
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Don't fight the keyboard: the JS sets bottom: <kb height> while the
     keyboard is up. When closed, the bar hides entirely. */
  box-sizing: border-box;
}

.mobile-kb-bar.visible {
  display: flex;
}

.mobile-kb-btn {
  flex: 0 0 auto;
  min-width: 44px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface, var(--bg));
  color: var(--text);
  font-family: inherit;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  transition: background-color 0.1s ease, transform 0.05s ease;
}

.mobile-kb-btn:active {
  background-color: var(--hover-overlay, rgba(0, 0, 0, 0.08));
  transform: scale(0.96);
}

.mobile-kb-btn.kb-bold   { font-weight: 700; }
.mobile-kb-btn.kb-italic { font-style: italic; }

/* Editor-section pads its bottom by the bar height while it's visible so
   the cursor isn't covered by the bar. The JS sets the var to "0px" when
   the bar is hidden. */
#editor-section {
  padding-bottom: var(--mobile-kb-bar-h, 0px);
}