/* ===========================================================================
   CEATL on-screen keyboard — 80% (TKL) layout.
   Themed to the card-catalog UI (maroon on warm paper, serif). Uses the app's
   CSS variables when present, with fallbacks.
   =========================================================================== */
.osk{
  position:fixed; left:0; right:0; bottom:0; z-index:1000;
  background:var(--paper, #f3ece0);
  border-top:2px solid var(--maroon, #7a1f2b);
  box-shadow:0 -6px 20px rgba(27,36,48,.18);
  padding:.4rem .6rem calc(.5rem + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .18s ease-out;
  font-family:var(--serif, Georgia, "Times New Roman", serif);
  user-select:none; -webkit-user-select:none; touch-action:manipulation;
}
.osk.osk-open{ transform:translateY(0); }

.osk-bar{ display:flex; align-items:center; justify-content:space-between; padding:.05rem .3rem .35rem; }
.osk-hint{ font-size:.78rem; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft, #6b5d4f); }
.osk-close{ font-family:inherit; font-size:.85rem; color:var(--maroon, #7a1f2b);
  background:transparent; border:1px solid var(--rule, #cbb9a3); border-radius:2px; padding:.2rem .7rem; cursor:pointer; }

/* two panels: alphanumeric block + nav/arrow cluster */
.osk-tkl{ display:flex; gap:.6rem; align-items:stretch; max-width:1500px; margin:0 auto; }
.osk-main{ flex:1 1 auto; display:flex; flex-direction:column; gap:.32rem; }
.osk-row{ display:flex; gap:.32rem; }
.osk-nav{ flex:0 0 auto; width:20%; max-width:280px; display:grid;
  grid-template-columns:repeat(3,1fr); grid-auto-rows:1fr; gap:.32rem; align-content:start; }
.osk-gap{ display:block; }

.osk-key{
  min-width:0; height:2.9rem;
  font-family:inherit; font-size:1.05rem; color:var(--ink, #2b2019);
  background:#fffdf8; border:1px solid var(--rule, #cbb9a3);
  border-bottom-width:3px; border-radius:4px; cursor:pointer;
  display:flex; align-items:center; justify-content:center; line-height:1;
  padding:0; overflow:hidden;
}
.osk-key:active{ transform:translateY(1px); border-bottom-width:1px; background:var(--paper, #f3ece0); }
.osk-key.wide{ font-size:.85rem; }
.osk-key.fn{ font-size:.7rem; color:var(--ink-soft, #6b5d4f); background:#f6f3ec; }
.osk-key.accent{ background:var(--maroon, #7a1f2b); color:#fff; border-color:var(--maroon-dark, #5e161f); }
.osk-key.osk-key-active{ background:var(--maroon, #7a1f2b); color:#fff; }
/* dual legends (e.g. 1 / !) */
.osk-key .k-sub{ font-size:.62rem; opacity:.7; line-height:1; }
.osk-key .k-main{ font-size:1.05rem; line-height:1.05; }
.osk-key:has(.k-sub){ flex-direction:column; gap:1px; }

@media (max-width:1024px){ .osk-key{ height:2.5rem; font-size:.95rem; } .osk-key .k-main{ font-size:.95rem; } }
@media (prefers-reduced-motion:reduce){ .osk{ transition:none; } }

/* ===========================================================================
   On-screen keyboard — smaller keys + scrollable, gap-free docking.
   =========================================================================== */

/* Smaller keys, all the SAME height so rows stay aligned (~1/3 shorter than
   the original 2.9rem). */
.osk-key{ height:1.9rem; min-height:1.9rem; font-size:.88rem; padding:0; }
.osk-key .k-main{ font-size:.88rem; }
.osk-key .k-sub{ font-size:.56rem; }
.osk-key.fn{ font-size:.64rem; }     /* same height, smaller label */
.osk-key.wide{ font-size:.78rem; }

/* Tighter spacing so the whole board is shorter. */
.osk{ padding:.3rem .55rem calc(.35rem + env(safe-area-inset-bottom)); }
.osk-bar{ padding:.05rem .3rem .25rem; }
.osk-row{ gap:.3rem; margin:.16rem 0; }
.osk-main{ gap:.16rem; }
.osk-nav{ gap:.3rem; }

/* --- Room for the keyboard -------------------------------------------------
   keyboard.js sets --osk-app-h to the exact pixel height the content area should
   have so its bottom lands precisely at the keyboard top — measured, zoom-aware,
   so it is right whether the kiosk runs at 1280 (no zoom) or 1920 (zoom:1.5).
   NO vh/calc math (which breaks under CSS zoom). The 50vh here is only a fallback
   for the split second before the script runs. */
:root{ --osk-app-h:50vh; }

/* The original rule pushed the body down by 56vh; the shrink model replaces it. */
body.osk-active{ padding-bottom:0; }
body.osk-active .kiosk-content{ padding-bottom:0; }

/* Kiosk pages (chat, search, thesis record, reader): the scroller is
   .kiosk-content (flex:1; overflow-y:auto in style.css). Cap the shell at the
   measured height so its bottom lands at the keyboard top; the content pane then
   scrolls, so a field low on the page scrolls up into view above the keyboard. */
body.osk-active .kiosk-app{ flex:0 0 auto; height:var(--osk-app-h); min-height:0; }
/* Non-chat pages (record, search, reader): the content pane itself scrolls.
   Chat is excluded — it manages its own scroll (log scrolls, composer pinned). */
body.osk-active .kiosk-content:not(:has(.chat)){ min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }

/* Home / sign-in (no kiosk sidebar): the page itself is the scroller. */
body.osk-active:not(.kiosk-body){ height:var(--osk-app-h); min-height:0; overflow:auto; }

/* --- Ask CEATL (chat) ------------------------------------------------------
   Lay the chat out the way every messaging app does: the message LOG is the only
   scroller, and the composer is pinned OUTSIDE it at the bottom of the chat pane.
   So the input is always visible — above the keyboard when it's open — and a long
   conversation scrolls behind it instead of pushing it off-screen. This holds
   whether the keyboard is open or not. (Uses :has(), already relied on elsewhere
   in this file for .osk-key:has(.k-sub).) */
.kiosk-content:has(.chat){ overflow:hidden; }
.kiosk-content:has(.chat) .kiosk-inner{
  margin:0 auto; flex:1 1 auto; min-height:0; width:100%;
  display:flex; flex-direction:column;
}
.chat{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.chat-intro{ flex:0 0 auto; }
.chat-log{ flex:1 1 auto; min-height:0; overflow-y:auto; -webkit-overflow-scrolling:touch; }
.chat-form{ flex:0 0 auto; }
.chat-hint{ flex:0 0 auto; }

/* While typing, reclaim the big intro for the conversation and drop the hint so
   the composer sits flush above the keyboard. */
body.osk-active .kiosk-content:has(.chat) .chat-intro{ display:none; }
body.osk-active .chat-hint{ display:none; }