/* ============================================================
   ZOLO KEYBOARD — custom on-screen keyboard for iPhone/iPad
   Activates only on iOS-class devices when an opted-in field
   focuses. Suppresses the native keyboard via a readonly-input
   shim and routes characters back to the original target.
   ============================================================ */

#zk-root {
  position: fixed; left: 0; right: 0; bottom: 0;
  z-index: 100000;
  background: linear-gradient(180deg, #14091f 0%, #0a0614 100%);
  border-top: 1px solid rgba(255,255,255,0.10);
  box-shadow: 0 -10px 40px rgba(0,0,0,0.6);
  font-family: 'Fredoka', system-ui, -apple-system, sans-serif;
  color: #e0ddf5;
  user-select: none; -webkit-user-select: none;
  transform: translateY(110%);
  transition: transform .22s cubic-bezier(.2,.9,.3,1);
  padding-bottom: env(safe-area-inset-bottom, 0);
  touch-action: manipulation;
}
#zk-root.zk-open { transform: translateY(0); }

/* Suggestion / autocomplete strip */
.zk-suggest {
  display: flex; align-items: center; gap: 5px;
  padding: 4px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(20,9,31,0.7);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  min-height: 30px;
}
.zk-suggest::-webkit-scrollbar { display: none; }
.zk-chip {
  flex-shrink: 0;
  padding: 4px 10px;
  background: rgba(155,123,255,0.14);
  border: 1px solid rgba(155,123,255,0.25);
  border-radius: 999px;
  font-size: 12px; color: #e0ddf5;
  white-space: nowrap;
  cursor: pointer;
}
.zk-chip:active { background: rgba(155,123,255,0.30); }
.zk-chip.code { font-family: 'JetBrains Mono', Menlo, monospace; font-size: 11px; }

/* Emoji row */
.zk-emoji {
  display: flex; gap: 2px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(26,15,46,0.5);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.zk-emoji::-webkit-scrollbar { display: none; }
.zk-emoji button {
  flex-shrink: 0;
  width: 30px; height: 30px;
  border: none; background: transparent;
  font-size: 18px; line-height: 1;
  border-radius: 6px;
  cursor: pointer;
}
.zk-emoji button:active { background: rgba(255,255,255,0.08); }

/* Main keys */
.zk-keys {
  display: flex; flex-direction: column; gap: 3px;
  padding: 4px 4px 6px;
}
.zk-row { display: flex; gap: 3px; justify-content: center; }
.zk-key {
  flex: 1 1 0;
  min-width: 0; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.06);
  color: #e0ddf5;
  border-radius: 6px;
  font-size: 15px; font-weight: 500;
  cursor: pointer;
  transition: background .08s, transform .08s;
}
.zk-key:active { background: rgba(155,123,255,0.35); transform: scale(0.96); }
.zk-key.wide  { flex: 1.5 1 0; font-size: 12px; }
.zk-key.xwide { flex: 4   1 0; font-size: 12px; }
.zk-key.dark  { background: rgba(255,255,255,0.04); color: rgba(224,221,245,0.8); font-size: 11px; }
.zk-key.ai {
  background: linear-gradient(135deg, #ff6ec7, #9b7bff, #5cf1ff);
  color: #0a0614; font-weight: 700;
  border: none;
}
.zk-key.ai:active { filter: brightness(1.1); }

/* Top toolbar (close, mode switch) */
.zk-bar {
  display: flex; align-items: center; gap: 6px;
  padding: 2px 6px;
  border-bottom: 1px solid rgba(255,255,255,0.06);
  background: rgba(10,6,20,0.7);
  font-size: 10px;
  color: rgba(224,221,245,0.5);
  min-height: 22px;
}
.zk-bar .spacer { flex: 1; }
.zk-bar button {
  background: transparent; border: none; color: inherit;
  padding: 4px 8px; font-size: 12px; cursor: pointer;
  border-radius: 6px;
}
.zk-bar button:active { background: rgba(255,255,255,0.08); }
.zk-bar .zk-active-mode {
  color: #5cf1ff; font-weight: 600;
}

/* Body padding while keyboard is up so input isn't covered.
   Sized to match the new compact keyboard (suggest+keys ~ 230px). */
body.zk-active { padding-bottom: 230px; }