/* The iPhone keyboard (member request, Ethan: one that works exactly like Apple's, without the up/down/check bar).
   A replica of Apple's keyboard, so it wears Apple's look, not the room's: system type, the light grey tray with white
   letter keys and darker grey function keys (dark mode follows the phone), rounded keys with a hairline underside, the
   balloon over a pressed letter, blue only on send/go/done and the accent picker. kb.js builds and drives it. */
.vkb {
  --tray: #d1d3d9; --key: #fff; --fn: #abb0ba; --ink: #000; --edge: rgba(0, 0, 0, .3); --hint: #50555c; --line: #b5b8bf;
  --blue: #0a7aff; --kh: 42px; --rg: 12px;
  --kw: calc((100vw - env(safe-area-inset-left) - env(safe-area-inset-right) - 60px) / 10);
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 2147483000;
  background: var(--tray); color: var(--ink);
  padding: 0 env(safe-area-inset-right) var(--sab, 0px) env(safe-area-inset-left);
  font-family: -apple-system, "SF Pro Text", system-ui, "Helvetica Neue", sans-serif; font-weight: 400; line-height: 1;
  user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; touch-action: none;
  -webkit-tap-highlight-color: transparent;
  transform: translateY(100%); transition: transform .25s cubic-bezier(.2, .8, .2, 1);
}
.vkb.up { transform: none; }
.vkb[hidden] { display: none; }
@media (prefers-color-scheme: dark) {
  .vkb { --tray: #2b2b2d; --key: #6b6b6d; --fn: #464648; --ink: #fff; --edge: rgba(0, 0, 0, .55); --hint: #d6d6d8; --line: #545458; }
}
@media (prefers-reduced-motion: reduce) { .vkb { transition: none; } }

/* suggestions */
.vkb-bar { height: 44px; display: flex; align-items: center; padding: 0 5px; }
.vkb-bar i { flex: none; width: 1px; height: 24px; background: var(--line); }
.vkb-s { flex: 1 1 0; min-width: 0; height: 36px; padding: 0 6px; border-radius: 8px; font-size: 17px; line-height: 36px;
  text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vkb-s.on { background: var(--key); box-shadow: 0 1px 0 var(--edge); }
.vkb-s.dn { background: var(--fn); }
.vkb-s.emo { font-size: 24px; }
.vkb.listen .vkb-s[data-s="0"] { flex: 3 1 0; text-align: left; color: var(--hint); }

/* keys */
.vkb-keys { padding: 6px 0 2px; }
.vkb-row { display: flex; gap: 6px; justify-content: center; height: var(--kh); padding: 0 3px; margin-bottom: var(--rg); }
.vkb-row:last-child { margin-bottom: 0; }
.vkb-row.r2 { justify-content: space-between; }
.vkb-row .g { display: flex; gap: 6px; }
.vkb .k { flex: none; width: var(--kw); height: var(--kh); border-radius: 8.5px; background: var(--key); color: var(--ink);
  box-shadow: 0 1px 0 var(--edge); display: flex; align-items: center; justify-content: center; font-size: 25px; }
.vkb .k span { pointer-events: none; }
.vkb .k svg { width: 24px; height: 24px; pointer-events: none; }
.vkb .k.fn svg { width: 25px; }
.vkb[data-shift="on"] .k.l span, .vkb[data-shift="lock"] .k.l span { text-transform: uppercase; }
.vkb .k.f { background: var(--fn); font-size: 16px; letter-spacing: -.01em; }
.vkb .k.fn { width: calc(var(--kw) * 1.27 + 1px); }
.vkb .k.mid { width: calc(var(--kw) * 1.42); }
.vkb .k.mo, .vkb .k.ret { width: calc(var(--kw) * 2.5 + 9px); }
.vkb .k.sp { flex: 1 1 0; width: auto; font-size: 16px; }
.vkb .k.x { width: calc(var(--kw) * 1.25); }
.vkb .k.w { width: calc(var(--kw) * 1.7); }
.vkb-row.r3:has(.x) .k.mo, .vkb-row.r3:has(.x) .k.ret { width: calc(var(--kw) * 1.9); }
.vkb .k.ret.go { background: var(--blue); color: #fff; }
.vkb:is([data-shift="on"], [data-shift="lock"]) .k.sh { background: var(--key); }
/* pressed: grey keys light up, white ones go grey (letters balloon instead) */
.vkb .k.f.dn { background: var(--key); }
.vkb .k.dn:not(.f) { background: var(--fn); }
.vkb .k.ret.go.dn { background: var(--key); color: var(--ink); }

/* the balloon over a pressed key, and the accents a held one offers */
.vkb-pop { position: absolute; z-index: 2; pointer-events: none; }
.vkb-pop svg { position: absolute; inset: 0; overflow: visible; fill: var(--key);
  filter: drop-shadow(0 0 .5px rgba(0, 0, 0, .45)) drop-shadow(0 2px 3px rgba(0, 0, 0, .18)); }
.vkb-pop b { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; font-size: 36px; font-weight: 400; color: var(--ink); }
.vkb-alts { position: absolute; z-index: 3; display: flex; padding: 4px; border-radius: 10px; background: var(--key); pointer-events: none;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .3), 0 3px 8px rgba(0, 0, 0, .2); }
.vkb-alts span { width: var(--aw); height: 48px; display: flex; align-items: center; justify-content: center; font-size: 27px; border-radius: 6px; }
.vkb-alts span.on { background: var(--blue); color: #fff; }

/* holding the space bar turns the keys into a trackpad */
.vkb.track .k, .vkb.track .k.dn { background: var(--fn); box-shadow: none; }
.vkb.track .k > * { opacity: 0; }
.vkb.track .vkb-bar { opacity: .35; }

/* emoji and dictation under the keys, where Apple puts them */
.vkb-foot { height: 46px; display: flex; justify-content: space-between; align-items: center; padding: 0 16px; }
.vkb-fb { width: 52px; height: 40px; display: flex; align-items: center; justify-content: center; color: var(--hint); border-radius: 10px; }
.vkb-fb svg { width: 27px; height: 27px; }
.vkb-fb.dn { background: var(--fn); }
.vkb.emo .vkb-fb[data-f="emoji"] { color: var(--ink); }
.vkb.listen .vkb-fb[data-f="mic"] { color: #fff; background: var(--blue); }

/* emoji */
.vkb.emo .vkb-bar, .vkb.emo .vkb-keys { display: none; }
.vkb-emo { height: 256px; display: flex; flex-direction: column; }
.vkb-emo[hidden] { display: none; }
.vkb-emo-grid { flex: 1; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden; touch-action: pan-x; scrollbar-width: none; overscroll-behavior: contain; }
.vkb-emo-grid::-webkit-scrollbar { display: none; }
.vkb-emo-grid section { flex: none; display: flex; flex-direction: column; min-width: 0; }
.vkb-emo-grid h4 { position: sticky; left: 0; margin: 0; padding: 10px 10px 4px; font-size: 12px; font-weight: 600; color: var(--hint);
  text-transform: uppercase; letter-spacing: .02em; white-space: nowrap; align-self: flex-start; }
.vkb-eg { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-template-rows: repeat(5, 1fr); grid-auto-columns: 45px; padding: 0 5px; }
.vkb-eg span { display: flex; align-items: center; justify-content: center; font-size: 32px; line-height: 1; border-radius: 8px; }
.vkb-eg span.dn { background: var(--fn); }
.vkb-emo-cats { flex: none; height: 40px; display: flex; align-items: center; gap: 2px; padding: 0 3px; }
.vkb-emo-cats .k { width: auto; height: 32px; padding: 0 10px; font-size: 15px; }
.vkb-emo-cats .k.fn { width: 46px; padding: 0; }
.vkb-cat { flex: 1 1 0; height: 30px; display: flex; align-items: center; justify-content: center; font-size: 17px; border-radius: 15px; filter: grayscale(1); opacity: .5; }
.vkb-cat.on { filter: none; opacity: 1; background: var(--fn); }

/* landscape phones: shorter keys, like Apple's */
@media (orientation: landscape) and (max-height: 500px) {
  .vkb { --kh: 32px; --rg: 6px; }
  .vkb-bar { height: 36px; }
  .vkb-s { height: 30px; line-height: 30px; }
  .vkb .k { font-size: 21px; }
  .vkb-keys { padding-top: 3px; }
  .vkb-foot { height: 32px; }
  .vkb-emo { height: 187px; }
  .vkb-eg { grid-template-rows: repeat(4, 1fr); }
}