/* Этап 2: крупные шрифты и кнопки (пользователь плохо видит — ТЗ §3.1) */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: #10141c; color: #eef2f8;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
body { font-size: 20px; }

.card { max-width: 560px; margin: 8vh auto; padding: 32px 28px;
  background: #1a2233; border-radius: 20px; box-shadow: 0 8px 40px #0008; }
h1 { font-size: 30px; margin: 0 0 24px; }
h1 small { font-size: 18px; color: #9fb2cc; font-weight: 400; }
label { display: block; margin: 18px 0; font-size: 21px; color: #c6d4e8; }

.big { display: block; width: 100%; padding: 18px 20px; font-size: 24px;
  border-radius: 14px; border: 2px solid #33425c; background: #212c42;
  color: #eef2f8; margin-top: 8px; }
button.big { cursor: pointer; }
.primary { background: #2563eb; border-color: #2563eb; color: #fff; }
.primary:active { transform: scale(0.98); }
.ghost { background: transparent; }
.hint { color: #93a5c0; font-size: 17px; }

#roomui { display: grid; grid-template-columns: 1fr 360px; gap: 16px;
  max-width: 1200px; margin: 0 auto; padding: 16px; }
@media (max-width: 900px) { #roomui { grid-template-columns: 1fr; } }
header { grid-column: 1 / -1; display: flex; justify-content: space-between;
  align-items: center; gap: 12px; }
.badge { padding: 8px 16px; border-radius: 999px; background: #2a3650;
  font-size: 19px; }
.badge.live { background: #16a34a; }
.badge.ai { background: #7c3aed; }
.badge.waiting_human { background: #d97706; }
.you { color: #9fb2cc; font-size: 18px; }

.talk { grid-column: 1 / -1; font-size: 30px; padding: 26px; border: none; }
.talk.on { background: #dc2626; animation: pulse 1.2s infinite; }
@keyframes pulse { 0%{box-shadow:0 0 0 0 #dc262688} 100%{box-shadow:0 0 0 24px #dc262600} }

.feed { background: #161d2c; border-radius: 16px; padding: 14px;
  min-height: 240px; max-height: 55vh; overflow-y: auto; }
.msg { margin: 10px 0; line-height: 1.45; }
.msg .who { color: #8ea6c8; font-size: 16px; }
.msg .orig { font-size: 21px; }
.msg .tr { font-size: 22px; color: #a5d8ff; }
.msg.partial { opacity: 0.55; }
.msg.info { color: #7ce38b; font-size: 17px; }

.box { background: #161d2c; border-radius: 16px; padding: 14px; margin-bottom: 14px; }
.box.warn { background: #3b2f12; }
.box h3 { margin: 0 0 10px; font-size: 20px; }
.summary { font-size: 19px; color: #fde9b8; margin: 10px 0; }
#hintList > div { border-left: 4px solid #2563eb; padding: 8px 12px;
  margin: 10px 0; font-size: 19px; background: #1c2740; border-radius: 8px; }
footer { grid-column: 1 / -1; }