/* ============================================================================
   tts.css — кнопка «Озвучить» в нижнем углу пузыря (tts.js).

   Одна кнопка 22×22 живёт в строке .b-meta рядом со временем. Состояние
   задаётся data-state на кнопке, а не классами на потомках: renderMessages()
   пересобирает ленту на каждом WS-событии, и кнопка должна рисоваться верно
   одним атрибутом. Кольцо и иконки — слои одного SVG, лишние скрыты.
   Цвета только через переменные: тёмная тема получается сама.
   ========================================================================== */

/* Отрицательные поля сверху/снизу: строка meta высотой 10px (line-height:1),
   а кнопка 22px. Без них каждый текстовый пузырь стал бы на 12px выше; с ними
   кнопка занимает в потоке те же 10px и выступает по 6px в верхний отступ
   meta (6px) и в нижний паддинг пузыря (8px−2px), ничего не перекрывая.
   Само кольцо при этом 19px (r=9.5 в tts.js) — по ≈1.4px до строки текста
   сверху и до кромки пузыря снизу; на 22px оно упиралось бы в обе. */
.tts-btn{
  width:22px;height:22px;padding:0;margin:-6px 0 -6px -3px;border-radius:50%;
  display:inline-grid;place-items:center;flex:none;position:relative;
  color:inherit;opacity:.8;transition:opacity .15s,background .15s;
  -webkit-tap-highlight-color:transparent;
}
.tts-btn:hover{opacity:1;background:rgba(127,127,127,.16)}
.tts-btn svg{width:22px;height:22px;display:block;overflow:visible}
/* Зона нажатия шире кнопки: за рулём в 22px пальцем не попасть. Сверху
   меньше — там последняя строка текста, и ссылка в её конце не должна
   доставаться динамику. */
.tts-btn::before{content:'';position:absolute;inset:-4px -8px -8px}
/* Динамик в покое во входящем пузыре — --text-2, а не --muted времени рядом:
   это единственный вход в функцию, и сливаться со временем ему нельзя.
   В исходящем цвет meta и так читается. */
.msg-row.in .tts-btn[data-state="idle"]{color:var(--text-2)}

/* Кольца: дорожка, прогресс, спиннер. Длина окружности 2π·9.5 ≈ 59.69 (r —
   в tts.js): прогресс — stroke-dashoffset долей этого числа, спиннер — дуга
   28 % от него. Не через pathLength: на базовых фигурах его понимают не все
   браузеры (Firefox до 106, мобильный Safari), и кольцо там врало бы. */
.tts-btn circle{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;
  transform-box:fill-box;transform-origin:center}
.tts-track{display:none;opacity:.25}
.tts-ring{display:none;stroke-dasharray:59.69;stroke-dashoffset:59.69;transform:rotate(-90deg);
  transition:stroke-dashoffset .2s linear}
.tts-spin{display:none;stroke-dasharray:16.7 43;animation:tts-spin .8s linear infinite}
@keyframes tts-spin{to{transform:rotate(360deg)}}

/* Иконка: динамик по умолчанию, пауза при воспроизведении, плей на паузе */
.tts-i{fill:currentColor}
.tts-i-pause,.tts-i-play{display:none}

.tts-btn[data-state="loading"] .tts-spin{display:block}
.tts-btn[data-state="playing"] .tts-track,.tts-btn[data-state="paused"] .tts-track,
.tts-btn[data-state="playing"] .tts-ring,.tts-btn[data-state="paused"] .tts-ring{display:block}
.tts-btn[data-state="playing"] .tts-i-speaker,.tts-btn[data-state="paused"] .tts-i-speaker{display:none}
.tts-btn[data-state="playing"] .tts-i-pause{display:block}
.tts-btn[data-state="paused"] .tts-i-play{display:block}

/* Активная кнопка — акцентом; в исходящем пузыре акцент слился бы с фоном,
   там берём цвет текста на акценте (как у галочек прочтения). */
.tts-btn[data-state="loading"],.tts-btn[data-state="playing"],.tts-btn[data-state="paused"]{
  color:var(--accent);opacity:1}
.msg-row.out .tts-btn[data-state="loading"],.msg-row.out .tts-btn[data-state="playing"],
.msg-row.out .tts-btn[data-state="paused"]{color:var(--on-accent)}
/* Ошибка: короткая подсветка. Подложка --overlay нужна на оранжевом пузыре,
   где красный сам по себе не читается. */
.tts-btn[data-state="error"]{color:var(--danger);opacity:1;background:var(--overlay)}