#ww-keyboard-toggle {
  display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 32px;
  padding: 0; border: 1px solid transparent; border-radius: 8px; color: inherit; background: transparent;
  font: 22px/1 system-ui, sans-serif; cursor: pointer; touch-action: manipulation;
}
body > #ww-keyboard-toggle {
  position: fixed; right: 14px; bottom: max(14px, env(safe-area-inset-bottom)); z-index: 100001;
  color: #173454; background: #fff; border-color: #b6c6d8; box-shadow: 0 2px 12px #17345430;
}
#ww-keyboard-toggle.active { background: #d6e8ff; color: #1452a1; }
#ww-keyboard-recover {
  position: fixed; z-index: 2147482999; right: max(12px, env(safe-area-inset-right));
  top: max(12px, env(safe-area-inset-top, 0px)); box-sizing: border-box;
  max-width: calc(100vw - 24px); min-height: 42px; padding: 8px 13px;
  appearance: none; border: 1px solid #94b9e7; border-radius: 10px;
  color: #1452a1; background: #f7fbff; box-shadow: 0 3px 14px #17345430;
  font: 14px/1.3 system-ui, -apple-system, "Segoe UI", sans-serif;
  white-space: nowrap; touch-action: manipulation; cursor: pointer;
}
#ww-keyboard-recover:active { background: #d6e8ff; }
#ww-keyboard-recover:focus-visible { outline: 2px solid #1452a1; outline-offset: 2px; }
#ww-keyboard-panel, #ww-keyboard-candidates {
  --ww-keyboard-key-height: 43px;
  color-scheme: light; position: fixed; z-index: 2147483000; box-sizing: border-box;
  border: 1px solid #b7c8db; border-radius: 14px; color: #1c3049; background: #e8eff7;
  box-shadow: 0 10px 40px #132d4c40; font: 14px/1.4 system-ui, -apple-system, "Segoe UI", sans-serif;
  direction: ltr; -webkit-tap-highlight-color: transparent;
}
#ww-keyboard-toggle[hidden], #ww-keyboard-recover[hidden], #ww-keyboard-panel[hidden], #ww-keyboard-candidates[hidden], #ww-keyboard-panel [hidden] { display: none !important; }
/* The viewport-sized overlay lives outside the zoomed desktop body. Keep it
   behind the shell's startup gate before JavaScript lifecycle callbacks run. */
html.ww-boot-pending #ww-keyboard-toggle,
html.ww-boot-pending #ww-keyboard-recover,
html.ww-boot-pending #ww-keyboard-panel,
html.ww-boot-pending #ww-keyboard-candidates { display: none !important; }
#ww-keyboard-panel {
  width: min(900px, calc(100vw - 20px)); left: 50%; transform: translateX(-50%);
  bottom: max(54px, env(safe-area-inset-bottom)); padding: 8px;
  max-height: calc(100dvh - 16px); overflow-y: auto; overscroll-behavior: contain; touch-action: manipulation;
}
#ww-keyboard-panel button, #ww-keyboard-candidates button {
  box-sizing: border-box; appearance: none; min-width: 0; margin: 0; border: 1px solid #cbd8e7;
  border-radius: 7px; color: #1c3049; background: #fff; box-shadow: 0 1px 1px #12385d1a;
  font: inherit; touch-action: manipulation; user-select: none; -webkit-user-select: none; cursor: pointer;
}
#ww-keyboard-panel button:active, #ww-keyboard-candidates button:active { background: #bfdcff; transform: translateY(1px); }
#ww-keyboard-panel button.active, #ww-keyboard-panel button[aria-pressed="true"] { color: #155cac; background: #c9e1ff; border-color: #94b9e7; }
#ww-keyboard-panel button:disabled, #ww-keyboard-candidates button:disabled { opacity: .45; cursor: default; transform: none; }
#ww-keyboard-panel button:focus-visible, #ww-keyboard-candidates button:focus-visible, #ww-keyboard-toggle:focus-visible { outline: 2px solid #1452a1; outline-offset: 1px; }
.ww-keyboard-toolbar { position: relative; display: flex; align-items: center; gap: 6px; min-height: 32px; margin-bottom: 3px; }
.ww-keyboard-toolbar strong { flex: 1; min-width: 0; font-size: 13px; font-weight: 650; letter-spacing: -.2px; }
.ww-keyboard-toolbar button { min-height: 30px; padding: 4px 10px; font-size: 12px !important; white-space: nowrap; }
.ww-keyboard-toolbar .ww-keyboard-hide { min-width: 32px; font-size: 20px !important; line-height: 1; padding: 1px 8px; }
.ww-keyboard-toolbar .ww-keyboard-suggest { color: #2061a9 !important; border-color: #b4cce8 !important; }
.ww-keyboard-privacy { display: block; margin: 1px 3px 3px; color: #60768d; font-size: 10px; line-height: 1.3; }
.ww-keyboard-notice { padding: 5px 8px; margin: 3px 0 5px; font-size: 12px; color: #725107; background: #fff6d9; border: 1px solid #f2dda4; border-radius: 6px; }
.ww-keyboard-modes { display: flex; align-items: center; gap: 5px; padding: 3px 0 5px; border-bottom: 1px solid #cbd9e8; }
.ww-keyboard-modes button { flex: 1 1 0; min-height: 29px; padding: 2px 8px; border-color: transparent !important; background: transparent !important; box-shadow: none !important; font-size: 14px !important; }
.ww-keyboard-modes button.active { color: #124e99 !important; background: #d0e3fb !important; font-weight: 650; }
.ww-keyboard-row { display: flex; justify-content: center; gap: 5px; margin-top: 5px; }
.ww-keyboard-row button { flex: 1 1 0; height: var(--ww-keyboard-key-height); padding: 0 2px; font-size: 21px !important; }
.ww-keyboard-home-row { padding: 0 4%; }
.ww-keyboard-number-row button { height: 32px; font-size: 17px !important; color: #3e5772 !important; background: #f8fbff !important; }
.ww-keyboard-row .ww-keyboard-special, #ww-keyboard-panel .ww-keyboard-special { flex-grow: 1.45; background: #d4e2f2; }
.ww-keyboard-row .ww-keyboard-special.active { background: #a9cfff; }
.ww-keyboard-row .ww-keyboard-space { flex-grow: 5.5; font-size: 13px !important; letter-spacing: .2px; }
.ww-keyboard-row .ww-keyboard-enter { flex-grow: 1.65; color: #fff; border-color: #2c6bb5; background: #2e70bd; font-size: 25px !important; }
.ww-keyboard-row .ww-keyboard-punctuation { flex-grow: .75; }
.ww-keyboard-row .ww-keyboard-enter:active { background: #205d9e !important; }
.ww-keyboard-bottom-row { margin-top: 6px; }
.ww-keyboard-numpad { display: grid; grid-template-columns: repeat(3, minmax(0, 1.4fr)) repeat(2, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.ww-keyboard-numpad button { height: 36px; font-size: 21px !important; }
.ww-keyboard-numpad button:nth-child(5n + 4), .ww-keyboard-numpad button:nth-child(5n) { background: #dce8f5 !important; }
.ww-keyboard-symbol-tools button { height: 30px; font-size: 16px !important; background: #f6f9fd !important; }
.ww-keyboard-emoji-categories { display: flex; gap: 3px; margin: 5px 0; }
.ww-keyboard-emoji-categories button { flex: 1; min-height: 29px; padding: 2px 3px; font-size: 12px !important; white-space: nowrap; }
.ww-keyboard-emoji-grid { display: grid; grid-template-columns: repeat(10, minmax(0, 1fr)); gap: 4px; min-height: 124px; align-content: start; }
.ww-keyboard-emoji-grid button { min-height: 38px; padding: 2px; border-color: transparent !important; background: #f7faff !important; font: 25px/1.2 "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif !important; }
.ww-keyboard-function-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.ww-keyboard-function-grid button { min-height: 36px; padding: 3px; font-size: 15px !important; }
.ww-keyboard-shortcuts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 5px; margin-top: 5px; }
.ww-keyboard-shortcuts button { min-height: 32px; padding: 3px; color: #155cac !important; background: #d8e8fb !important; font-size: 13px !important; }
.ww-keyboard-function-hint { color: #60768d; padding: 4px 3px 0; font-size: 10px; line-height: 1.3; }
.ww-keyboard-candidate-row { display: flex; align-items: center; gap: 5px; overflow-x: auto; overscroll-behavior-x: contain; min-height: 34px; padding: 1px 1px 4px; scrollbar-width: thin; touch-action: none; }
.ww-keyboard-composition { color: #526982; font-size: 14px; padding: 2px 4px; white-space: nowrap; }
.ww-keyboard-composition-caret { display: inline-block; height: 1em; margin: 0 1px; border-left: 1px solid #1f65ba; vertical-align: -2px; }
.ww-keyboard-candidate { flex-shrink: 0; white-space: nowrap; min-height: 31px; padding: 3px 9px; }
#ww-keyboard-panel .ww-keyboard-candidate.selected, #ww-keyboard-candidates .ww-keyboard-candidate.selected { color: #fff; border-color: #1f65ba; background: #1f65ba; }
#ww-keyboard-candidates { display: flex; align-items: center; flex-wrap: wrap; gap: 4px; max-width: min(700px, calc(100vw - 12px)); padding: 6px; }
@media (max-width: 600px) {
  #ww-keyboard-panel { --ww-keyboard-key-height: 42px; width: 100%; border-radius: 13px 13px 0 0; border-width: 1px 0 0; bottom: 0; padding: 6px 4px max(7px, env(safe-area-inset-bottom)); }
  .ww-keyboard-toolbar { gap: 4px; }
  .ww-keyboard-toolbar strong { font-size: 11px; }
  .ww-keyboard-toolbar button { padding: 3px 6px; min-height: 29px; font-size: 11px !important; }
  .ww-keyboard-row { gap: 3px; margin-top: 4px; }
  .ww-keyboard-row button { font-size: 19px !important; border-radius: 6px !important; }
  .ww-keyboard-row .ww-keyboard-space { font-size: 12px !important; }
  .ww-keyboard-number-row button { height: 30px; font-size: 16px !important; }
  .ww-keyboard-modes { gap: 3px; padding-bottom: 4px; }
  .ww-keyboard-modes button { min-height: 27px; }
  .ww-keyboard-numpad, .ww-keyboard-function-grid { gap: 4px; margin-top: 4px; }
  .ww-keyboard-emoji-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); min-height: 126px; gap: 3px; }
  .ww-keyboard-emoji-grid button { min-height: 36px; font-size: 24px !important; }
  .ww-keyboard-emoji-categories button { font-size: 10px !important; }
  .ww-keyboard-candidate { min-height: 32px; padding: 3px 8px; }
}
@media (max-width: 370px) {
  .ww-keyboard-toolbar strong { font-size: 10px; }
  .ww-keyboard-toolbar button { padding-inline: 4px; font-size: 10px !important; }
  .ww-keyboard-toolbar .ww-keyboard-hide { min-width: 26px; }
}
@media (max-height: 520px) {
  #ww-keyboard-panel {
    --ww-keyboard-key-height: 30px; display: flex; flex-direction: column; bottom: 0;
    max-height: 70dvh; padding-top: 4px; padding-bottom: max(5px, env(safe-area-inset-bottom)); overflow: hidden;
  }
  .ww-keyboard-toolbar, .ww-keyboard-privacy, .ww-keyboard-notice, .ww-keyboard-candidate-row, .ww-keyboard-modes { flex-shrink: 0; }
  .ww-keyboard-keys { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; scrollbar-width: thin; }
  .ww-keyboard-toolbar { min-height: 24px; margin-bottom: 1px; }
  .ww-keyboard-toolbar button { min-height: 24px; padding-block: 2px; }
  .ww-keyboard-privacy { line-height: 1.1; margin-top: 1px; margin-bottom: 2px; }
  .ww-keyboard-modes { padding-top: 2px; padding-bottom: 3px; }
  .ww-keyboard-modes button { min-height: 24px; }
  .ww-keyboard-row { gap: 3px; margin-top: 3px; }
  .ww-keyboard-bottom-row { margin-top: 4px; }
  .ww-keyboard-number-row button { height: 24px; font-size: 15px !important; }
  .ww-keyboard-candidate-row { box-sizing: border-box; min-height: 28px; padding: 0 1px 2px; scrollbar-width: none; }
  .ww-keyboard-candidate-row::-webkit-scrollbar { display: none; }
  .ww-keyboard-candidate { min-height: 25px; padding: 2px 6px; }
  .ww-keyboard-numpad button { height: 27px; }
  .ww-keyboard-function-grid button { min-height: 29px; }
  .ww-keyboard-shortcuts button { min-height: 27px; }
  .ww-keyboard-emoji-grid { min-height: 102px; }
  .ww-keyboard-emoji-grid button { min-height: 28px; font-size: 22px !important; }
  .ww-keyboard-emoji-categories { margin: 3px 0; }
  .ww-keyboard-emoji-categories button { min-height: 25px; }
}

/* Recognized tablets get a wide, docked touch layout. Phone and desktop
   layouts continue to use the rules above. */
html.ww-keyboard-tablet-device #ww-keyboard-panel {
  --ww-keyboard-key-height: 52px;
  --ww-keyboard-key-height: clamp(42px, 6.25dvh, 60px);
  display: flex; flex-direction: column; left: 0; right: 0; bottom: 0; transform: none;
  width: auto; max-width: none; margin: 0; max-height: min(68dvh, calc(100dvh - 8px));
  padding: 8px clamp(10px, 1.4vw, 20px) max(8px, env(safe-area-inset-bottom));
  border-width: 1px 0 0; border-radius: 15px 15px 0 0; overflow: hidden;
}
html.ww-keyboard-tablet-device .ww-keyboard-toolbar,
html.ww-keyboard-tablet-device .ww-keyboard-privacy,
html.ww-keyboard-tablet-device .ww-keyboard-notice,
html.ww-keyboard-tablet-device .ww-keyboard-candidate-row,
html.ww-keyboard-tablet-device .ww-keyboard-modes,
html.ww-keyboard-tablet-device .ww-keyboard-keys {
  box-sizing: border-box; width: 100%; max-width: none; margin-inline: 0;
}
html.ww-keyboard-tablet-device .ww-keyboard-toolbar,
html.ww-keyboard-tablet-device .ww-keyboard-privacy,
html.ww-keyboard-tablet-device .ww-keyboard-notice,
html.ww-keyboard-tablet-device .ww-keyboard-candidate-row,
html.ww-keyboard-tablet-device .ww-keyboard-modes { flex: 0 0 auto; }
html.ww-keyboard-tablet-device .ww-keyboard-toolbar { min-height: 44px; gap: 8px; margin-bottom: 3px; }
html.ww-keyboard-tablet-device .ww-keyboard-toolbar strong { font-size: 15px; }
html.ww-keyboard-tablet-device .ww-keyboard-toolbar button { min-height: 42px; padding: 5px 12px; font-size: 14px !important; }
html.ww-keyboard-tablet-device .ww-keyboard-toolbar .ww-keyboard-hide { min-width: 42px; font-size: 23px !important; }
html.ww-keyboard-tablet-device .ww-keyboard-privacy { margin: 1px 3px 4px; font-size: 11px; }
html.ww-keyboard-tablet-device .ww-keyboard-modes { gap: 6px; padding: 3px 0 6px; }
html.ww-keyboard-tablet-device .ww-keyboard-modes button { min-height: 40px; padding: 3px 10px; font-size: 16px !important; }
html.ww-keyboard-tablet-device .ww-keyboard-row { gap: clamp(4px, .5vw, 8px); margin-top: 5px; }
html.ww-keyboard-tablet-device .ww-keyboard-row button { height: var(--ww-keyboard-key-height); border-radius: 9px; font-size: clamp(20px, 1.8vw, 26px) !important; }
html.ww-keyboard-tablet-device .ww-keyboard-number-row button { height: clamp(36px, 5.05dvh, 44px); font-size: clamp(17px, 1.45vw, 21px) !important; }
html.ww-keyboard-tablet-device .ww-keyboard-candidate-row { min-height: 42px; gap: 6px; }
html.ww-keyboard-tablet-device .ww-keyboard-candidate { min-height: 40px; padding: 5px 13px; font-size: 15px; }
html.ww-keyboard-tablet-device .ww-keyboard-keys { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior-y: contain; }
html.ww-keyboard-tablet-device .ww-keyboard-numpad,
html.ww-keyboard-tablet-device .ww-keyboard-function-grid,
html.ww-keyboard-tablet-device .ww-keyboard-shortcuts { gap: 6px; margin-top: 5px; }
html.ww-keyboard-tablet-device .ww-keyboard-numpad button,
html.ww-keyboard-tablet-device .ww-keyboard-function-grid button,
html.ww-keyboard-tablet-device .ww-keyboard-shortcuts button { min-height: clamp(38px, 5.4dvh, 48px); font-size: clamp(16px, 1.35vw, 19px) !important; }
html.ww-keyboard-tablet-device .ww-keyboard-symbol-tools button { height: clamp(38px, 5.4dvh, 48px); font-size: clamp(17px, 1.45vw, 20px) !important; }
html.ww-keyboard-tablet-device .ww-keyboard-emoji-categories button { min-height: clamp(36px, 4.8dvh, 42px); font-size: clamp(12px, 1vw, 14px) !important; }
html.ww-keyboard-tablet-device .ww-keyboard-emoji-grid { min-height: 132px; gap: 5px; }
html.ww-keyboard-tablet-device .ww-keyboard-emoji-grid button { min-height: clamp(40px, 5.3dvh, 48px); font-size: clamp(24px, 2vw, 30px) !important; }
@media (orientation: landscape) and (max-height: 850px) {
  html.ww-keyboard-tablet-device #ww-keyboard-panel {
    --ww-keyboard-key-height: clamp(36px, 5.3dvh, 42px);
    max-height: min(72dvh, calc(100dvh - 4px));
    padding-top: 4px;
    padding-bottom: max(4px, env(safe-area-inset-bottom));
  }
  html.ww-keyboard-tablet-device .ww-keyboard-toolbar { min-height: 34px; gap: 6px; margin-bottom: 1px; }
  html.ww-keyboard-tablet-device .ww-keyboard-toolbar strong { font-size: 13px; }
  html.ww-keyboard-tablet-device .ww-keyboard-toolbar button { min-height: 32px; padding: 3px 8px; font-size: 13px !important; }
  html.ww-keyboard-tablet-device .ww-keyboard-toolbar .ww-keyboard-hide { min-width: 34px; font-size: 20px !important; }
  html.ww-keyboard-tablet-device .ww-keyboard-privacy { margin: 0 3px 2px; font-size: 10px; line-height: 1.1; }
  html.ww-keyboard-tablet-device .ww-keyboard-notice { padding: 3px 7px; margin: 2px 0 3px; font-size: 11px; }
  html.ww-keyboard-tablet-device .ww-keyboard-modes { gap: 4px; padding: 1px 0 3px; }
  html.ww-keyboard-tablet-device .ww-keyboard-modes button { min-height: 30px; padding: 2px 7px; font-size: 14px !important; }
  html.ww-keyboard-tablet-device .ww-keyboard-row { gap: clamp(3px, .4vw, 6px); margin-top: 3px; }
  html.ww-keyboard-tablet-device .ww-keyboard-row button { border-radius: 7px; font-size: clamp(19px, 1.6vw, 23px) !important; }
  html.ww-keyboard-tablet-device .ww-keyboard-number-row button { height: clamp(29px, 4.35dvh, 34px); font-size: clamp(16px, 1.3vw, 19px) !important; }
  html.ww-keyboard-tablet-device .ww-keyboard-candidate-row { min-height: 32px; gap: 4px; }
  html.ww-keyboard-tablet-device .ww-keyboard-candidate { min-height: 30px; padding: 3px 9px; font-size: 14px; }
  html.ww-keyboard-tablet-device .ww-keyboard-bottom-row { margin-top: 4px; }
  html.ww-keyboard-tablet-device .ww-keyboard-numpad,
  html.ww-keyboard-tablet-device .ww-keyboard-function-grid,
  html.ww-keyboard-tablet-device .ww-keyboard-shortcuts { gap: 4px; margin-top: 4px; }
  html.ww-keyboard-tablet-device .ww-keyboard-numpad button,
  html.ww-keyboard-tablet-device .ww-keyboard-function-grid button,
  html.ww-keyboard-tablet-device .ww-keyboard-shortcuts button { min-height: 34px; }
  html.ww-keyboard-tablet-device .ww-keyboard-symbol-tools button { height: 34px; }
  html.ww-keyboard-tablet-device .ww-keyboard-emoji-grid { min-height: 96px; gap: 4px; }
  html.ww-keyboard-tablet-device .ww-keyboard-emoji-grid button { min-height: 34px; font-size: 23px !important; }
}