/* Надстройка над общим блоком пузырей (.bubble-wrap в theme.css) для
   страниц с озвученным диалогом. Сами пузыри тут не переопределяются:
   вёрстка у диалогов одна на весь сайт. Здесь только то, чего в общем
   блоке нет - панель со сплошным проигрыванием и подсветка звучащей
   реплики. */

.dlg { max-width: 660px; margin: 1rem auto 0; }

.dlg-bar {
  display: flex;
  align-items: center;
  gap: .7rem;
  flex-wrap: wrap;
  margin-bottom: .5rem;
}

.dlg-all {
  border: 1px solid var(--color-turquoise, #1A9BA1);
  background: var(--color-white, #fff);
  color: var(--color-turquoise, #1A9BA1);
  border-radius: 999px;
  padding: .45rem 1.05rem;
  font: inherit;
  font-size: .92rem;
  font-weight: 700;
  cursor: pointer;
  transition: background .15s, color .15s;
}
.dlg-all:hover { background: var(--color-turquoise, #1A9BA1); color: #fff; }

.dlg-hint {
  font-size: .85rem;
  color: var(--muted, #5c6b64);
}

/* Звучащая реплика. Подсвечивается пузырь целиком, а не текст: на телефоне
   рамка вокруг короткой строки теряется. */
.bubble.dlg-on .btxt {
  border-color: var(--color-turquoise, #1A9BA1);
  box-shadow: 0 0 0 3px rgba(26, 155, 161, .16);
}

/* Кнопка звука стоит внутри турецкой строки, перед текстом: так же, как в
   списках лексики, чтобы значок везде означал одно и то же. */
.btr .say { margin-right: .1em; }