/* A mesma folha, tinta e bordas tortinhas do restante do caderno. */
#pad-keyboard {
  position: fixed; inset: auto 0 16px; margin: 0 auto; padding: 18px 22px 14px;
  width: min(780px, calc(100% - 24px)); max-height: calc(100dvh - 24px);
  background: var(--rule), var(--paper); overflow: auto;
}
#pad-keyboard::backdrop { background: #293e983d; backdrop-filter: blur(2px); }
.pad-keyboard-header { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
#pad-keyboard h2 { flex: 1; margin: 0; font: 700 30px/1 var(--display); }
#pad-keyboard .pad-keyboard-header button { background: #f4ded8; padding: 5px 12px; font-size: 17px; }
.pad-keyboard-message { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }
#pad-keyboard-preview { width: 100%; height: 43px; padding: 6px 12px; border: 1.5px solid var(--ink); border-radius: var(--edge); background: var(--paper); font-size: 23px; }
.pad-keyboard-message output { flex-shrink: 0; color: var(--muted); font-size: 15px; }
.pad-keyboard-keys { display: grid; gap: 7px; }
.pad-keyboard-row { display: flex; gap: 7px; }
#pad-keyboard .pad-keyboard-row button { flex: 1; min-width: 0; height: 42px; padding: 0 3px; background: var(--paper); box-shadow: var(--shadow); font-size: 24px; }
#pad-keyboard .pad-keyboard-row:last-child button { font-size: 17px; background: #e4e8f6; }
#pad-keyboard button[data-key="space"] { flex: 1.6; }
#pad-keyboard .pad-keyboard-row button[data-key="send"] { background: var(--ink); color: var(--paper); }
#pad-keyboard .pad-keyboard-row button:focus, #pad-keyboard .pad-keyboard-row button[aria-pressed="true"] { background: var(--hatch), var(--yellow); color: var(--ink); outline: 2px dashed var(--coral); outline-offset: 2px; }
#pad-keyboard .pad-keyboard-help { margin-top: 12px; color: var(--muted); font-size: 15px; text-align: center; line-height: 1.2; }
/* Sem filtro no ancestral: a mao usa coordenadas fixas da janela. */
@media (max-height: 480px) {
  #pad-keyboard { bottom: 6px; padding: 10px 16px; max-height: calc(100dvh - 12px); }
  #pad-keyboard h2 { font-size: 25px; }
  .pad-keyboard-header { margin-bottom: 7px; }
  .pad-keyboard-message { margin-bottom: 8px; }
  #pad-keyboard-preview { height: 34px; font-size: 20px; }
  #pad-keyboard .pad-keyboard-row button { height: 32px; font-size: 21px; }
  #pad-keyboard .pad-keyboard-help { margin-top: 8px; font-size: 13px; }
}
@media (max-width: 480px) {
  #pad-keyboard { padding: 12px 10px; }
  #pad-keyboard h2 { font-size: 23px; }
  .pad-keyboard-row { gap: 4px; }
  #pad-keyboard .pad-keyboard-row:last-child button { font-size: 12px; }
  .pad-keyboard-message output { font-size: 12px; }
}