/* Терминал v0: экран кадра (моноширинный, rows×cols — app.js measure) и крупная клавиатура. Шрифты — системные. */
:root {
  --fs: 16px;
  --mono: ui-monospace, "SF Mono", Menlo, "Roboto Mono", "Droid Sans Mono", "DejaVu Sans Mono", "Liberation Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --bg: #f3f4f6; --paper: #ffffff; --ink: #1c2230; --muted: #5b6475; --line: #d9dde5;
  --accent: #c77700; --lcd: #e8ecd8; --lcd-ink: #27301a; --stop: #b3261e; --ok: #2f7d4f; --key: #ffffff;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12151c; --paper: #1a1f29; --ink: #e6e9ef; --muted: #9aa3b5; --line: #2c3342;
    --accent: #f0a232; --lcd: #1f2618; --lcd-ink: #cfe0a8; --stop: #f07167; --ok: #5fbf85; --key: #232a36;
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body { background: var(--bg); color: var(--ink); font: 16px/1.4 var(--sans); }
[hidden] { display: none !important; }

#app {
  display: flex; flex-direction: column; height: 100vh; height: 100dvh; max-width: 520px; margin: 0 auto;
  padding: env(safe-area-inset-top, 0px) 8px env(safe-area-inset-bottom, 0px);
}

header { display: flex; align-items: center; gap: 8px; min-height: 44px; }
h1 { flex: 1; min-width: 0; margin: 0; font: 600 var(--fs)/1.3 var(--mono); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.conn { width: 10px; height: 10px; border-radius: 50%; background: var(--stop); flex: none; }
.conn.on { background: var(--ok); }
.conn.wait { background: var(--accent); }
.badge { flex: none; font: 700 13px/1 var(--sans); padding: 5px 8px; border-radius: 6px; background: var(--stop); color: #fff; }
body.confirm h1 { color: var(--stop); }
.gear { flex: none; min-width: 44px; min-height: 44px; border: 0; background: transparent; color: var(--muted); font-size: 22px; }

.new { font: var(--fs)/1.3 var(--mono); padding: 4px 10px; margin-bottom: 4px; border-radius: 6px; background: var(--paper);
       border: 1px solid var(--line); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* экран кадра: листается только текст (.body), варианты (.choices) закреплены внизу — длинный кадр их не прячет */
.screen {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; overflow: hidden;
  background: var(--lcd); color: var(--lcd-ink); font: var(--fs)/1.4 var(--mono);
  padding: 8px 10px; border: 2px solid var(--line); border-radius: 8px; white-space: pre;
}
.screen > .body { flex: 0 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.screen > .choices { flex: 0 0 auto; max-height: calc(100% - 4.2em); overflow-y: auto; overflow-x: hidden; }
.screen > .hint {
  flex: none; display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit;
  font: inherit; font-weight: 700; text-align: left; opacity: .75; cursor: pointer; touch-action: manipulation;
}
.screen.stale { opacity: .5; }
.screen.confirm { border: 4px solid var(--stop); white-space: pre-wrap; overflow-wrap: anywhere; }
.line { display: block; min-height: 1.4em; }
.status { font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.screen .choice {
  display: block; width: 100%; margin: 0; padding: 0; border: 0; background: none; color: inherit; font: inherit;
  text-align: left; white-space: inherit; cursor: pointer; touch-action: manipulation;
}
.screen .choice span { display: block; min-height: 1.4em; }
.screen .choice:focus-visible { outline: 2px solid var(--accent); }
.screen.confirm .choice { font-weight: 700; }

.said { padding: 4px 6px; margin-top: 4px; border-left: 3px solid var(--accent); color: var(--ink); font-size: 14px; line-height: 1.3; }
.said > span { display: block; }
/* предупреждение об обрыве после подтверждения (.warn) не обрезается никогда; прочие строки исхода — до трёх строк */
.said > .warn { font-weight: 600; }
.said > .rest { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; }
.bar { min-height: 22px; padding: 2px 4px; color: var(--muted); font-size: 14px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 2px 0 8px; }
.pad button {
  min-height: 52px; border: 1px solid var(--line); border-radius: 10px; background: var(--key); color: var(--ink);
  font: 600 26px/1 var(--sans); touch-action: manipulation; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 2px;
}
.pad button small { font: 500 11px/1 var(--sans); color: var(--muted); }
.pad button:active:not(:disabled) { transform: translateY(1px); background: var(--line); }
.pad button:disabled, .pad.arming button { opacity: .35; }
.pad .bad { grid-column: 1 / -1; min-height: 44px; font-size: 17px; color: var(--stop); }

.entry { padding: 6px 0 10px; display: grid; gap: 6px; }
.entry label { font: 600 15px/1.3 var(--sans); }
.entry-row { display: flex; gap: 8px; }
.entry input, .setup input, .setup select {
  flex: 1; min-width: 0; width: 100%; min-height: 48px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px;
  background: var(--paper); color: var(--ink); font: 18px/1.3 var(--sans);
}
.entry-row button, .setup button {
  flex: 1; min-height: 48px; border: 1px solid var(--line); border-radius: 8px; background: var(--key); color: var(--ink);
  font: 600 16px/1.2 var(--sans); touch-action: manipulation;
}
button.primary { background: var(--ink); color: var(--bg); border-color: var(--ink); }

.setup { position: fixed; inset: 0; background: var(--bg); overflow-y: auto; padding: 16px; }
.setup-box { max-width: 480px; margin: 0 auto; display: grid; gap: 8px; }
.setup-box h2 { margin: 8px 0; font-size: 22px; }
.setup-box label { font-weight: 600; margin-top: 6px; }
.setup .error { color: var(--stop); min-height: 1.2em; margin: 4px 0 0; }
.setup input.masked { -webkit-text-security: disc; }
.setup-box label.show { font-weight: normal; margin-top: 0; display: flex; gap: 10px; align-items: center; min-height: 44px; }
.setup label.show input { flex: none; width: 24px; min-height: 24px; height: 24px; margin: 0; }
.setup .note { color: var(--muted); font-size: 14px; margin: 0; }
.setup button.link { border: 0; background: none; color: var(--muted); text-decoration: underline; min-height: 44px; }

/* низкий экран (телефон с адресной строкой): клавиши 44 px, «Не то» в одном ряду с *, 0, # — экрану кадра больше строк */
@media (max-height: 720px) {
  header { min-height: 40px; }
  .pad { grid-template-columns: repeat(12, 1fr); gap: 5px; padding-bottom: 6px; }
  .pad button { grid-column: span 4; min-height: 44px; font-size: 22px; }
  .pad [data-key="*"], .pad [data-key="0"], .pad [data-key="#"], .pad .bad { grid-column: span 3; }
  .pad .bad { min-height: 44px; font-size: 15px; }
  .pad button small { font-size: 10px; }
}

/* очень низкий экран (≤ 640 px: iPhone 320×568 в браузере внутри другого приложения — панели сверху и снизу, окно ≈ 444–466 px,
   живой кадр 29.09: над клавиатурой было три строки текста; тот же iPhone с ярлыка — 548–568, Android 360×640 — 512–640):
   клавиатура в три ряда по 40 px — 1–5, 6–9, *, 0, #, «Не то», — отступы меньше; кадру чтения (строка состояния, два
   сообщения, «1 Назад к чатам», «0 Ещё…») — не меньше 6 строк текста. Порог 640, а не 540 (ревью phone-small, п. 5): окна
   320×541–568 с крупной клавиатурой показывали 7–8 строк против 11 на 540 */
@media (max-height: 640px) {
  header { min-height: 40px; }
  .gear { min-width: 40px; min-height: 40px; }
  .screen { padding: 4px 8px; }
  .said { margin-top: 2px; padding: 2px 6px; }
  .said > .rest { -webkit-line-clamp: 2; }
  .bar { min-height: 18px; padding: 1px 4px; font-size: 13px; line-height: 1.3; }
  .pad { grid-template-columns: repeat(20, 1fr); gap: 4px; padding: 2px 0 4px; }
  .pad button { grid-column: span 4; min-height: 40px; font-size: 21px; }
  .pad [data-key="6"], .pad [data-key="7"], .pad [data-key="8"], .pad [data-key="9"],
  .pad [data-key="*"], .pad [data-key="0"], .pad [data-key="#"], .pad .bad { grid-column: span 5; }
  .pad .bad { min-height: 40px; font-size: 15px; }
}