* { box-sizing: border-box; margin: 0; }

:root {
  --bg: #101418;
  --fg: #e8eaed;
  --dim: #8a9099;
  --accent: #4db6ac;   /* Voice PE-подобный бирюзовый */
  --listen: #66bb6a;
  --error: #ef5350;
  --panel: #171c22;
}

body {
  background: var(--bg); color: var(--fg);
  font: 16px/1.5 system-ui, sans-serif;
  height: 100vh; overflow: hidden;
}
.hidden { display: none !important; }
.error { color: var(--error); min-height: 1.5em; }

/* --- логин --- */
#login { display: flex; align-items: center; justify-content: center; height: 100vh; }
.login-box { text-align: center; }
.login-box h1 { font-weight: 300; letter-spacing: .2em; margin-bottom: 1em; }
.login-box input {
  background: var(--panel); color: var(--fg); border: 1px solid #333;
  border-radius: 8px; padding: .6em 1em; font-size: 1em; text-align: center;
}
.login-box button {
  background: var(--accent); color: #06302c; border: 0; border-radius: 8px;
  padding: .6em 1.4em; font-size: 1em; margin-left: .5em; cursor: pointer;
}

/* --- аудио-гейт (после перезагрузки планшета) --- */
#gate {
  position: fixed; inset: 0; z-index: 30; display: flex;
  align-items: center; justify-content: center;
  background: var(--bg); cursor: pointer;
}
.gate-big { font-size: 1.4em; color: var(--accent); }

/* --- баннер напоминания --- */
#banner {
  position: fixed; top: 0; left: 0; right: 0; z-index: 20;
  display: flex; align-items: center; gap: 1em;
  background: #2c3a2e; border-bottom: 2px solid var(--listen);
  padding: 1em 1.2em; font-size: 1.25em;
}
#banner span { flex: 1; }
#banner button {
  background: var(--listen); color: #06300c; border: 0; border-radius: 10px;
  padding: .7em 1.6em; font-size: 1em; cursor: pointer;
}

/* --- индикатор соединения --- */
#conn {
  position: fixed; top: 10px; right: 12px; width: 10px; height: 10px;
  border-radius: 50%; background: var(--error); z-index: 10;
}
#conn.ok { background: var(--listen); }

/* --- сцена --- */
#main { display: flex; flex-direction: column; height: 100vh; }
#stage {
  flex: 1; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1.2em; padding: 1em;
  min-height: 0;
}

/* кольцо светодиодов вокруг круга */
#ring { position: relative; width: 260px; height: 260px; }
#ring .led {
  position: absolute; width: 10px; height: 10px; border-radius: 50%;
  background: #2a3138; left: 50%; top: 50%;
  transform: translate(-50%, -50%) rotate(var(--a)) translateY(-122px);
  transition: background .15s, box-shadow .15s;
}
#ring.thinking .led.on,
#ring.listening .led { background: var(--accent); box-shadow: 0 0 8px var(--accent); }
#ring.listening .led { background: var(--listen); box-shadow: 0 0 8px var(--listen);
  animation: breathe 1.2s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .45; } }

/* сам круг-кнопка */
#ptt {
  position: absolute; inset: 30px; border-radius: 50%; border: 0;
  background: radial-gradient(circle at 35% 30%, #232b33, #12171c);
  color: var(--dim); font-size: .95em; cursor: pointer;
  box-shadow: 0 4px 24px rgba(0,0,0,.5), inset 0 1px 0 rgba(255,255,255,.06);
  -webkit-user-select: none; user-select: none; touch-action: none;
}
#ring.listening #ptt { box-shadow: 0 0 32px rgba(102,187,106,.35); color: var(--listen); }
#ring.thinking  #ptt { color: var(--accent); }

/* --- чипы таймеров --- */
#timers { display: flex; gap: .6em; flex-wrap: wrap; justify-content: center;
          min-height: 1.8em; }
.timer-chip {
  display: inline-flex; align-items: center; gap: .45em;
  background: var(--panel); border: 1px solid #2a3138; border-radius: 999px;
  padding: .25em .9em; font-size: 1.05em;
}
.timer-chip .tc-count {
  font-family: ui-monospace, monospace; color: var(--accent);
  font-variant-numeric: tabular-nums;
}
.timer-chip.soon .tc-count { color: var(--listen); }

#transcript { color: var(--dim); min-height: 1.5em; font-style: italic; }
#reply { max-width: 40em; text-align: center; font-size: 1.25em; min-height: 2em; }

/* --- debug --- */
#debug {
  height: 34vh; display: flex; flex-direction: column;
  background: var(--panel); border-top: 1px solid #2a3138;
  font-family: ui-monospace, monospace; font-size: 13px;
}
#debug-header {
  display: flex; align-items: center; gap: 1em; padding: .4em .8em;
  color: var(--dim); border-bottom: 1px solid #2a3138;
}
#text-form { flex: 1; }
#text-input {
  width: 100%; background: var(--bg); color: var(--fg);
  border: 1px solid #2a3138; border-radius: 6px; padding: .35em .7em;
  font: inherit;
}
#debug-log { flex: 1; overflow-y: auto; padding: .6em .8em; }
.dbg-entry { margin-bottom: .9em; }
.dbg-entry .meta { color: var(--dim); }
.dbg-entry .badge {
  display: inline-block; padding: 0 .5em; border-radius: 4px;
  background: #2a3138; color: var(--accent); margin-right: .5em;
}
.dbg-entry details { margin: .2em 0 .2em 1em; }
.dbg-entry summary { cursor: pointer; color: var(--dim); }
.dbg-entry pre {
  white-space: pre-wrap; word-break: break-word;
  background: var(--bg); border-radius: 6px; padding: .5em .7em; margin: .3em 0;
  max-height: 14em; overflow-y: auto;
}