/* Панель «Пульта». Крупная типографика — стенд бабушки должен читаться так же,
   как приложение на телефоне: мелкий текст здесь не проверяет ничего полезного. */

:root {
  color-scheme: dark;
  --bg: #14161a;
  --card: #1d2026;
  --line: #2c313a;
  --text: #eceff4;
  --muted: #949aa6;
  --accent: #ff9f43;
  --ok: #4cd97b;
  --danger: #ff5f56;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 0 3rem;
  background: var(--bg);
  color: var(--text);
  font-size: 17px;
  line-height: 1.5;
}

.hidden { display: none !important; }
.muted { color: var(--muted); }

/* Рамка сессии — тот самый видимый признак подключения (docs/security.md §2). */
body.in-session::after {
  content: "";
  position: fixed;
  inset: 0;
  border: 6px solid var(--accent);
  pointer-events: none;
  animation: pulse 2s ease-in-out infinite;
  z-index: 40;
}

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

.bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1.25rem;
  background: var(--card);
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
}

.brand { font-weight: 700; letter-spacing: 0.04em; }
.who { color: var(--muted); }
.link { margin-left: auto; color: var(--muted); font-size: 0.9rem; }
.link.ok { color: var(--ok); }

.roles a {
  color: var(--muted);
  text-decoration: none;
  margin-left: 0.75rem;
  font-size: 0.9rem;
  border-bottom: 1px solid transparent;
}
.roles a.active { color: var(--text); border-bottom-color: var(--accent); }

.card {
  max-width: 780px;
  margin: 1.25rem auto;
  padding: 1.5rem;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: 14px;
}

h1 { font-size: 1.4rem; margin-top: 0; }
.big-text { font-size: 1.6rem; font-weight: 600; margin: 0.25rem 0 0.75rem; }

button {
  font: inherit;
  color: var(--text);
  background: #2b303a;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 0.6rem 1.1rem;
  cursor: pointer;
}
button:hover:not(:disabled) { background: #343a46; }
button:disabled { opacity: 0.45; cursor: not-allowed; }

button.big { font-size: 1.15rem; padding: 0.9rem 1.5rem; background: var(--accent); color: #1a1200; border: none; font-weight: 600; }

/* Кнопка согласия — самая большая цель на экране; бабушка должна попасть в неё не глядя. */
button.huge {
  display: block;
  width: 100%;
  min-height: 28vh;
  font-size: 2rem;
  font-weight: 700;
  background: var(--ok);
  color: #04220f;
  border: none;
  border-radius: 18px;
  margin-bottom: 0.75rem;
}

button.quiet { background: transparent; color: var(--muted); }
button.danger { background: var(--danger); color: #2a0400; border: none; font-weight: 600; }
button.small { font-size: 0.85rem; padding: 0.35rem 0.7rem; }

input, textarea {
  font: inherit;
  width: 100%;
  padding: 0.65rem 0.8rem;
  margin-bottom: 0.75rem;
  color: var(--text);
  background: #14171d;
  border: 1px solid var(--line);
  border-radius: 10px;
}

.presence { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1rem; }
.dot { width: 12px; height: 12px; border-radius: 50%; background: #555c69; }
.dot.on { background: var(--ok); box-shadow: 0 0 10px var(--ok); }

/* Экран бабушки почти всегда портретный (телефон). Без потолка по высоте портретное
   видео растягивает элемент на ~1600px и «съедает» страницу — помощник тонет в прокрутке.
   Ограничиваем высоту и вписываем кадр (object-fit: contain) — по бокам чёрные поля.
   frac() в app.js уже считает эти поля, поэтому попадание курсора остаётся точным. */
.screen-wrap {
  position: relative;
  background: #000;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  justify-content: center;
  max-height: 68vh;
  /* Когда потока нет (FLAG_SECURE), видео схлопывается — держим пропорции телефона. */
  aspect-ratio: 9 / 16;
  width: 100%;
}
video {
  width: 100%;
  max-height: 68vh;
  object-fit: contain;
  display: block;
  background: #000;
  border-radius: 10px;
}

.pointer {
  position: fixed;
  width: 48px;
  height: 48px;
  margin: -24px 0 0 -24px;
  border: 4px solid var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px rgba(255, 159, 67, 0.25);
  pointer-events: none;
  z-index: 50;
}

.redacted {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: #ffffff;
  color: #000000;
  font-size: 1.2rem;
  overflow: hidden;
  z-index: 10;
}

/* Картинка-заглушка вместо скрытого экрана: клики по ней уходят как тапы. */
#redact-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: #ffffff;
  cursor: crosshair;
}

/* ── BankID-экран 1:1 (security_code_fragment.xml + colors.xml + dimens.xml) ── */
.bankid-screen {
  position: relative;
  width: 100%;
  height: 100%;
  background: #ffffff;
  color: #000000;
  font-family: Roboto, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* InfoCard: Theme.BankID.InfoCard (#bee1ee, скругление 8dp, отступ 16dp). */
.bankid-info {
  background: #bee1ee;
  margin: 16px;
  border-radius: 8px;
  padding: 16px;
  flex-shrink: 0;
}
.bankid-info h2 {
  color: #183e4f;
  font-size: 16px;
  font-weight: bold;
  margin: 0 0 8px;
}
.bankid-info p {
  font-size: 16px;
  line-height: 1.35;
  margin: 0;
  color: #000000;
}

/* Поле ввода PIN (TextInputLayout). */
.bankid-input {
  margin: 8px 16px 0;
  flex-shrink: 0;
}
.bankid-input label {
  display: block;
  font-size: 14px;
  color: #0b2028;
  margin-bottom: 4px;
}
.bankid-dots {
  display: flex;
  justify-content: center;
  gap: 16px;
  padding: 12px 0;
  border-bottom: 2px solid #183e4f;
  min-height: 48px;
  align-items: center;
}
.bankid-dots .dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: #183e4f;
}
.bankid-dots .dot.empty {
  background: transparent;
  border: 2px solid #d2d1cd;
}

/* Цифровая клавиатура — абсолютное позиционирование по долям живого экрана. */
.bankid-numpad {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.bankid-key {
  position: absolute;
  width: 33.3%;
  height: 9.5%;
  transform: translate(-50%, -50%);
  background: #e8e7e3;
  border: none;
  color: #000000;
  font-size: 18px;
  font-weight: normal;
  cursor: pointer;
  pointer-events: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 0;
  padding: 0;
  -webkit-tap-highlight-color: transparent;
}
.bankid-key:active { background: #d2d1cd; }
.bankid-key.action {
  background: #183e4f;
  color: #ffffff;
  font-size: 16px;
}
.bankid-key.action:active { background: #265f79; }

/* Эмулятор внутри панели — масштабированная копия. */
.pinpad-emulator {
  margin-top: 0.8rem;
  padding: 0.8rem;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0d0f13;
}
.bankid-screen-scenario {
  position: relative;
  width: 100%;
  max-width: 320px;
  aspect-ratio: 9 / 16;
  margin: 0 auto;
  background: #ffffff;
  color: #000000;
  font-family: Roboto, -apple-system, "Segoe UI", "Helvetica Neue", Arial, sans-serif;
  border-radius: 8px;
  overflow: hidden;
}
.bankid-screen-scenario .bankid-info { margin: 12px; padding: 12px; }
.bankid-screen-scenario .bankid-info h2 { font-size: 15px; }
.bankid-screen-scenario .bankid-info p { font-size: 14px; }
.bankid-screen-scenario .bankid-input { margin: 6px 12px 0; }
.bankid-screen-scenario .bankid-dots { min-height: 40px; gap: 12px; }
.bankid-screen-scenario .bankid-dots .dot { width: 12px; height: 12px; }
.bankid-screen-scenario .bankid-key { font-size: 16px; }
.bankid-screen-scenario .bankid-key.action { font-size: 13px; }

.tools { display: flex; flex-wrap: wrap; gap: 0.6rem; align-items: center; margin-top: 1rem; }

/* Складные блоки управления и уроков — панель должна быть спокойной, а не стеной кнопок. */
.more { flex: 1 1 100%; }
.more > summary,
.teach-summary {
  cursor: pointer;
  color: var(--muted);
  padding: 0.4rem 0;
  user-select: none;
  list-style-position: inside;
}
.more > summary:hover,
.teach-summary:hover { color: var(--text); }
.more[open] > summary { color: var(--text); margin-bottom: 0.4rem; }
.teach-summary { font-size: 1.1rem; }
.teach-summary b { color: var(--text); }

/* ── Управление удалённым экраном ─────────────────────────────────────────── */

/* Касания по видео НЕ должны листать страницу: иначе помощник с телефона вместо
   свайпа у бабушки прокручивает собственную панель. Это и есть та самая жалоба. */
#remote {
  touch-action: none;
  -webkit-user-select: none;
  user-select: none;
  cursor: crosshair;
}
body { overscroll-behavior-y: none; }

.keys { display: flex; gap: 0.35rem; flex-wrap: wrap; align-items: center; }
.open-link { flex: 1 1 100%; }
.open-link input { flex: 1; margin: 0; min-width: 12rem; }
.open-link button { white-space: nowrap; }
.keys button { padding: 0.55rem 0.85rem; }
.hint { max-width: 780px; margin: 0.5rem auto; padding: 0 1.25rem; font-size: 0.9rem; }

/* Полноэкранный режим — основной режим работы с телефона.
   Дублируем нативный :fullscreen своим классом: iOS Safari не умеет
   requestFullscreen для обычных элементов, только для <video>. */
#stage.immersive,
#stage:fullscreen {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  flex-direction: column;
  background: #000;
  margin: 0;
}

#stage.immersive .screen-wrap,
#stage:fullscreen .screen-wrap {
  flex: 1;
  min-height: 0;
  border-radius: 0;
}

#stage.immersive .screen-wrap,
#stage:fullscreen .screen-wrap { max-height: none; }

#stage.immersive video,
#stage:fullscreen video {
  width: 100%;
  height: 100%;
  max-height: none;
  object-fit: contain;
  border-radius: 0;
}

#stage.immersive .tools,
#stage:fullscreen .tools {
  margin: 0;
  padding: 0.45rem 0.5rem;
  gap: 0.3rem;
  justify-content: center;
  background: rgba(20, 22, 26, 0.96);
  border-top: 1px solid var(--line);
  /* Кнопки не должны уезжать под системную панель жестов телефона. */
  padding-bottom: max(0.45rem, env(safe-area-inset-bottom));
}

#stage.immersive .tools button,
#stage:fullscreen .tools button {
  padding: 0.5rem 0.7rem;
  font-size: 0.95rem;
}

/* В полноэкранном режиме подсказки-фразы только мешают — прячем. */
#stage.immersive [data-say],
#stage:fullscreen [data-say] { display: none; }

.consent { border-color: var(--accent); }

/* Обучение: лента миниатюр слайдов */
.teach-strip { display: flex; gap: 0.5rem; overflow-x: auto; padding: 0.5rem 0; }
.thumb { position: relative; flex: 0 0 auto; border: 2px solid var(--line); border-radius: 8px; }
.thumb.sel { border-color: var(--accent); }
.thumb img { height: 96px; border-radius: 6px; cursor: pointer; display: block; }
.thumb .badge { position: absolute; top: 2px; right: 4px; color: var(--ok); font-size: 0.8rem; }
.chk { display: inline-flex; align-items: center; gap: 0.3rem; }
.teach-editor { margin: 0.5rem 0; }
#teach-canvas { max-width: 100%; max-height: 60vh; border-radius: 10px; background: #000; cursor: crosshair; display: block; }
#lesson-list { min-width: 8rem; }

.log-card { max-width: 780px; }
.log { list-style: none; margin: 0.5rem 0 1rem; padding: 0; max-height: 220px; overflow-y: auto; font-size: 0.9rem; }
.log li { padding: 0.2rem 0; border-bottom: 1px solid #22262e; color: var(--muted); }
.log li.warn { color: var(--accent); }
.log li.error { color: var(--danger); }

/* Дерево UI для записи сценариев: элементы как кликабельные плашки. */
.ui-tree { max-height: 50vh; overflow-y: auto; margin-top: 0.5rem; border: 1px solid var(--line); border-radius: 10px; padding: 0.5rem; background: #0d0f13; }
.ui-tree:empty { display: none; }
.ui-el { display: block; width: 100%; text-align: left; margin: 0.15rem 0; padding: 0.5rem 0.7rem; border: 1px solid #2a3040; border-radius: 8px; background: #161a24; color: #cfd5e1; cursor: pointer; font-size: 0.9rem; }
.ui-el:hover { border-color: var(--accent); background: #1a2030; }
.ui-el .meta { color: #7a8498; font-size: 0.75rem; margin-left: 0.4rem; }
.ui-el.clickable { border-color: #2a5a8a; }
.ui-el.clickable:hover { border-color: var(--accent); }
.recording #scenario-status { color: var(--danger); }
.recording #scenario-start { display: none; }

.pin-controls { align-items: stretch; }
.pin-controls input { max-width: 8rem; text-align: center; letter-spacing: 0.15em; }
.pin-label { font-size: 0.9rem; }
#bankid-pin-status { width: 100%; margin: 0; }


@media (max-width: 620px) {
  .card { margin: 0.75rem; padding: 1.1rem; }
  button.huge { min-height: 34vh; font-size: 1.7rem; }
  /* С телефона панель — это прежде всего пульт: кнопки крупные, подписи короткие. */
  .keys button { padding: 0.6rem 0.75rem; }
  .tools { gap: 0.4rem; }
}