/* Тап по слову в реплике Polly.

   Главная задача оформления — показать, что слова вообще кликабельны. Без этого фича
   невидима: человек не догадается тапнуть по обычному тексту. На десктопе это решает
   наведение, на телефоне наведения нет, поэтому там подсказку даёт первый же тап
   (слово подсвечивается сразу, ещё до ответа сервера). */
.tw {
  cursor: pointer;
  border-radius: 3px;
  /* Переход только по цвету и фону: раскладку не трогаем, иначе текст «дышал» бы под курсором. */
  transition: background-color 120ms ease-out, color 120ms ease-out;
}

/* Только там, где наведение настоящее: на тач-экранах :hover «залипает» после тапа,
   и слово осталось бы подсвеченным, будто выбрано. */
@media (hover: hover) {
  .tw:hover {
    color: var(--color-accent);
    background: color-mix(in srgb, var(--color-accent) 12%, transparent);
  }
}

/* Выбранное слово — пока идёт окно склейки и запрос. Заметнее наведения: человек должен
   видеть, что именно уйдёт в словарь, особенно когда собирает выражение из двух слов. */
.tw--sel {
  color: #fff;
  background: var(--color-accent);
}

/* Уже добавленное — тихая метка, чтобы не тапнуть второй раз. */
.tw--added {
  color: var(--color-accent);
  border-bottom: 1.5px dashed var(--color-accent);
}

.tw-card { margin: 6px 0 0 44px; }          /* по левому краю пузыря, мимо аватара */

.tw-card__inner {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  background: var(--color-bg);
  border: 1px solid color-mix(in srgb, var(--color-accent) 30%, transparent);
  border-radius: 14px;
  padding: 8px 12px;
  max-width: 100%;
}

.tw-card__word { font-weight: 700; color: var(--color-text-primary); }
.tw-card__ru   { color: var(--color-text-primary); }
.tw-card__ru--wait { color: var(--color-text-secondary); }
.tw-card__note { font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.tw-card__undo {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 4px 10px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.tw-card__undo:active   { background: var(--color-bg-sidebar); }
.tw-card__undo:disabled { opacity: .5; cursor: default; }

@media (max-width: 600px) {
  .tw-card { margin-left: 0; }
}

/* ─── Разбор слова: перевод, фраза Polly с ним и её перевод ───
   Тап ничего не добавляет — карточка отвечает на вопрос «что это значит», который
   задают куда чаще, чем «хочу это выучить». Добавление отдельной кнопкой. */
.tw-card__inner { display: block; }

.tw-card__head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.tw-card__speak {
  margin-left: auto; background: none; border: none; cursor: pointer;
  font-size: 16px; line-height: 1; padding: 2px 4px;
}

/* Пример — та самая фраза Polly, в которой человек тапнул слово. Живой контекст, который
   он только что прочитал, запоминается лучше выдуманного примера. */
.tw-card__ex   { margin-top: 8px; font-style: italic; color: var(--color-text-primary); }
.tw-card__exru { margin-top: 2px; font-size: var(--font-size-sm); color: var(--color-text-secondary); }

.tw-card__foot { margin-top: 10px; }
.tw-card__act {
  background: none;
  border: 1px solid var(--color-border);
  border-radius: var(--radius-full);
  padding: 6px 14px;
  font-size: var(--font-size-sm);
  color: var(--color-text-primary);
  cursor: pointer;
}
.tw-card__act:active   { background: var(--color-bg-sidebar); }
.tw-card__act:disabled { opacity: .5; cursor: default; }

/* Кнопка подписки в карточке лимита — акцентная: это единственное место, где карточка
   что-то предлагает, а не отвечает на вопрос. */
.tw-card__act--pro {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: #fff;
  font-weight: 600;
}