/* ════════════════════════════════════════════════════════════════════════════
   Vamos Draws — раздел «🔔 Уведомления»: ОДИН вид на весь сайт.

   🔴 ЗАЧЕМ ОТДЕЛЬНЫЙ ФАЙЛ. У проекта два набора стилей: `static/assets/vd-app.css`
   (оболочка приложения) и питоновские строки `_SSR_CSS`/`_NAV_CSS` (серверные
   страницы). Пока раздел рисовали два кода, он и выглядел по-разному — 06.09.2026
   владелец открыл «избранные» со страницы игрока и не нашёл там переключателя
   уведомлений вовсе, потому что тот жил только в оболочке.
   Этот файл читают ОБА: оболочка ссылкой из `index.html`, серверные страницы —
   через `_CSS_BUNDLES` (`app.py` подмешивает его содержимое с диска). Значит вид
   раздела задан ровно одним местом и разъехаться ему не на чем.

   🔴 Классы здесь СВОИ (`vda-`), а не переиспользуют `.sheet`/`.sheet2`: те два
   набора и есть разошедшиеся копии, и опираться на них значило бы унаследовать
   расхождение. Цвета берём из общих токенов `vd-tokens.css`, с запасными
   значениями — серверные страницы токены грузят не все.
   ════════════════════════════════════════════════════════════════════════════ */

.vda-ovl {
  position: fixed; inset: 0; z-index: 90; display: none;
  background: rgba(0, 0, 0, .45); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px);
  padding: 16px; overflow-y: auto;
}
.vda-ovl.open { display: block; }
/* 🔴 ТОКЕНА `--fg` В ПРОЕКТЕ НЕТ И НИКОГДА НЕ БЫЛО — цвет текста зовётся `--ink`
   (`vd-tokens.css`). `color: var(--fg, #14201c)` поэтому ВСЕГДА брал запасное значение, то есть
   почти чёрный. В светлой теме это совпадало с правдой и дефект был не виден; в тёмной
   `--card` = #17211d, и весь лист уведомлений превращался в чёрный текст на чёрной панели —
   владелец 08.09.2026 прислал снимок, где видны только галочки и переключатель.
   🔴 Это ВТОРОЙ раз в этом же файле: 06.09.2026 ровно так же вылезла полоса `.vda-cta`, и
   тогда я починил только её, оставив лист с той же болезнью. Поэтому здесь и токен верный,
   и явная тёмная ветка — как у соседа ниже. */
.vda-sheet {
  background: var(--card, #fff); color: var(--ink, #13211d);
  max-width: 520px; margin: auto; border-radius: 18px; padding: 18px 18px 14px;
  position: relative; box-shadow: 0 18px 50px rgba(0, 0, 0, .3);
}
.vda-x {
  position: absolute; top: 10px; right: 10px; width: 34px; height: 34px;
  border: 0; background: transparent; color: inherit; font-size: 26px; line-height: 1;
  cursor: pointer; border-radius: 50%; opacity: .6;
}
.vda-x:hover { opacity: 1; background: rgba(128, 128, 128, .15); }
.vda-h { margin: 0 34px 2px 0; font-size: 19px; font-weight: 800; }
.vda-sub { margin: 0 0 12px; font-size: 13px; opacity: .7; }

/* переключатель «алерты вкл/выкл» */
.vda-row {
  display: flex; align-items: center; gap: 12px; justify-content: space-between;
  padding: 12px 0; border-top: 1px solid var(--line, #e3e9e6);
}
.vda-row:first-of-type { border-top: 0; }
.vda-info { min-width: 0; }
.vda-rh { font-weight: 800; font-size: 14px; }
.vda-rs { font-size: 12.5px; opacity: .7; margin-top: 2px; }
.vda-toggle {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  border: 1px solid var(--line, #e3e9e6); background: var(--bg, #f4f7f6); color: inherit;
  border-radius: 999px; padding: 6px 12px 6px 6px; font: inherit; font-weight: 700;
}
.vda-toggle[disabled] { opacity: .55; cursor: default; }
.vda-knob {
  width: 18px; height: 18px; border-radius: 50%; background: #9aa6a2; flex: 0 0 auto;
  transition: background .15s;
}
.vda-toggle.on { border-color: var(--brand, #0b8f6a); color: var(--brand, #0b8f6a); }
.vda-toggle.on .vda-knob { background: var(--brand, #0b8f6a); }

/* список «что именно присылать» */
.vda-list { margin-top: 6px; }
.vda-item {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 9px 0; font-size: 13.5px; cursor: pointer;
  border-top: 1px solid var(--line, #e3e9e6);
}
.vda-item input { flex: 0 0 auto; width: 18px; height: 18px; accent-color: var(--brand, #0b8f6a); cursor: pointer; }
.vda-grp {
  font-weight: 800; font-size: 12.5px; opacity: .65;
  margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--line, #e3e9e6);
}
.vda-hint {
  display: block; font-size: 12.5px; font-weight: 700; padding: 4px 0 2px;
  color: var(--brand, #0b8f6a); text-decoration: none;
}
.vda-hint:hover { text-decoration: underline; }

/* 🔔 самопроверка доставки: кнопка и строка ответа под ней */
.vda-test {
  display: inline-flex; align-items: center; gap: 8px; margin: 10px 0 0; cursor: pointer;
  padding: 8px 14px; border-radius: 999px; font: inherit; font-size: 13px; font-weight: 700;
  border: 1px solid var(--line, #e3e9e6); background: var(--card, #fff); color: inherit;
}
.vda-test:disabled { opacity: .55; cursor: default; }
.vda-said { font-size: 12.5px; opacity: .75; margin-top: 6px; min-height: 1em; }

/* 🗒 история уведомлений на самом сайте (Напарник #188): до 13.09.2026 её видели только
   владельцы расширения, а пуш, который смахнули или не получили, исчезал навсегда */
.vda-feed { margin-top: 2px; }
.vda-fi {
  display: block; padding: 9px 0 9px 12px; text-decoration: none; color: inherit;
  border-top: 1px solid var(--line, #e3e9e6); position: relative;
}
/* Непрочитанное помечено полосой слева, а не цветом текста: цвет спорит с самим текстом
   уведомления, а полоса читается и на тёмной теме, и боковым зрением. */
.vda-fi.un::before {
  content: ""; position: absolute; left: 0; top: 11px; width: 4px; height: 4px;
  border-radius: 50%; background: var(--brand, #0b8f6a);
}
.vda-ft { font-size: 13.5px; font-weight: 700; }
.vda-fi.un .vda-ft { font-weight: 800; }
.vda-fb { font-size: 12.5px; opacity: .8; margin-top: 1px; }
.vda-fw { font-size: 11.5px; opacity: .55; margin-top: 2px; }
.vda-fall {
  display: inline-flex; margin-top: 10px; cursor: pointer; padding: 7px 13px;
  border-radius: 999px; font: inherit; font-size: 12.5px; font-weight: 700;
  border: 1px solid var(--line, #e3e9e6); background: var(--card, #fff); color: inherit;
}
.vda-fall:disabled { opacity: .55; cursor: default; }
html[data-theme=dark] .vda-fi { border-color: #27332e; }
html[data-theme=dark] .vda-fall { border-color: #27332e; background: #16211c; }

/* полоса-приглашение включить уведомления */
.vda-cta {
  display: flex; align-items: center; gap: 10px; margin: 10px 0 4px;
  padding: 10px 12px; border-radius: 14px;
  background: var(--card, #fff); border: 1px solid var(--line, #e3e9e6);
}

/* 🔴 `display:flex` выше ПЕРЕБИВАЕТ атрибут `hidden` (у обоих вес 0,1,0, а этот файл
   грузится позже базового сброса), и скрытая полоса оставалась на экране пустой белой
   плашкой 22 px. На светлой теме её не видно — белое на белом, — а на тёмной она светит
   поперёк страницы. Поймано глазами на снимке гостя 06.09.2026; полоса вставляется на
   КАЖДУЮ серверную страницу, значит светила везде. */
.vda-cta[hidden] { display: none; }

/* 🔴 Тёмная тема ЯВНО, а не через токены: `var(--card,#fff)` на серверных страницах всегда
   берёт запасное значение — токены `vd-tokens.css` грузит только оболочка приложения. Полоса
   выходила белой карточкой, а текст в ней наследовал светлый цвет тёмной темы: «установите
   приложение» серым по белому. Видно на снимке iPhone 06.09.2026. */
html[data-theme=dark] .vda-cta {
  background: #17211d; border-color: #27332e; color: #e7efea;
}
/* Тот же приём для САМОГО листа: на серверных страницах токенов нет, а тёмная тема есть. */
html[data-theme=dark] .vda-sheet {
  background: #17211d; color: #e7efea;
}
html[data-theme=dark] .vda-item { border-color: #27332e; }
html[data-theme=dark] .vda-row { border-color: #27332e; background: #0e1714; }
/* 🔴 ТРЕТИЙ РАЗ ТОТ ЖЕ КЛАСС БАГА (13.09.2026): тумблер и кнопка самопроверки остались
   на токенах и потому светили почти белым, а текст наследовал светлый #e7efea листа —
   светлое по светлому. Здесь перечислены ВСЕ оставшиеся узлы файла, которые красятся
   через `var(--card,#fff)`/`var(--bg,#f4f7f6)`, а не только те два, с которых начали:
   четвёртого такого узла в файле нет (ревизия по `var(--card|--bg|--line`). */
html[data-theme=dark] .vda-toggle { background: #0e1714; border-color: #27332e; color: #e7efea; }
html[data-theme=dark] .vda-test { background: #17211d; border-color: #27332e; color: #e7efea; }
.vda-cta .vda-ctx { flex: 1 1 auto; min-width: 0; }
.vda-cta b { display: block; font-size: 13.5px; }
.vda-cta span { display: block; font-size: 12.5px; opacity: .7; }
.vda-go {
  flex: 0 0 auto; border: 0; border-radius: 999px; padding: 9px 16px; cursor: pointer;
  background: var(--brand, #0b8f6a); color: #fff; font: inherit; font-weight: 800;
}
.vda-go[disabled] { opacity: .6; cursor: default; }
.vda-close {
  flex: 0 0 auto; width: 30px; height: 30px; border: 0; background: transparent;
  color: inherit; font-size: 22px; line-height: 1; cursor: pointer; opacity: .5;
}
.vda-close:hover { opacity: 1; }

/* ❓ ЛИСТ ПОДТВЕРЖДЕНИЯ И «СКОПИРУЙТЕ ССЫЛКУ» — вместо `confirm()` и `prompt()`.
   🔴 Повод (13.09.2026, снимок владельца): «zhedor.com says… OK / Cancel» посреди тёмной
   страницы. Системная коробка не знает наших шрифтов, цветов и темы, не переводится и на
   телефоне выглядит окном браузера, а не продуктом. Разметку рисует `VD.ask` / `VD.shareLink`
   поверх той же подложки, что и лист уведомлений (`.vda-ovl` / `.vda-sheet`), — второй копии
   оформления у диалогов не будет.
   🔴 Лист стоит ПОВЕРХ листа уведомлений (z-index выше `.vda-ovl`): подтверждение может
   спрашиваться из уже открытого листа, и уехать под него оно не вправе. */
/* 🔴 Селектор с `.vda-ovl.open`, а не просто `.vdq`: у листа уведомлений правило
   `.vda-ovl.open{display:block}` специфичнее одного класса, и подтверждение прилипало к
   верхнему краю экрана вместо середины (видно только на снимке). */
.vda-ovl.vdq.open { z-index: 120; display: flex; align-items: center; }
.vdq-sheet { max-width: 420px; }
.vdq-acts { display: flex; gap: 10px; justify-content: flex-end; margin-top: 16px; }
.vdq-btn {
  cursor: pointer; border-radius: 999px; padding: 10px 18px; font: inherit; font-weight: 800;
  font-size: 13.5px; border: 1px solid var(--line, #e3e9e6); background: transparent;
  color: var(--ink, #13211d);
}
.vdq-btn:hover { border-color: var(--brand-2, #0b8f6a); }
/* согласие — заливкой, отказ — рамкой: цена действий разная, и выглядеть они одинаково не должны */
.vdq-btn.go { border-color: transparent; background: var(--brand, #0b8f6a); color: #fff; }
.vdq-btn.go.warn { background: #b3324a; }
.vdq-link {
  width: 100%; margin-top: 10px; padding: 10px 12px; border-radius: 12px;
  border: 1px solid var(--line, #e3e9e6); background: var(--bg, #f4f7f6);
  color: var(--ink, #13211d); font: inherit; font-size: 13px;
}
html[data-theme=dark] .vdq-btn { border-color: #27332e; color: #e7efea; }
html[data-theme=dark] .vdq-link { background: #0e1714; border-color: #27332e; color: #e7efea; }

/* ══════════════════════════ 🌐 ВЫБОР ЯЗЫКА — ОДИН ВИД НА ОБА ФРОНТА ══════════════════════════
   Переключателя TH/EN в шапке больше нет (13.09.2026, решение владельца: «убрать вообще, чтобы
   освободить место»). Осталось три места, и все три рисует `vd-core.js`:
     · `.vdlang`    — лист выбора из четырёх языков (`VD.langSheet`);
     · `.vdlangbar` — ОДНОРАЗОВАЯ полоска тому, чьего языка у нас нет (`VD.langBar`);
     · `.flang`     — кнопка в подвале, с виду такая же ссылка, как соседние.
   🔴 Правила лежат ЗДЕСЬ, а не в стилях страницы: подвал печатают три разных набора (серверные
   страницы, сетка, оболочка), и копия в каждом означала бы три расходящихся вида одной кнопки.
   Имена языков написаны САМИ СОБОЙ («Русский», а не «Russian»): человек, попавший не на свой
   язык, ищет глазами знакомые буквы, а не перевод слова «язык» на чужой ему язык. */
.vdlang { max-width: 340px; }
.vdlang-b {
  display: block; width: 100%; margin-top: 8px; cursor: pointer; font: inherit;
  font-weight: 800; font-size: 15px; padding: 12px 16px; border-radius: 14px;
  border: 1px solid var(--line, #e3e9e6); background: transparent; color: var(--ink, #13211d);
  text-align: left;
}
.vdlang-b:hover { border-color: var(--brand-2, #0b8f6a); }
/* текущий язык — заливкой: лист обязан отвечать «где я сейчас», а не только «куда можно» */
.vdlang-b.on { border-color: transparent; background: var(--brand, #0b8f6a); color: #fff; }
html[data-theme=dark] .vdlang-b { border-color: #27332e; color: #e7efea; }

/* 🔴 Полоска фиксирована СВЕРХУ и поверх всего: она появляется ровно один раз в жизни
   посетителя и живёт до первого касания — ни ради неё двигать вёрстку страницы, ни ждать,
   пока человек долистает до подвала, не стоит. Крестик закрывает её навсегда. */
.vdlangbar {
  position: fixed; inset: 0 0 auto 0; z-index: 300; display: flex; flex-wrap: wrap;
  align-items: center; gap: 6px; padding: 8px 10px;
  background: var(--card, #fff); border-bottom: 1px solid var(--line, #e3e9e6);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .14);
}
.vdlb-ic { font-size: 15px; line-height: 1; }
.vdlb-b {
  cursor: pointer; font: inherit; font-weight: 800; font-size: 12.5px; line-height: 1;
  padding: 8px 11px; border-radius: 999px; border: 1px solid var(--line, #e3e9e6);
  background: transparent; color: var(--ink, #13211d);
}
.vdlb-b.on { border-color: transparent; background: var(--brand, #0b8f6a); color: #fff; }
.vdlb-x {
  margin-left: auto; cursor: pointer; font: inherit; font-size: 20px; line-height: 1;
  border: 0; background: none; color: var(--muted, #7c8f88); padding: 4px 8px;
}
html[data-theme=dark] .vdlangbar { background: #17211d; border-bottom-color: #22302a; }
html[data-theme=dark] .vdlb-b { border-color: #27332e; color: #e7efea; }

/* Кнопка языка в подвале: ведёт себя как ссылка рядом, но остаётся кнопкой — адресов
   `?lang=ru|zh` в разметке быть не должно, эти версии закрыты от индексации. */
.sitefooter .flang {
  background: none; border: 0; padding: 0; font: inherit; font-weight: 700;
  color: #6a7b76; cursor: pointer;
}
.sitefooter .flang:hover { color: #076c50; }