/* mxkb-20261010: Matrix on-screen keyboard (beta testers; styles only elements mxkb.js adds). */
.mxkb { position: fixed; left: 0; right: 0; bottom: 0; z-index: 1210; background: #020602;
  border-top: 1px solid rgba(57,255,20,.45); box-shadow: 0 -8px 24px rgba(57,255,20,.12);
  padding: 8px calc(3px + env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) calc(3px + env(safe-area-inset-left, 0px));
  font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; touch-action: none; transition: none !important; }
.mxkb[hidden] { display: none; }
.mxkb__row { display: flex; gap: 5px; justify-content: center; margin-bottom: 9px; }
.mxkb__row:last-child { margin-bottom: 0; }
.mxkb__row--inset { padding: 0 4.5%; }
.mxkb__key { flex: 1 1 0; max-width: 44px; height: 44px; min-width: 0; padding: 0; border-radius: 7px; border: 1px solid rgba(57,255,20,.55);
  background: #060d06; color: #b6ffb0; font: 600 17px/1 "JetBrains Mono", ui-monospace, monospace; cursor: pointer;
  box-shadow: inset 0 0 8px rgba(57,255,20,.08), 0 0 6px rgba(57,255,20,.12); text-shadow: 0 0 6px rgba(57,255,20,.5);
  -webkit-tap-highlight-color: transparent; position: relative; touch-action: none; }
.mxkb__key--shift, .mxkb__key--bksp, .mxkb__key--123, .mxkb__key--sym, .mxkb__key--abc, .mxkb__key--emoji { flex: 1.4 1 0; max-width: 58px; font-size: 13px; }
.mxkb__key--space { flex: 5 1 0; max-width: none; font-size: 12px; color: #6fae6f; }
.mxkb__key--return { flex: 2.4 1 0; max-width: 96px; font-size: 13px; }
.mxkb__key.is-on { background: #39ff14; color: #041004; text-shadow: none; box-shadow: 0 0 16px rgba(57,255,20,.8); }
.mxkb__key.is-press { /* phase1: enlarged copy now shows in .mxkb-pop */ background: #0c2a0c; border-color: #b2ff59; color: #eaffd8;
  box-shadow: 0 0 18px rgba(57,255,20,.9); z-index: 2; }
.mxkb__key:focus-visible { outline: 2px solid #b2ff59; outline-offset: 1px; }
@media (prefers-reduced-motion: reduce) { .mxkb__key.is-press { transform: none; } }
.rr-tb-kb { font-size: .75rem; }
/* DM thread: shrink the chat screen by the keyboard's height so the composer sits on top of it. */
body[data-dm-page].dm-thread-open.mxkb-open { height: calc(var(--dm-vh, 100dvh) - var(--mxkb-h, 0px)) !important; }
/* Settings */
.mxkb-settings { border: 1px solid rgba(102,187,106,.45); border-radius: 12px; padding: .7rem .8rem .8rem; }
.mxkb-settings legend { font-weight: 700; padding: 0 .3rem; }
.mxkb-settings .mxkb-opt { display: flex !important; flex-direction: row !important; gap: .6rem; align-items: flex-start; padding: .5rem 0; cursor: pointer; }
.mxkb-settings .mxkb-opt input { margin-top: .25rem; accent-color: #39ff14; width: 18px; height: 18px; flex: 0 0 auto; }
.mxkb-opt strong { display: block; }

/* kbpill-20261010 (Rich, 2:15 AM): labeled keyboard pill at far left; counter only near the limit */
.rr-typebar .rr-tb-kb{flex:0 0 auto;width:auto!important;min-width:0;padding:0 .6rem;height:34px;border-radius:999px;
  font:700 .68rem/1 "JetBrains Mono",ui-monospace,monospace;letter-spacing:.05em;white-space:nowrap;
  background:transparent;color:#39ff14;border:1.5px solid #39ff14;box-shadow:none;text-shadow:none}
.rr-typebar .rr-tb-kb.is-on{background:#39ff14;color:#041004;box-shadow:0 0 12px rgba(57,255,20,.7)}
.rr-typebar .rr-typebar__count[hidden]{display:none!important}
.rr-typebar .rr-typebar__count{color:#ffd54f;font-size:.62rem}
.rr-typebar > :last-child{margin-left:auto}
@media (max-width:420px){
  .rr-typebar .rr-typebar__prompt{display:none}
  .rr-typebar{gap:.25rem;padding:.4rem .35rem}
  .rr-typebar .rr-tb:not(.rr-tb-kb){width:34px;min-width:34px;height:34px;font-size:.9rem;padding:0}
  /* counter visible (near limit): tighten icons so SEND still fits */
  .rr-typebar:has(.rr-typebar__count:not([hidden])) .rr-tb:not(.rr-tb-kb){width:30px;min-width:30px}
}
/* kbhide-20261010: hide-keyboard key (down chevron) */
.mxkb__key--hide { flex: 1.2 1 0; max-width: 50px; font-size: 22px; line-height: .6; }

/* phase1-20261010: key popup above the finger, Caps Lock state */
.mxkb-pop { position: fixed; z-index: 1215; height: 56px; border-radius: 10px; pointer-events: none; display: flex; align-items: center; justify-content: center;
  background: #0c2a0c; border: 1.5px solid #b2ff59; color: #eaffd8; font: 700 30px/1 "JetBrains Mono", ui-monospace, monospace;
  text-shadow: 0 0 10px rgba(57,255,20,.9); box-shadow: 0 0 20px rgba(57,255,20,.7); }
.mxkb-pop[hidden] { display: none; }
.mxkb__key.is-lock { outline: 2px solid #eaffd8; outline-offset: -4px; }
.mxkb-opt--fx { border-top: 1px dashed rgba(102,187,106,.35); margin-top: .4rem; }

/* phase2: long-press accent row. Popup stays hidden while this is open. */
.mxkb-accents { position: fixed; z-index: 1216; display: flex; gap: 4px; padding: 4px; max-width: calc(100vw - 4px);
  background: #020602; border: 1px solid rgba(57,255,20,.7); border-radius: 10px;
  box-shadow: 0 0 18px rgba(57,255,20,.45); touch-action: none; }
.mxkb-accents[hidden] { display: none; }
.mxkb-accents__opt { width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border-radius: 7px;
  border: 1px solid rgba(57,255,20,.55); background: #060d06; color: #eaffd8;
  font: 700 18px/1 "JetBrains Mono", ui-monospace, monospace; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mxkb-accents__opt.is-hot, .mxkb__key.is-accent-hot { background: #39ff14; color: #041004; text-shadow: none;
  box-shadow: 0 0 16px rgba(57,255,20,.8); }
@media (prefers-reduced-motion: reduce) {
  .mxkb-accents, .mxkb-accents__opt, .mxkb__emoji-viewport { scroll-behavior: auto; transition: none; }
}

/* phase2: emoji panel replaces the key rows and keeps the keyboard's height. */
.mxkb.mxkb--emoji { height: var(--mxkb-keys-h, auto); display: flex; flex-direction: column; }
.mxkb__emoji { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; gap: 4px; }
.mxkb__emoji-tabs { display: flex; gap: 4px; overflow-x: auto; flex: 0 0 auto; padding-bottom: 2px;
  scrollbar-width: none; }
.mxkb__emoji-tab { flex: 0 0 auto; height: 28px; padding: 0 8px; border-radius: 999px;
  border: 1px solid rgba(57,255,20,.45); background: transparent; color: #b6ffb0;
  font: 600 11px/1 "JetBrains Mono", ui-monospace, monospace; cursor: pointer; }
.mxkb__emoji-tab.is-on { background: #39ff14; color: #041004; }
.mxkb__emoji-viewport { flex: 1 1 auto; min-height: 0; display: flex; overflow-x: auto; overflow-y: hidden;
  scroll-snap-type: x mandatory; touch-action: pan-x; }
.mxkb__emoji-page { flex: 0 0 100%; width: 100%; height: 100%; scroll-snap-align: start; overflow-y: auto;
  display: flex; flex-wrap: wrap; align-content: flex-start; justify-content: center; gap: 2px; }
.mxkb__emoji-cell { width: 40px; height: 40px; flex: 0 0 auto; padding: 0; border: 0; border-radius: 6px;
  background: transparent; color: inherit; font-size: 22px; line-height: 40px; cursor: pointer;
  -webkit-tap-highlight-color: transparent; }
.mxkb__emoji-cell:active, .mxkb__emoji-cell.is-hot { background: #0c2a0c; }
.mxkb__emoji-empty { margin: 8px; color: #6fae6f; font: 600 12px/1.4 "JetBrains Mono", ui-monospace, monospace; }
.mxkb__emoji-bar { flex: 0 0 auto; margin-bottom: 0; }
.mxkb__emoji-spacer { flex: 1 1 auto; display: flex; align-items: center; justify-content: center;
  color: #6fae6f; font: 600 12px/1 "JetBrains Mono", ui-monospace, monospace; letter-spacing: .04em; }

/* phase2: landscape phones. Does not apply to the Duo crease-split keyboard (.mxkb__half). */
@media (max-height: 499px) and (pointer: coarse) {
  .mxkb:not(:has(.mxkb__half)) {
    max-height: 45vh;
    max-height: 45dvh;
    overflow: hidden;
    padding-top: 4px;
    padding-bottom: calc(4px + env(safe-area-inset-bottom, 0px));
  }
  .mxkb:not(:has(.mxkb__half)) .mxkb__row { gap: 4px; margin-bottom: 4px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__key { height: 36px; font-size: 15px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__emoji-cell { width: 36px; height: 36px; font-size: 20px; line-height: 36px; }
}

/* phase2: tablets / iPad. Short landscape phones (height < 500) stay on the phone rules above. */
@media (min-width: 768px) and (min-height: 500px) and (pointer: coarse) {
  .mxkb:not(:has(.mxkb__half)) {
    width: min(900px, calc(100% - 16px));
    left: 0;
    right: 0;
    margin-left: auto;
    margin-right: auto;
    padding-left: 12px;
    padding-right: 12px;
  }
  .mxkb:not(:has(.mxkb__half)) .mxkb__key { max-width: 64px; height: 48px; font-size: 20px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--shift,
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--bksp,
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--123,
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--sym,
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--abc,
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--emoji { max-width: 84px; font-size: 16px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--return { max-width: 120px; font-size: 16px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__key--hide { max-width: 64px; font-size: 22px; }
  .mxkb:not(:has(.mxkb__half)) .mxkb__row--nums .mxkb__key { font-size: 16px; }
}
/* On-device suggestions. Fixed height so the keyboard does not jump while typing. */
.mxkb__suggest { display: flex; gap: 6px; height: 40px; margin: 0 2px 8px; }
.mxkb__suggest[hidden] { display: none; }
.mxkb__sug { flex: 1 1 0; min-width: 0; height: 40px; padding: 0 .4rem; border-radius: 8px;
  border: 1px solid rgba(57,255,20,.4); background: #071207; color: #b6ffb0;
  font: 600 14px/1 "JetBrains Mono", ui-monospace, monospace; cursor: pointer;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
.mxkb__sug:disabled { opacity: .35; cursor: default; }
.mxkb__sug--pick { background: #39ff14; color: #041004; border-color: #39ff14; font-weight: 800;
  box-shadow: 0 0 12px rgba(57,255,20,.45); }
.mxkb__sug--pick:disabled { background: #0c2a0c; color: #6fae6f; box-shadow: none; }
.mxkb-ac-ul { position: fixed; z-index: 1212; height: 2px; margin: 0; pointer-events: none;
  background: #39ff14; box-shadow: 0 0 6px #39ff14; }
[data-mxkb-ac-rows] { border-top: 1px dashed rgba(102,187,106,.35); margin-top: .35rem; padding-top: .2rem; }
[data-mxkb-clear-learned] { margin: .2rem 0 .6rem; }