/**
 * free-tier.css
 * What changes on screen in the free version (js/free-tier.js puts .ts-free
 * on <html> once the trial is over). Nothing here hides a free feature;
 * Premium controls stay visible, marked, so tapping one opens the upgrade.
 *
 * Identical in all three copies (desktop, web, Android).
 */

:root {
  --ts-free-badge-bg: #9b1b30;
  --ts-free-badge-fg: #ffffff;
}

/* ============================================
   HIDDEN: nothing to switch on in the free version
   ============================================ */

/* Feature switches can only turn on Premium features. */
.ts-free [data-fn="__switches"] {
  display: none !important;
}

/* ============================================
   MARKED: Premium, opens the upgrade when tapped
   ============================================ */

.ts-free #dropdownTrigger::after,
.ts-free #tsSaveFull span::after,
.ts-free #tsSaveSelection span::after,
.ts-free #ttsRecordFull::after,
.ts-free #ttsRecordSelection::after,
.ts-free [data-fn="__tools"] span:first-of-type::after,
.ts-free [data-fn="__ai"] span::after,
.ts-free [data-fn="AIFeatures.openAIToolsMenu"] span::after {
  content: "Premium";
  display: inline-block;
  margin-left: 0.5em;
  padding: 0.1em 0.5em;
  border-radius: 999px;
  background: var(--ts-free-badge-bg);
  color: var(--ts-free-badge-fg);
  font-size: 0.7em;
  font-weight: 700;
  letter-spacing: 0.02em;
  vertical-align: middle;
}