/* Virtual keyboard - scoped under .vkb. Uses core variables with fallbacks. */
.vkb{--kh:clamp(36px,5.5vw,56px);--gap:clamp(2px,.8vw,6px);--rows:5;max-width:960px;margin:0 auto;color:var(--text,#e8eaed)}
.vkb *,.vkb *::before,.vkb *::after{box-sizing:border-box}
.vkb [hidden]{display:none!important}
.vkb-toolbar{display:flex;flex-wrap:wrap;gap:6px;align-items:center;margin-bottom:8px}
.vkb-btn,.vkb-lang select,.vkb-opt select{min-height:36px;padding:4px 12px;border:1px solid var(--border,#2d333d);border-radius:8px;background:var(--surface-2,#222733);color:var(--text,#e8eaed);font:inherit;font-size:.9rem;cursor:pointer}
.vkb-btn:hover,.vkb-lang select:hover{border-color:var(--accent,#4da3ff)}
.vkb-btn[aria-pressed=true]{border-color:var(--accent,#4da3ff);background:var(--accent-strong,#2b7fd6);color:#fff}
.vkb-btn--danger:hover{border-color:var(--danger,#e5484d);color:var(--danger,#e5484d)}
.vkb button:focus-visible,.vkb select:focus-visible,.vkb textarea:focus-visible,.vkb input:focus-visible{outline:2px solid var(--accent,#4da3ff);outline-offset:2px}
.vkb-group{display:inline-flex;gap:4px}
.vkb-count{margin-inline-start:auto;font-size:.85rem;color:var(--muted,#9aa3b2)}
.vkb-ind{padding:2px 9px;border:1px solid var(--border,#2d333d);border-radius:999px;font-size:.75rem;color:var(--muted,#9aa3b2)}
.vkb-ind.on{background:var(--accent,#4da3ff);border-color:var(--accent,#4da3ff);color:#fff}
.vkb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.vkb-text{display:block;width:100%;min-height:calc(6 * 1.5em + 26px);padding:12px;border:1px solid var(--border,#2d333d);border-radius:10px;background:var(--surface,#1a1e27);color:var(--text,#e8eaed);font-size:22px;line-height:1.5;resize:vertical}
.vkb-opts{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;margin:8px 0;font-size:.9rem}
.vkb-opt{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.vkb-opt input{width:18px;height:18px;accent-color:var(--accent,#4da3ff)}
.vkb-note{margin:0;font-size:.8rem;color:var(--muted,#9aa3b2)}
.is-coarse .vkb-opt-phys{display:none}
html:not(.is-coarse) .vkb-opt-phone{display:none}
/* keyboard: height reserved before JS renders (rows * key height) */
.vkb-board{position:relative;container-type:inline-size;direction:ltr;min-height:calc(var(--rows) * (var(--kh) + var(--gap)));padding:var(--gap);border:1px solid var(--border,#2d333d);border-radius:12px;background:var(--surface,#1a1e27);user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.vkb-row{display:flex;gap:var(--gap);margin-bottom:var(--gap)}
.vkb-row:last-child{margin-bottom:0}
.vkb-bottom{justify-content:center}
.vkb-key{position:relative;flex:var(--w,1) 1 0;min-width:0;height:var(--kh);display:flex;align-items:center;justify-content:center;padding:0;border:1px solid var(--border,#2d333d);border-bottom-width:2px;border-radius:7px;background:var(--surface-2,#222733);color:var(--text,#e8eaed);font-family:inherit;font-size:clamp(14px,4vw,24px);font-size:clamp(14px,3.6cqw,26px);line-height:1;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;transition:background-color .08s,transform .08s}
.vkb-key .m{unicode-bidi:isolate;pointer-events:none}
.vkb-key .s{position:absolute;top:2px;right:4px;font-size:.5em;color:var(--muted,#9aa3b2);unicode-bidi:isolate;pointer-events:none}
.vkb-key:hover{border-color:var(--accent,#4da3ff)}
.vkb-key.active,.vkb-key:active{background:var(--accent,#4da3ff);border-color:var(--accent-strong,#2b7fd6);color:#fff;transform:translateY(1px)}
.vkb-key.active .s,.vkb-key:active .s{color:#fff}
.vkb-sp{font-size:clamp(10px,2.6cqw,16px);color:var(--muted,#9aa3b2)}
.vkb-sp.on{background:var(--accent-strong,#2b7fd6);border-color:var(--accent-strong,#2b7fd6);color:#fff}
.vkb-sp.lock{box-shadow:inset 0 -3px 0 #fff}
.vkb-kgrid{display:grid;grid-auto-flow:column;grid-template-rows:repeat(5,var(--kh));grid-auto-columns:1fr;gap:var(--gap)}
.vkb-kgrid .vkb-key{flex:none;width:auto}
.vkb-gap{visibility:hidden;border:0}
.vkb-toast{display:flex;align-items:center;gap:12px;margin-top:8px;padding:8px 12px;border:1px solid var(--border,#2d333d);border-radius:8px;background:var(--surface-2,#222733);font-size:.9rem}
@media (max-width:480px){.vkb-btn{padding:4px 9px}.vkb-text{font-size:20px}}
@media (prefers-reduced-motion:reduce){.vkb-key{transition:none}.vkb-key.active,.vkb-key:active{transform:none}}

.vkb-ta{position:relative}
.vkb-dead{position:absolute;right:10px;bottom:8px;padding:2px 10px;border-radius:999px;background:var(--accent,#4da3ff);color:#fff;font-size:.8rem;pointer-events:none}
.vkb-key.pend{background:var(--accent,#4da3ff);border-color:var(--accent-strong,#2b7fd6);color:#fff;box-shadow:inset 0 -3px 0 #fff}
.vkb-key:disabled,.vkb-key.vkb-empty{opacity:.35;cursor:default;pointer-events:none}
.vkb-seg{display:inline-flex;align-items:center}
.vkb-seglbl{margin-inline-end:6px;font-size:.85rem;color:var(--muted,#9aa3b2)}
.vkb-seg .vkb-btn{border-radius:0}
.vkb-seg .vkb-btn:nth-of-type(1){border-radius:8px 0 0 8px}
.vkb-seg .vkb-btn:last-child{border-radius:0 8px 8px 0;margin-inline-start:-1px}
/* compact phone layout (.cmp): keys sized from --cn (max row width in key units) */
.vkb-board.cmp{--kh:44px;--kw:calc((100% - (var(--cn,11) - 1) * var(--gap)) / var(--cn,11))}
.cmp .vkb-c{justify-content:center}
.cmp .vkb-c .vkb-key{flex:0 0 var(--kw);font-size:clamp(15px,5.2cqw,22px)}
.cmp .vkb-c .vkb-sp{flex:var(--w) 1 0;min-width:calc(var(--kw) * 1.2);max-width:calc(var(--kw) * 2.6);font-size:14px}
.cmp .vkb-bottom .vkb-sp{max-width:none}
.cmp .vkb-bottom .vkb-sp[data-sp=space]{flex-grow:5;color:var(--text,#e8eaed)}
.cmp .s{display:none}
.cmp .vkb-ex{flex-wrap:nowrap;overflow-x:auto;gap:var(--gap);padding-bottom:2px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.cmp .vkb-ex::-webkit-scrollbar{display:none}
.cmp .vkb-ex .vkb-key{flex:0 0 40px;font-size:20px;touch-action:pan-x}
/* ---- toolbar structure (desktop: wrappers are transparent) ---- */
.vkb-actions,.vkb-menu{display:contents}
.vkb-ic,.vkb-more,.vkb-vib{display:none}
.vkb-btn{touch-action:manipulation;-webkit-tap-highlight-color:transparent}
.vkb-btn:active{border-color:var(--accent,#4da3ff);background:var(--surface,#1a1e27)}
.vkb-btn svg{flex:none}
/* key preview bubble + long-press alternates */
.vkb-pop,.vkb-alts{position:absolute;z-index:30;pointer-events:none;transform:translate(-50%,calc(-100% - 8px));background:var(--surface-2,#222733);border:1px solid var(--accent,#4da3ff);border-radius:12px;box-shadow:0 6px 18px rgba(0,0,0,.4);color:var(--text,#e8eaed)}
.vkb-pop{min-width:52px;padding:6px 10px;text-align:center;font-size:2rem;line-height:1.25;white-space:nowrap}
.vkb-alts{display:flex;gap:4px;padding:4px;pointer-events:auto}
.vkb-alt{min-width:44px;height:52px;padding:0 8px;border:0;border-radius:8px;background:transparent;color:inherit;font:inherit;font-size:1.5rem;line-height:1;cursor:pointer;touch-action:none;-webkit-tap-highlight-color:transparent;unicode-bidi:isolate}
.vkb-alt.on,.vkb-alt:active{background:var(--accent,#4da3ff);color:#fff}
.vkb-key{-webkit-user-select:none;user-select:none}

/* ---- touch devices ---- */
.is-coarse .vkb{--kh:clamp(42px,5.5vw,56px);--gap:clamp(4px,.8vw,6px)}
.is-coarse .vkb-btn,.is-coarse .vkb-lang select,.is-coarse .vkb-opt select{min-height:44px;font-size:16px}
.is-coarse .vkb-opt{min-height:44px}
.is-coarse .vkb-opt input{width:22px;height:22px}
.is-coarse .vkb-key{border-radius:8px}
.vkb.docked .vkb-board{position:sticky;bottom:0;z-index:20;padding-bottom:calc(var(--gap) + env(safe-area-inset-bottom,0px));box-shadow:0 -8px 18px rgba(0,0,0,.28)}
.is-coarse .vkb-text{min-height:calc(4 * 1.5em + 26px)}
@media (max-width:640px){
  .vkb{--kh:42px;--gap:4px;display:flex;flex-direction:column;gap:8px}
  .vkb-toolbar{display:contents}
  .vkb-lang{order:0;display:block;width:100%}
  .vkb-lang select{width:100%;min-height:44px;font-size:16px}
  .vkb-actions{display:flex;order:1;gap:8px;position:relative}
  .vkb-actions>.vkb-btn{flex:1 1 0;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:44px;font-size:16px}
  .vkb-ic,.vkb-more{display:inline-flex}
  .vkb-more{flex:0 0 auto!important;min-width:56px}
  .vkb-more .vkb-lbl{display:none}
  .vkb-menu{display:none;position:absolute;right:0;top:calc(100% + 6px);z-index:40;min-width:220px;flex-direction:column;gap:4px;padding:6px;background:var(--surface,#1a1e27);border:1px solid var(--border,#2d333d);border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.4)}
  .vkb-menu.open{display:flex}
  .vkb-menu .vkb-btn{min-height:44px;font-size:16px;justify-content:flex-start;text-align:left}
  .vkb-menu .vkb-group{display:flex;gap:4px}
  .vkb-menu .vkb-group .vkb-btn{flex:1;justify-content:center}
  .vkb-vib{display:flex}
  .vkb-ind{display:none}
  .vkb-ta{order:2}
  .vkb-text{height:calc(4 * 1.5em + 26px);min-height:calc(4 * 1.5em + 26px);font-size:20px}
  .vkb-count{order:3;margin:-4px 2px 0;font-size:.78rem}
  .vkb-toast{order:4;margin:0}
  .vkb-opts{order:5;margin:0}
  .vkb-board{order:6;margin-inline:calc(-1 * var(--pad,20px));border-radius:12px 12px 0 0;border-inline-width:0;padding-inline:var(--gap)}
}
@media (prefers-reduced-motion:reduce){.vkb-pop,.vkb-alts{transition:none}}