/* SMAU FILE
 * Path: css/smau-keyboard.css
 * Description: Premium styles for the in-app virtual keyboard.
 *
 * EVERY METRIC SCALES TO THE PHONE, NOT THE WINDOW.
 * --smau-kb-w is published by smau.keyboard.js as the phone's real inner
 * width. Key size, gaps, padding and type all derive from it, so the keyboard
 * fits inside a 320px handset and a 430px one without ever spilling past the
 * device edges or covering more of the screen than a keyboard should.
 */

.smau-keyboard {
  /* Fallback keeps the keyboard sane before the first measurement lands. */
  --kb-w: var(--smau-kb-w, 390px);

  --kb-gap: clamp(3px, calc(var(--kb-w) * 0.0135), 6px);
  --kb-pad-x: clamp(2px, calc(var(--kb-w) * 0.012), 5px);
  --kb-pad-y: clamp(6px, calc(var(--kb-w) * 0.022), 10px);
  --kb-key-h: clamp(30px, calc(var(--kb-w) * 0.118), 48px);
  --kb-key-r: clamp(5px, calc(var(--kb-w) * 0.017), 8px);
  --kb-font: clamp(14px, calc(var(--kb-w) * 0.052), 21px);
  --kb-font-special: clamp(11px, calc(var(--kb-w) * 0.039), 16px);

  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  max-width: 100%;
  background: rgba(10, 12, 22, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(255, 255, 255, 0.08);
  padding: var(--kb-pad-y) var(--kb-pad-x) calc(var(--kb-pad-y) + env(safe-area-inset-bottom)) var(--kb-pad-x);
  box-sizing: border-box;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  gap: var(--kb-gap);
  transform: translateY(100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
  box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.4);
  user-select: none;
  -webkit-user-select: none;
  overflow: visible;
}

.smau-keyboard[data-state="open"] {
  transform: translateY(0);
}

.smau-keyboard-row {
  display: flex;
  justify-content: center;
  gap: var(--kb-gap);
  width: 100%;
  min-width: 0;
}

/* The nine-key middle row sits half a key in from each edge, like a phone.
   Half a key of a ten-key row works out to exactly 5% of the row plus a
   twentieth of a gap — no measuring required. */
.smau-keyboard-row--home {
  padding-inline: calc(5% + var(--kb-gap) * 0.05);
}

/* Accessory bar: predictions on the left, dismiss chevron on the right */
.smau-keyboard-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  min-height: clamp(26px, calc(var(--kb-w) * 0.082), 34px);
  padding: 0 2px;
}

.smau-keyboard-suggests {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.smau-keyboard-bar-hint {
  font: 500 12px/1.2 'Inter', -apple-system, sans-serif;
  color: rgba(255, 255, 255, 0.42);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  align-self: center;
  padding-left: 4px;
}

/* Predictive text chips — three equal slots, divided like a real strip. */
.smau-keyboard .smau-suggest {
  flex: 1 1 0;
  min-width: 0;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.78);
  font: 500 clamp(12px, calc(var(--kb-w) * 0.039), 15px)/1 'Inter', -apple-system, sans-serif;
  padding: 4px 2px;
  border-radius: 6px;
  cursor: pointer;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: background 0.1s, color 0.1s;
}

.smau-keyboard .smau-suggest + .smau-suggest {
  box-shadow: inset 1px 0 0 rgba(255, 255, 255, 0.09);
}

.smau-keyboard .smau-suggest--primary {
  color: #ffffff;
  font-weight: 600;
}

.smau-keyboard .smau-suggest:active {
  background: rgba(255, 255, 255, 0.16);
  color: #ffffff;
}

.smau-keyboard .smau-keyboard-hide {
  flex: 0 0 auto;
  width: 40px;
  height: 26px;
  border: none;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.75);
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.1s;
}

.smau-keyboard .smau-keyboard-hide:active {
  background: rgba(255, 255, 255, 0.2);
}

/* Emoji panel */
.smau-keyboard-emoji-label {
  font: 600 11px/1 'Inter', -apple-system, sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.4);
  padding: 2px 6px 0;
}

.smau-keyboard-emoji-grid {
  display: grid;
  grid-template-columns: repeat(8, minmax(0, 1fr));
  gap: var(--kb-gap);
}

.smau-keyboard .smau-keyboard-emoji-grid .smau-key {
  height: calc(var(--kb-key-h) * 0.92);
  background: transparent;
  box-shadow: none;
  /* Emoji have no alternates, so the grid keeps its vertical scroll. */
  touch-action: manipulation;
}

.smau-keyboard .smau-keyboard-emoji-grid .smau-key:active {
  background: rgba(255, 255, 255, 0.16);
}

.smau-keyboard-emoji-grid--recent {
  grid-auto-rows: calc(var(--kb-key-h) * 0.92);
  max-height: calc(var(--kb-key-h) * 0.92);
  overflow: hidden;
}

.smau-keyboard-emoji-scroll {
  max-height: calc(var(--kb-key-h) * 3.1);
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

.smau-keyboard .smau-key {
  flex: 1 1 0;
  min-width: 0;
  height: var(--kb-key-h);
  background: rgba(255, 255, 255, 0.07);
  color: #ffffff;
  border: none;
  border-radius: var(--kb-key-r);
  font-family: 'Inter', -apple-system, sans-serif;
  font-size: var(--kb-font);
  font-weight: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  outline: none;
  position: relative;
  transition: background 0.1s, transform 0.05s;
  touch-action: none;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
  white-space: nowrap;
  overflow: hidden;
  padding: 0 2px;
}

.smau-keyboard .smau-key:active,
.smau-keyboard .smau-key.is-down {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(0.95);
}

/* The faint alternate printed in the corner — the phone's own promise that
   holding this key gives you a digit or a symbol. */
.smau-keyboard .smau-key.has-alts::after {
  content: attr(data-alt);
  position: absolute;
  top: 2px;
  right: 4px;
  font-size: calc(var(--kb-font) * 0.46);
  line-height: 1;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.34);
  pointer-events: none;
}

/* Functional/Special keys */
.smau-keyboard .smau-key--special {
  background: rgba(255, 255, 255, 0.12);
  font-size: var(--kb-font-special);
  font-weight: 600;
}

.smau-keyboard .smau-key--special:active {
  background: rgba(255, 255, 255, 0.25);
}

.smau-keyboard .smau-key--shift,
.smau-keyboard .smau-key--backspace {
  flex: 1.5 1 0;
}

.smau-keyboard .smau-key--shift.active {
  background: #ffffff;
  color: #05060a;
}

.smau-keyboard .smau-key--shift.locked {
  background: #ffffff;
  color: #05060a;
  box-shadow: 0 0 0 2px rgb(var(--os-accent-rgb, 79 140 255) / 0.55);
}

.smau-keyboard .smau-key--mode {
  flex: 1.5 1 0;
  font-size: calc(var(--kb-font-special) * 0.92);
}

/* Comma and period, either side of the spacebar. Deliberately narrow so the
   spacebar keeps the width your thumb expects. */
.smau-keyboard .smau-key--punct {
  flex: 1 1 0;
  font-size: var(--kb-font);
}

.smau-keyboard .smau-key--space {
  flex: 4.5 1 0;
}

.smau-keyboard .smau-key--done {
  flex: 2 1 0;
  background: #3b82f6;
  color: #ffffff;
  font-size: var(--kb-font-special);
  font-weight: 600;
}

.smau-keyboard .smau-key--done:active {
  background: #2563eb;
}

.smau-keyboard .smau-key--emoji.active {
  background: #ffffff;
  color: #05060a;
}

.smau-keyboard .smau-key--emoji-char {
  font-size: calc(var(--kb-font) * 1.18);
}

/* --------------------------------------------------------------------------
   PRESS PREVIEW + PRESS-AND-HOLD ALTERNATES
   Both float above the key inside the keyboard's own box, so they can never
   escape the phone.
-------------------------------------------------------------------------- */

.smau-key-preview,
.smau-key-popup {
  position: absolute;
  z-index: 3;
  pointer-events: none;
  background: rgba(30, 34, 52, 0.98);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: calc(var(--kb-key-r) + 2px);
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.55);
  color: #ffffff;
  animation: smau-key-pop 0.09s ease-out;
}

.smau-key-preview {
  min-width: calc(var(--kb-key-h) * 0.9);
  height: calc(var(--kb-key-h) * 1.05);
  padding: 0 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(var(--kb-font) * 1.35);
  font-weight: 600;
}

.smau-key-popup {
  display: flex;
  gap: 2px;
  padding: 3px;
}

.smau-key-alt {
  min-width: calc(var(--kb-key-h) * 0.86);
  height: calc(var(--kb-key-h) * 0.94);
  padding: 0 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: calc(var(--kb-key-r) - 1px);
  font-size: calc(var(--kb-font) * 1.02);
  font-weight: 500;
  color: rgba(255, 255, 255, 0.88);
}

.smau-key-alt.is-active {
  background: #3b82f6;
  color: #ffffff;
}

@keyframes smau-key-pop {
  from { opacity: 0; transform: translateY(4px) scale(0.94); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .smau-key-preview,
  .smau-key-popup {
    animation: none;
  }
}

/* Shrink the open app above the keyboard, like a real OS viewport resize.
   NOTE: .app-view is position:absolute; inset:0 inside .app-body, so padding
   on .app-body is ignored (absolute children resolve against the padding
   box) — that was why inputs stayed buried under the keyboard. Raising the
   app view's bottom edge is the mechanism that actually works.
   --smau-keyboard-height is set by smau.keyboard.js to the real measured
   keyboard height (layouts differ: letters vs emoji panel) — or, when the
   reader has chosen the DEVICE keyboard, to how much of the phone the OS
   keyboard is covering, measured off visualViewport. Same variable, same
   shrink, so both keyboards end up inside the phone rather than on top. */
.smau-phone-inner[data-keyboard-open="true"] #screen-app .app-view {
  /* height:auto is required: the base rule sets top:0 + height:100%, which
     would ignore this bottom offset entirely. */
  bottom: var(--smau-keyboard-height, 230px);
  height: auto;
}

.smau-phone-inner[data-keyboard-open="true"] .home-grid-wrap {
  padding-bottom: var(--smau-keyboard-height, 230px) !important;
}