/*
 * Фильтр минус-слов, вариант «Б. Облако слов и корзина»: частые слова крупнее, клик отправляет слово в корзину,
 * корзина прилипает к низу экрана. Вид — из макета, кнопки — .btn темы, цвета — токены темы. Своё — с префиксом mn-
 * внутри .sst-minus: короткие классы макета (.bar, .tip, .row) совпали бы с классами темы.
 * Раскладка не зависит от ширины экрана: облако и списки переносятся сами, блок работает от 320 px
 * и в правой колонке раздела «Инструменты».
 */

.sst-minus {
  /* цвета минус-слов: на всех белый текст с контрастом от 4.9:1 (из макета) */
  --m0: #c2410c; --m1: #7c3aed; --m2: #0f766e; --m3: #be123c; --m4: #1d4ed8; --m5: #a16207; --m6: #a21caf; --m7: #15803d;
  --m8: #0e7490; --m9: #b91c1c; --m10: #6d28d9; --m11: #4d7c0f; --m12: #9d174d; --m13: #0369a1; --m14: #854d0e; --m15: #4338ca;
  --mn-leak: #d8483a;
  --mn-leak-tint: #fde9e7;
  --mn-flow-tint: #e8eeff;
  display: grid;
  gap: 18px;
  min-width: 0;
}

.sst-minus p { max-width: none; margin: 0; }
.sst-minus button { cursor: pointer; }
.sst-minus button:disabled { cursor: default; opacity: 0.45; }

.sst-minus .mn-h {
  margin: 0;
  font: 700 15px/1.25 var(--font-display, inherit);
  letter-spacing: 0;
}

.mn-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; min-width: 0; }
.mn-row.mn-between { justify-content: space-between; }
.mn-hint { font-size: 12.5px; color: var(--fg-dim); }
.mn-info { font-size: 13px; color: var(--fg-dim); }
.mn-info b { color: var(--fg); font-weight: 600; }
.mn-info:empty { display: none; }

.mn-chk { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--fg-soft); cursor: pointer; }
.mn-chk input { width: 16px; height: 16px; margin: 0; accent-color: var(--ink, #121a2b); }

/* поле запросов */
.mn-src { display: grid; gap: 10px; }
.mn-label { font-size: 13.5px; color: var(--fg-soft); }

.mn-src textarea {
  width: 100%;
  min-width: 0;
  height: 110px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--bg);
  color: var(--fg);
  font: 13px/1.45 var(--sst-mono);
  tab-size: 8;
  resize: vertical;
}

.mn-src textarea:focus { outline: 2px solid var(--flow, #4c7dff); outline-offset: 1px; border-color: transparent; background: var(--surface); }
.mn-src textarea::placeholder { color: var(--fg-dim); opacity: 1; }

/* переключатель «формат», «все / останутся / уйдут» */
.mn-seg { display: inline-flex; flex-wrap: wrap; gap: 2px; max-width: 100%; padding: 3px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); }
.mn-seg button { padding: 8px 11px; border: 0; border-radius: 9px; background: transparent; color: var(--fg-soft); font-size: 13.5px; font-weight: 600; }
.mn-seg button[aria-pressed="true"] { background: var(--ink, #121a2b); color: #fff; }
.mn-seg button small { margin-left: 4px; font: 600 11.5px/1 var(--sst-mono); opacity: 0.75; }

/* облако */
.mn-cloud {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2px 10px;
  min-height: 160px;
  padding: 14px 6px;
  border: 1px solid var(--line);
  border-radius: 18px;
  background: radial-gradient(ellipse at 50% 40%, #fff 0%, var(--bg) 100%);
}

.mn-cw {
  max-width: 100%;
  padding: 2px 6px;
  border: 0;
  border-radius: 10px;
  background: transparent;
  color: var(--fg);
  font-family: var(--font-text, inherit);
  font-size: var(--s);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.mn-cw.is-lo { color: var(--fg-soft); font-weight: 500; }
.mn-cw.is-stop { color: var(--fg-dim); font-style: italic; }
.mn-cw:hover { background: var(--mn-flow-tint); color: var(--flow-ink, #2f5be0); }

/* корзина: прилипает к низу экрана и поднимается над баннером cookie, чатом и кнопками сайта (--mn-lift из minus.js) */
.mn-bin {
  position: sticky;
  z-index: 4;
  bottom: max(calc(10px + env(safe-area-inset-bottom, 0px)), var(--mn-lift, 0px));
  display: grid;
  gap: 8px;
  max-height: 42vh;
  overflow: auto;
  padding: 12px;
  border: 1.5px dashed var(--sst-line-strong);
  border-radius: 18px;
  background: var(--surface);
  box-shadow: 0 14px 34px rgba(11, 19, 36, 0.14);
}

.mn-binhead { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 8px; }
.mn-bin.is-pulse { animation: mn-pulse 0.5s var(--ease-out, ease); }
@keyframes mn-pulse { 40% { border-color: var(--mn-leak); background: var(--mn-leak-tint); } }

.mn-bar { height: 6px; overflow: hidden; border-radius: 99px; background: var(--surface-2); }
.mn-bar i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--mn-leak); transition: width 0.35s var(--ease-out, ease); }

.mn-chips { display: flex; flex-wrap: wrap; gap: 6px; }

.mn-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
  padding: 7px 10px 7px 12px;
  border: 0;
  border-radius: 999px;
  background: var(--c);
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  overflow-wrap: anywhere;
  text-align: left;
}

.mn-chip::after { content: "×"; font-size: 15px; opacity: 0.8; }
.mn-chip:hover::after { opacity: 1; }
.mn-chip i { font: 12px/1 var(--sst-mono); font-style: normal; opacity: 0.85; }

.mn-fly {
  position: fixed;
  z-index: 35;
  margin: 0;
  padding: 7px 12px;
  border-radius: 999px;
  color: #fff;
  font: 600 13.5px/1 var(--font-text, inherit);
  white-space: nowrap;
  pointer-events: none;
}

/* подсказки */
.mn-tip { padding: 10px 12px; border-radius: 12px; background: var(--mn-flow-tint); color: #233f9e; font-size: 13.5px; }
.mn-tip.is-stop { background: var(--signal-soft, #fff1d6); color: #6b4200; }
.mn-tip b { font-weight: 600; }

/* копирование */
.mn-copy { display: grid; gap: 10px; }

.mn-exp {
  min-height: 42px;
  max-height: 132px;
  margin: 0;
  overflow: auto;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--night, #0b1324);
  color: #dfe6f7;
  font: 13px/1.55 var(--sst-mono);
  white-space: pre-wrap;
  overflow-wrap: anywhere;
}

.mn-exp:empty::before { content: "Минус-слова появятся здесь"; color: #8a96b3; }
.mn-over { color: #9c2a1f; }

.sst-minus .mn-status {
  min-height: 1.4em;
  font-size: 0.9rem;
  font-weight: 600;
  color: #11684a;
  opacity: 0;
  transition: opacity 0.25s var(--ease-out, ease);
}

.sst-minus .mn-status.is-on { opacity: 1; }

/* фразы */
.mn-plist {
  display: grid;
  align-content: start;
  gap: 6px;
  max-height: 560px;
  overflow: auto;
  overscroll-behavior: contain;
  padding: 2px 4px 2px 0;
}

.mn-ph {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 7px 11px;
  border: 1px solid var(--line);
  border-radius: 11px;
  background: var(--surface);
  font-size: 14.5px;
  line-height: 1.6;
  /* фразы за краем списка не верстаются, пока до них не докрутят: 1000 строк собираются вдвое быстрее */
  content-visibility: auto;
  contain-intrinsic-size: auto 42px;
}

.mn-t { min-width: 0; overflow-wrap: anywhere; }
.mn-n { flex: none; font: 12px/1.4 var(--sst-mono); color: var(--fg-dim); white-space: nowrap; }
.mn-ph.is-cut { border-color: transparent; background: var(--bg); }
.mn-ph.is-cut .mn-t { color: var(--fg-dim); text-decoration: line-through; text-decoration-color: rgba(18, 26, 43, 0.4); }
.mn-w { margin: 0 -2px; padding: 0 2px; border-radius: 5px; cursor: pointer; }
.mn-w:hover { background: var(--mn-flow-tint); color: var(--flow-ink, #2f5be0); }
.mn-w.is-on { display: inline-block; margin: 0 -1px; padding: 0 5px; background: var(--c); color: #fff; line-height: 1.45; text-decoration: none; }
.mn-empty { padding: 14px; border: 1px dashed var(--sst-line-strong); border-radius: 12px; color: var(--fg-dim); font-size: 14px; text-align: center; }

/* окно ручного копирования: только когда браузер запретил и буфер, и execCommand */
.mn-manual {
  position: fixed;
  z-index: 2147483200;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: max(16px, env(safe-area-inset-bottom, 0px));
  left: max(16px, env(safe-area-inset-left, 0px));
  display: grid;
  gap: 10px;
  max-width: 560px;
  margin: 0 auto;
  padding: 14px;
  border: 1px solid var(--sst-line-strong);
  border-radius: 16px;
  background: var(--surface);
  color: var(--fg);
  box-shadow: 0 20px 50px rgba(11, 19, 36, 0.25);
}

.mn-manual p { font-size: 14px; }
.mn-manual textarea { height: 140px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); font: 13px/1.5 var(--sst-mono); }

@container sst-tool (max-width: 600px) {
  .mn-ph { font-size: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sst-minus *,
  .sst-minus *::before,
  .sst-minus *::after {
    transition: none !important;
    animation: none !important;
  }
}