/* On-screen keyboard styles (widgets/osk.js). Linked from main.py so the
   keyboard is already positioned off-screen on the very first paint. */
.osk { position: fixed; left: 0; right: 0; bottom: 0; height: var(--osk-h, 50vh); z-index: 100000;
  --osk-key-font: 24px; --osk-gap: 6px;
  display: flex; flex-direction: column; gap: var(--osk-gap); padding: 6px 8px 8px;
  background: var(--app-surface, #1e293b); color: var(--app-text, #f8fafc);
  box-shadow: 0 -6px 24px rgba(0,0,0,.45); transform: translateY(105%); transition: transform .18s ease-out;
  user-select: none; -webkit-user-select: none; touch-action: manipulation; box-sizing: border-box; }
.osk.osk-open { transform: translateY(0); }
.osk-top { display: flex; align-items: stretch; gap: 8px; flex: 0 0 auto; height: var(--osk-top-h, 56px); }
.osk-textbox { flex: 1; display: flex; align-items: center; gap: 2px; padding: 0 14px; overflow: hidden;
  border-radius: 12px; background: rgba(127,127,127,.15); border: 2px solid var(--app-primary, #3b82f6);
  font-size: calc(var(--osk-top-h, 56px) * 0.5); font-weight: 600; white-space: nowrap; }
.osk-text { flex: 0 0 auto; }
.osk-caret { width: 2px; height: 1.1em; background: var(--app-primary, #3b82f6); animation: osk-blink 1s steps(2) infinite; }
.osk-placeholder { opacity: .45; font-weight: 400; }
@keyframes osk-blink { to { visibility: hidden; } }
.osk-iconbtn { width: var(--osk-top-h, 56px); border: none; border-radius: 12px; background: rgba(127,127,127,.15); color: inherit;
  display: flex; align-items: center; justify-content: center; cursor: pointer; }
.osk-iconbtn:active { background: var(--app-primary, #3b82f6); color: #fff; }
.osk-iconbtn svg { width: 55%; height: 55%; fill: currentColor; }
.osk-iconbtn.osk-listening { background: #dc2626; color: #fff; animation: osk-pulse 1s ease-in-out infinite; }
.osk-iconbtn.osk-disabled { opacity: .35; }
@keyframes osk-pulse { 50% { opacity: .6; } }
.osk-suggestions { display: flex; gap: 8px; flex: 0 0 auto; height: var(--osk-sugg-h, 40px); overflow-x: auto; overflow-y: hidden;
  scrollbar-width: none; align-items: stretch; }
.osk-suggestions::-webkit-scrollbar { display: none; }
.osk-chip { flex: 0 0 auto; display: flex; flex-direction: column; justify-content: center; align-items: flex-start;
  padding: 0 14px; border: none; border-radius: 10px; background: rgba(127,127,127,.15); color: inherit;
  cursor: pointer; max-width: 46vw; line-height: 1.1; }
.osk-chip:active { background: var(--app-primary, #3b82f6); color: #fff; }
.osk-chip b { font-size: calc(var(--osk-sugg-h, 40px) * 0.42); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.osk-chip small { font-size: calc(var(--osk-sugg-h, 40px) * 0.28); opacity: .65; white-space: nowrap; }
.osk-hint { display: flex; align-items: center; padding: 0 12px; font-size: 13px; opacity: .55; white-space: nowrap; }
.osk-rows { flex: 1; display: flex; flex-direction: column; gap: var(--osk-gap); min-height: 0; }
.osk-row { flex: 1; display: flex; gap: var(--osk-gap); min-height: 0; }
.osk-key { flex: 1; min-width: 0; border: none; border-radius: 10px; cursor: pointer; color: inherit;
  background: rgba(127,127,127,.22); font-size: var(--osk-key-font); font-weight: 500;
  display: flex; align-items: center; justify-content: center; padding: 0; box-shadow: 0 2px 0 rgba(0,0,0,.25); }
.osk-key:active, .osk-key.osk-down { background: var(--app-primary, #3b82f6); color: #fff; transform: translateY(1px); box-shadow: none; }
.osk-key.osk-special { background: rgba(127,127,127,.4); font-size: calc(var(--osk-key-font) * 0.72); }
.osk-key.osk-active { background: var(--app-primary, #3b82f6); color: #fff; }
.osk-key.osk-enter { background: var(--app-primary, #3b82f6); color: #fff; }
.osk-key svg { width: 1.3em; height: 1.3em; fill: currentColor; }