/* Тёмная тема, скопированная с палитры лаунчера, чтобы Вай везде выглядела одинаково. */
:root {
  --bg: #0f1020;
  --card: #1a1b2e;
  --input: #262845;
  --border: #2a2b3e;
  --text: #e6e8f0;
  --dim: #9ca3b8;
  --accent: #9ca3b8;
  --ok: #10b981;
  --warn: #f59e0b;
  --err: #ef4444;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  height: 100%;
  overflow: hidden;
  background: var(--bg);
  color: var(--text);
  font: 14px/1.5 -apple-system, "Segoe UI", system-ui, sans-serif;
  -webkit-tap-highlight-color: transparent;
}

/* Чтобы длинное нажатие на микрофон не вызывало меню выделения */
body { user-select: none; -webkit-user-select: none; }

/* Фоновая анимация нейросети — на весь экран, позади всего. */
#nn {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  z-index: 0;
  opacity: .5;
  pointer-events: none;
}

/* Центральное окно Вай: квадрат по центру, лицо не растягивается.
   Размер = меньшее из ширины/высоты с отступами под шапку и футер. */
#stage-wrap {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(82vw, 56vh);
  height: min(82vw, 56vh);
  z-index: 1;
  border-radius: 20px;
  overflow: hidden;
  /* лёгкая рамка-«стекло», чтобы окно читалось как отдельный модуль */
  box-shadow: 0 0 0 1px var(--border), 0 18px 60px rgba(0,0,0,.55);
  background: radial-gradient(120% 120% at 50% 0%, #1b1d33 0%, #0c0d1c 70%);
  touch-action: none;
}

#stage, #stage2d {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
  touch-action: none;
}

/* Режимы переключаются атрибутом data-view на body: показываем ровно один
   канвас, второй прячем, чтобы WebGL и 2D не спорили за экран. */
body[data-view="3d"]       #stage2d { display: none; }
body[data-view="portrait"] #stage   { display: none; }

body.dragging #stage-wrap { outline: 2px dashed var(--accent); outline-offset: 4px; }

/* ------------------------------------------------------------- ШАПКА ---- */
header {
  position: fixed;
  top: 0; left: 0; right: 0;
  padding: max(14px, env(safe-area-inset-top)) 16px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: linear-gradient(180deg, rgba(15,16,32,.85), transparent);
  pointer-events: none;
  z-index: 3;
}

#status { color: var(--dim); font-size: 12px; }

.hdr-btns { display: flex; gap: 8px; pointer-events: auto; }

.hdr-btns button {
  background: rgba(38,40,69,.75);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  height: 36px;
  padding: 0 12px;
  font-size: 13px;
  cursor: pointer;
}

/* Шестерёнка — квадратная, под иконку */
#btnSettings { width: 36px; padding: 0; font-size: 17px; }

/* ---------------------------------------------------------- НАСТРОЙКИ ---- */
#panel {
  position: fixed;
  top: max(58px, calc(env(safe-area-inset-top) + 52px));
  left: 12px; right: 12px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  display: grid;
  gap: 12px;
  max-height: 62vh;
  overflow: auto;
  z-index: 5;
}

#panel.hidden { display: none; }

#panel label {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 6px;
  align-items: center;
  font-size: 12px;
  color: var(--dim);
}

#panel input, #panel select {
  grid-column: 1 / -1;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 14px;
  width: 100%;
}

#panel button {
  grid-column: 2;
  grid-row: 1;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 8px 14px;
  cursor: pointer;
}

.note { margin: 0; font-size: 12px; color: var(--dim); }

/* -------------------------------------------------------------- НИЗ ---- */
footer {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 12px 16px max(14px, env(safe-area-inset-bottom));
  display: grid;
  justify-items: center;
  gap: 8px;
  background: linear-gradient(0deg, rgba(15,16,32,.92) 45%, transparent);
  z-index: 3;
}

#heard {
  min-height: 18px;
  max-width: 92vw;
  text-align: center;
  font-size: 13px;
  color: var(--text);
  opacity: .85;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

#hint {
  font-size: 12px;
  color: var(--dim);
  letter-spacing: .3px;
}

/* Микрофон — держим и говорим. Большая цель под палец. */
#mic {
  width: 84px; height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--input);
  color: var(--text);
  font-size: 32px;
  cursor: pointer;
  touch-action: none;
  transition: transform .12s, background .2s;
}

#mic:disabled { opacity: .45; }

body[data-mode="listening"] #mic {
  background: #ef4444;
  transform: scale(1.08);
}
body[data-mode="thinking"] #mic { background: #f59e0b; }
body[data-mode="speaking"] #mic { background: #10b981; }

.row {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 520px;
}

#text {
  flex: 1;
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 11px 14px;
  font-size: 15px;
  min-width: 0;
}

#btnSay {
  background: var(--input);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 12px;
  width: 46px;
  font-size: 18px;
  cursor: pointer;
}

#log {
  width: 100%;
  max-width: 520px;
  max-height: 84px;
  overflow: auto;
  font: 11px/1.45 ui-monospace, "Consolas", monospace;
  color: var(--dim);
  -webkit-user-select: text;
  user-select: text;
}

.log-line { white-space: pre-wrap; word-break: break-word; }
.log-line.ok   { color: var(--ok); }
.log-line.warn { color: var(--warn); }
.log-line.err  { color: var(--err); }