/* Оформление страницы «Арбитр Голос».
   Простое и крупное: страницей пользуется владелец, а не разработчик, и
   главное здесь - чтобы было видно, какой голос выбран и во что обошлась
   реплика. */

:root {
  --фон: #f4f6f9;
  --карточка: #ffffff;
  --текст: #1f2a44;
  --тихий: #5b6880;
  --рамка: #dde3ec;
  --главный: #2d6cdf;
  --главный-тень: #1f57bd;
  --удача: #1c8c4a;
  --беда: #c0392b;
  --внимание: #b06f00;
}

@media (prefers-color-scheme: dark) {
  :root {
    --фон: #151922;
    --карточка: #1d222d;
    --текст: #e8ecf4;
    --тихий: #9aa6bd;
    --рамка: #2c3342;
    --главный: #4a86ef;
    --главный-тень: #3a6fd0;
    --удача: #3fbd72;
    --беда: #ef6a5c;
    --внимание: #e0a13a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--фон);
  color: var(--текст);
  font: 15px/1.5 -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
}

.шапка {
  display: flex;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  padding: 18px 24px;
  border-bottom: 1px solid var(--рамка);
  background: var(--карточка);
}

.шапка h1 { margin: 0; font-size: 20px; letter-spacing: -0.2px; }

.состояние { color: var(--тихий); font-size: 13px; }
.состояние.хорошо { color: var(--удача); }
.состояние.плохо { color: var(--беда); }

/* Раскладка: слева работа (набрать текст или поговорить), справа настройки,
   внизу во всю ширину библиотека голосов.

   Колонки заданы явно, а не через auto-fit. С auto-fit на широком экране
   выходило четыре колонки вместо двух, и настройки уезжали в третью, а
   главная колонка сжималась - на мониторе шире 1400 точек это выглядело
   рассыпанным. Здесь же главная всегда вдвое шире настроек. */
.сетка {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr);
  gap: 16px;
  padding: 16px 24px 40px;
  max-width: 1600px;
  margin: 0 auto;
}

/* На узком экране колонки складываются в одну: настройки уходят под работу,
   голоса остаются внизу. */
@media (max-width: 900px) {
  .сетка { grid-template-columns: 1fr; padding: 12px 14px 32px; }
}

.карточка {
  background: var(--карточка);
  border: 1px solid var(--рамка);
  border-radius: 10px;
  padding: 18px;
  /* Карточка высотой по своему содержимому, а не по соседней. Без этой строки
     grid растягивал обе колонки до высоты самой длинной, и под вкладкой
     «Напечатать» зияло пятьсот точек пустоты - список голосов справа куда
     длиннее. Найдено осмотром вёрстки 21.09.2026. */
  align-self: start;
}

.карточка.широкая { grid-column: 1 / -1; }

.карточка h2 { margin: 0 0 12px; font-size: 16px; }
.карточка h3 { margin: 14px 0 6px; font-size: 14px; }

textarea {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
  resize: vertical;
}

input[type="text"] {
  width: 100%;
  margin: 6px 0;
  padding: 8px 10px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
}

.строка-кнопок {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 10px;
}

button {
  padding: 9px 16px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
  cursor: pointer;
}

button:hover:not(:disabled) { border-color: var(--главный); }
button:disabled { opacity: 0.5; cursor: default; }

button.главная {
  background: var(--главный);
  border-color: var(--главный-тень);
  color: #fff;
  font-weight: 600;
}

button.главная:hover:not(:disabled) { background: var(--главный-тень); }

.пояснение { color: var(--тихий); font-size: 13px; margin: 0 0 12px; }
.пояснение.малый { font-size: 12px; }

.спрятан { display: none !important; }

/* ── Ход работы ─────────────────────────────────────────────────────── */

.ход { margin-top: 14px; color: var(--тихий); font-size: 13px; }

.полоска {
  height: 4px;
  border-radius: 2px;
  background: var(--рамка);
  overflow: hidden;
  margin-bottom: 6px;
}

.полоска i {
  display: block;
  height: 100%;
  width: 30%;
  background: var(--главный);
  animation: бежит 1.1s ease-in-out infinite;
}

@keyframes бежит {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(340%); }
}

/* ── Итог ───────────────────────────────────────────────────────────── */

.итог { margin-top: 14px; }
audio { width: 100%; margin-bottom: 10px; }

.цифры {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 8px 14px;
  margin: 0 0 10px;
}

.цифры div {
  background: var(--фон);
  border-radius: 8px;
  padding: 7px 10px;
}

.цифры dt { color: var(--тихий); font-size: 11px; text-transform: uppercase; letter-spacing: 0.3px; }
.цифры dd { margin: 2px 0 0; font-size: 15px; font-weight: 600; }

.что-ушло { margin-top: 6px; font-size: 13px; }
.что-ушло summary { cursor: pointer; color: var(--тихий); }
.что-ушло p { margin: 8px 0 0; padding: 8px 10px; background: var(--фон); border-radius: 8px; }

.беда, .замечание {
  margin-top: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 13px;
}

.беда { background: rgba(192, 57, 43, 0.12); color: var(--беда); }
.замечание { background: rgba(176, 111, 0, 0.12); color: var(--внимание); }

/* ── Голоса ─────────────────────────────────────────────────────────── */

/* Библиотека лежит внизу во всю ширину, поэтому список идёт в несколько
   столбцов: восемь образцов в одну колонку на широком экране растянулись бы
   на пол-экрана пустой полосой. Столбцы набираются сами по ширине окна. */
.голоса {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  /* 340, а не 280: при более узких столбцах имена образцов упирались в меры и
     обрезались многоточием уже на первом («mihail_01_predst…»), то есть ради
     лишнего столбца терялось главное - по какому имени выбирать голос. */
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 6px 10px;
}

.голоса li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  cursor: pointer;
}

.голоса li:hover { border-color: var(--главный); }
.голоса li.выбран { border-color: var(--главный); background: rgba(45, 108, 223, 0.08); }

/* Длинное имя обрезается многоточием, а не рвётся посреди слова: разрыв вида
   «mihail_01_predstavlen / ie» читается хуже, чем обрезка. Полное имя видно
   по наведению - его кладёт app.js в title. Без min-width: 0 flex-элемент не
   даёт себя сжать меньше содержимого, и меры уезжали бы за край карточки. */
.голоса .имя-голоса {
  flex: 1;
  min-width: 0;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* nowrap здесь обязателен: на узком экране «9 с» разрывалось на две строки -
   цифра сверху, буква снизу. Меры короткие, места они не съедают. */
.голоса .мера {
  text-align: right;
  font-size: 12px;
  color: var(--тихий);
  white-space: nowrap;
}
.голоса .мера b { display: block; font-size: 15px; color: var(--текст); }

.голоса .убрать {
  border: none;
  background: none;
  color: var(--тихий);
  font-size: 18px;
  line-height: 1;
  padding: 2px 6px;
}

.голоса .убрать:hover { color: var(--беда); }

/* Карточка голосов лежит во всю ширину, но строка текста во всю ширину
   монитора не читается: глаз теряет начало следующей строки. Поэтому сами
   поля ввода и пояснения ограничены по ширине, а на всю ширину идёт только
   список образцов. */
.расшифровка {
  margin-top: 14px;
  padding: 12px;
  background: var(--фон);
  border-radius: 8px;
  max-width: 760px;
}

.расшифровка label { font-size: 14px; }
.расшифровка textarea { margin-bottom: 8px; }
.расшифровка .малый { margin-left: 10px; font-size: 12px; color: var(--тихий); }

.добавить { margin-top: 14px; font-size: 14px; max-width: 760px; }
.добавить summary { cursor: pointer; color: var(--главный); }
.способ { padding: 10px 0; border-top: 1px solid var(--рамка); margin-top: 10px; }

.таймер { color: var(--беда); font-weight: 600; }

/* ── Настройки ──────────────────────────────────────────────────────── */

.настройки {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 14px;
}

.настройка {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 10px;
  align-items: center;
  padding: 10px 12px;
  background: var(--фон);
  border-radius: 8px;
  cursor: pointer;
}

.настройка .имя { font-weight: 600; font-size: 14px; }
.настройка .зачем { grid-column: 1 / -1; color: var(--тихий); font-size: 12px; }
.настройка.ползунок { grid-template-columns: 1fr; }
.настройка input[type="range"] { width: 100%; }

/* ── Разговор ───────────────────────────────────────────────────────────── */

.вкладки {
  display: flex;
  gap: 4px;
  margin-bottom: 12px;
  border-bottom: 1px solid var(--рамка);
}

.вкладка {
  padding: 8px 14px;
  border: none;
  background: none;
  color: var(--тихий);
  font-size: 15px;
  font-weight: 600;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}

.вкладка.выбрана {
  color: var(--главный);
  border-bottom-color: var(--главный);
}

/* Лента ограничена по высоте и прокручивается: за полчаса проб реплик
   набирается столько, что кнопки уезжают за край экрана. */
.лента {
  max-height: 420px;
  overflow-y: auto;
  padding: 10px;
  background: var(--фон);
  border-radius: 8px;
  margin-bottom: 12px;
}

.лента .пусто {
  color: var(--тихий);
  font-size: 13px;
  text-align: center;
  padding: 16px 0;
}

.реплика {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
  /* Реплика не тянется на всю ширину монитора: строка длиной в тысячу точек
     читается тяжело - глаз теряет начало следующей. Ограничение по ширине,
     а не по ленте, чтобы сама лента оставалась во всю карточку. */
  max-width: 820px;
}

/* Реплика человека светлее ленты, а не вровень с ней. В тёмной теме фон
   карточки и фон ленты почти совпадают, и сказанное человеком сливалось с
   пустотой - видно только на тёмной теме, осмотр 21.09.2026. */
.реплика.человек {
  background: var(--карточка);
  border: 1px solid var(--рамка);
}

.реплика.бот { background: rgba(45, 108, 223, 0.10); }

@media (prefers-color-scheme: dark) {
  .реплика.человек { background: #262d3a; border-color: #333c4d; }
  .реплика.бот { background: rgba(74, 134, 239, 0.16); }
}

.реплика .кто {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--тихий);
}

.реплика.бот .кто { color: var(--главный); }
.реплика .что { font-size: 15px; line-height: 1.45; }
.реплика .малый { font-size: 11px; color: var(--тихий); }
.реплика audio { width: 100%; height: 34px; margin-top: 4px; }

/* Встроенная настройка - та же галочка, но в строке кнопок, а не в сетке
   настроек: там ей нужен только текст справа. */
.настройка.встроенная {
  display: flex;
  gap: 6px;
  align-items: center;
  padding: 0 8px;
  background: none;
}

.настройка.встроенная .зачем { grid-column: auto; }

/* Поле занимает всю строку, а кнопка «Послать» встаёт под ним, если места
   мало. Так подсказка видна целиком: при `min-width: 200px` она обрезалась
   на полуслове («…или напишите реплику и наж») на любой ширине окна, потому
   что колонка карточки узкая сама по себе. */
#реплика-текстом {
  /* Базис 320, а не 100%: в широкой колонке поле и кнопка «Послать» встают в
     одну строку, а в узкой кнопка переносится под поле, и подсказка всё
     равно видна целиком. */
  flex: 1 1 320px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
}

#промпт {
  width: 100%;
  font-size: 13px;
  line-height: 1.5;
}

/* ── Вкладка «Голоса»: склад моделей ──────────────────────────────────────── */

/* Модель карточкой, а не строкой таблицы: у каждой свои голоса, срок и цены, и
   в строку это не укладывается ни на узком окне, ни на широком. */
.модель {
  margin: 12px 0;
  padding: 12px 14px;
  border: 1px solid var(--рамка);
  border-radius: 10px;
  background: var(--карточка);
}

/* Погашенная модель видна сразу и с краю, не вчитываясь: это рубильник, и его
   состояние должно читаться боковым зрением. */
.модель.погашенная {
  border-left: 3px solid var(--беда);
  opacity: 0.75;
}

.строка-модели {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.строка-модели b {
  flex: 1 1 auto;
}

.состояние {
  font-size: 12px;
  color: var(--тихий);
}

.модель.погашенная .состояние {
  color: var(--беда);
}

/* Пометка владельца подписывается отдельно: «погашено вами» и «так в коде» -
   разные вещи, и снять можно только первое. */
.пометка {
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--внимание);
  color: #fff;
  font-size: 11px;
}

.голоса-модели {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.голос-склада {
  padding: 4px 9px;
  border: 1px solid var(--рамка);
  border-radius: 999px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.голос-склада:hover {
  border-color: var(--главный);
}

.голос-склада.погашенный {
  border-color: var(--беда);
  color: var(--беда);
  text-decoration: line-through;
}

.тонко {
  margin-top: 16px;
  font-size: 13px;
}

#ключ-владельца {
  width: 100%;
  max-width: 420px;
  padding: 8px 10px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
}

/* ── Кабинет: вход, проекты, админка ──────────────────────────────────────── */

/* Поля пароля и выбора оформлены заодно с текстовыми. Без этого пароль рядом с
   логином выглядел чужой деталью: узкая рамка браузера против нашей. */
.строка-кнопок input[type="text"],
.строка-кнопок input[type="password"],
.строка-кнопок input[type="date"],
.строка-кнопок select,
#токен-значение {
  flex: 1 1 220px;
  min-width: 0;
  padding: 9px 11px;
  border: 1px solid var(--рамка);
  border-radius: 8px;
  background: var(--фон);
  color: var(--текст);
  font: inherit;
}

/* Токен показывается один раз - значит его надо видеть целиком и уметь
   выделить. Моноширинный шрифт затем, чтобы не спутать «l» с «I»: на первой же
   проверке я прочитал токен со снимка неверно. */
#токен-значение {
  font-family: ui-monospace, "Cascadia Mono", "Consolas", monospace;
  font-size: 13px;
}

/* Полоса «кто вошёл» встаёт в строку с состоянием службы. */
#полоса-входа {
  display: inline-flex;
  gap: 8px;
  align-items: center;
}