/* ============================================================
   16-fx.css — v5 ALT
   Содержимое:
   [1] Панель «Визуальные эффекты» в опциях (выпадающее меню)
   [2] Kill-правила: отключение заднего фона / размытий / анимации / эффектов
   [3] Задник (aurora + блик) карточек уведомлений .sys-msg
   [4] Плашка «Уведомления» + 3 кнопки = стиль плашки «Информация об аккаунте» (.hero-pill)
       + иконки-таблетки: колокол (Уведомления) / коробка (Архив)
   [5] Мобильные кнопки: не растягиваются по краям, «летающий» стиль
   [6] Модалки оценки/пинга: поверх шторки + квадратная иконка
   [7] Выпадающее меню уведомлений (Архив + Фильтры + Рассылки) — флэт-дизайн, SVG-иконки
   ============================================================ */

/* ============ [1] ПАНЕЛЬ «ВИЗУАЛЬНЫЕ ЭФФЕКТЫ» ============ */
.opt-item.fx-toggle .opt-chevron{transition:transform .3s ease}
.opt-item.fx-toggle.open .opt-chevron{transform:rotate(90deg)}
.fx-panel{max-height:0;overflow:hidden;opacity:0;margin:0 8px;transition:max-height .35s ease,opacity .28s ease,margin .35s ease}
.fx-panel.open{max-height:320px;opacity:1;margin:2px 8px 10px}
.fx-panel-inner{border:1px solid var(--border-light);border-radius:14px;background:var(--surface);padding:6px}
.fx-row{display:flex;align-items:center;gap:12px;width:100%;background:transparent;border:none;color:var(--text);padding:11px 12px;border-radius:10px;cursor:pointer;font-family:'Inter',sans-serif;font-size:14px;text-align:left;transition:background .2s ease}
.fx-row:hover{background:var(--surface-hover)}
.fx-row-label{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0}
.fx-row-title{font-size:14px;font-weight:600}
.fx-row-sub{font-size:11px;color:var(--text-muted);line-height:1.35}
.fx-check{width:22px;height:22px;border-radius:7px;border:1.5px solid var(--border-heavy);background:var(--surface);display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .2s ease,border-color .2s ease,color .2s ease;color:transparent}
.fx-check svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.fx-row.on .fx-check{background:var(--text);border-color:var(--text);color:var(--bg)}
/* индigo-иконка для пункта «Визуальные эффекты» */
.opt-icon.i-indigo{background:rgba(138,120,255,.12);color:#8a7dff;border-color:rgba(138,120,255,.3)}
[data-theme="light"] .opt-icon.i-indigo{background:rgba(138,120,255,.14);color:#5f4fd8;border-color:rgba(138,120,255,.35)}

/* ============ [2] KILL-ПРАВИЛА ОТКЛЮЧЕНИЯ ЭФФЕКТОВ ============ */
/* --- ЗАДНИЙ ФОН: canvas-волны/звёзды и дневное небо. Точки дней подписки (.dots-wrapper) — КОНТЕНТ, не трогаем! --- */
body.fx-no-bg #waveCanvas,body.fx-no-bg #daySky{display:none!important}

/* --- РАЗМЫТИЯ: снять все backdrop-filter, подложки становятся плотными (читаемость сохраняется) --- */
body.fx-no-blur *,body.fx-no-blur *::before,body.fx-no-blur *::after{backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
body.fx-no-blur{--surface:rgba(23,23,26,.94);--surface-hover:rgba(36,36,41,.96);--surface-active:rgba(29,29,34,.95);--pill-bg:rgba(23,23,26,.94);--pill-bg-hover:rgba(36,36,41,.97)}
[data-theme="light"] body.fx-no-blur{--surface:rgba(255,255,255,.95);--surface-hover:rgba(255,255,255,.99);--surface-active:rgba(255,255,255,.97);--pill-bg:rgba(255,255,255,.95);--pill-bg-hover:rgba(255,255,255,.99)}

/* --- v5.6: ПЛОТНЫЕ ПОДЛОЖКИ ВМЕСТО РАЗМЫТИЙ.
   У панелей ниже фон прописан вручную полупрозрачным rgba (0.3-0.45) + backdrop-filter:
   kill-правило снимает блюр, и панель выглядит «без фона». Плотним ДО 0.95
   (НЕ до 1.0 — лёгкая прозрачность сохранена намеренно), RGB исходный.
   Порядок важен: тёмные правила -> светлые (они специфичнее и перекрывают). --- */
body.fx-no-blur .settings-sheet,
body.fx-no-blur .ticket-modal,
body.fx-no-blur .rating-modal,
body.fx-no-blur .ping-modal,
body.fx-no-blur .confirm-modal,
body.fx-no-blur #chatContainer,
body.fx-no-blur .ticket-header,
body.fx-no-blur .chat-input-area,
body.fx-no-blur .nav-left{background:rgba(0,0,0,.95)}
/* пузыри чата: белый тинт .1/.05 на тёмной теме под плотную версию заменяем тёмным
   (белый .95 был бы нечитаем с белым текстом); 23/18 сохраняют разницу user/admin */
body.fx-no-blur .msg-content{background:rgba(23,23,26,.95)}
body.fx-no-blur .msg.admin .msg-content{background:rgba(18,18,21,.95)}
/* док: v5 liquid glass — при выключенном блюре стекло уплотняется (читаемость) */
body.fx-no-blur .bottom-nav{--dock-bg:rgba(16,16,20,.96)}
/* «голая» кнопка подтверждения: единственная подложка была блюром */
body.fx-no-blur .confirm-btn:not(.danger):not(.neutral){background:rgba(23,23,26,.95)}
[data-theme="light"] body.fx-no-blur .settings-sheet,
[data-theme="light"] body.fx-no-blur .ticket-modal,
[data-theme="light"] body.fx-no-blur .rating-modal,
[data-theme="light"] body.fx-no-blur .ping-modal,
[data-theme="light"] body.fx-no-blur .confirm-modal,
[data-theme="light"] body.fx-no-blur #chatContainer,
[data-theme="light"] body.fx-no-blur .ticket-header,
[data-theme="light"] body.fx-no-blur .chat-input-area,
[data-theme="light"] body.fx-no-blur .nav-left,
[data-theme="light"] body.fx-no-blur .msg-content,
[data-theme="light"] body.fx-no-blur .msg.admin .msg-content{background:rgba(255,255,255,.95)}
[data-theme="light"] body.fx-no-blur .bottom-nav{--dock-bg:rgba(255,255,255,.97)}
[data-theme="light"] body.fx-no-blur .confirm-btn:not(.danger):not(.neutral){background:rgba(255,255,255,.95)}

/* --- АНИМАЦИЯ: выключить все keyframes и переходы --- */
body.fx-no-anim *,body.fx-no-anim *::before,body.fx-no-anim *::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}

/* --- ЭФФЕКТЫ: свечения, тени, фильтры, hover-трансформации --- */
body.fx-no-fx *,body.fx-no-fx *::before,body.fx-no-fx *::after{box-shadow:none!important;text-shadow:none!important;filter:none!important}
body.fx-no-fx *:hover{transform:none!important}

/* ФИКС: элементы, центрированные через transform (left:50% + translateX(-50%)),
   не должны терять transform при hover/тапе — иначе нижняя панель уезжает вправо.
   Специфичность (0,3,1) выше чем (0,2,1) у правила выше, поэтому побеждает. */
body.fx-no-fx .bottom-nav:hover{transform:translate3d(-50%,0,0)!important}
body.fx-no-fx .fab-ticket-btn:hover,body.fx-no-fx .fab-ticket-btn:active{transform:translateX(-50%)!important}
body.fx-no-fx .scroll-down-btn:hover,body.fx-no-fx .scroll-down-btn:active{transform:translateX(-50%)!important}
body.fx-no-fx .toast-notification.show,body.fx-no-fx .confirm-toast.show{transform:translateX(-50%) translateY(0)!important}
body.fx-no-fx .img-modal-counter{transform:translateX(-50%)!important}

/* ФИКС v5.2: контент, который тумблерами не отключается НИКОГДА:
   луна в хедере (логотип moon.space — фильтр делает эмодзи серебристой)
   и свечение активной точки дней подписки */
body.fx-no-fx .logo-badge{filter:grayscale(100%) brightness(200%)!important}
body.fx-no-fx .dot.active{box-shadow:0 0 4px var(--glow-soft)!important}

/* ФИКС v5.3: «Анимация» off — выход уведомлений из хедера мгновенный,
   без зависающих на 620мс exit-клонов (их keyframes уже убиты, но сами клоны оставались видимыми) */
body.fx-no-anim .nav-sys-exit-clone{display:none!important}

/* ============ [3] ЗАДНИК КАРТОЧЕК УВЕДОМЛЕНИЙ ============ */
/* Тот же aurora-рецепт, что у карточки профиля/опций: два мягких радиальных пятна + верхний блик */
.sys-msg{--aur-1:rgba(138,120,255,.11);--aur-2:rgba(255,110,180,.06);background:radial-gradient(120% 90% at 88% -18%,var(--aur-1),transparent 60%),radial-gradient(100% 80% at -8% 112%,var(--aur-2),transparent 62%),var(--surface)}
.sys-msg:hover{background:radial-gradient(120% 90% at 88% -18%,var(--aur-1),transparent 60%),radial-gradient(100% 80% at -8% 112%,var(--aur-2),transparent 62%),var(--surface-hover)}
.sys-msg::before{content:'';position:absolute;inset:0;border-radius:inherit;background:linear-gradient(180deg,rgba(255,255,255,.055),transparent 26%);pointer-events:none;z-index:0}
.sys-msg>*{position:relative;z-index:1}
[data-theme="light"] .sys-msg{--aur-1:rgba(138,120,255,.10);--aur-2:rgba(255,110,180,.07)}
[data-theme="light"] .sys-msg::before{background:linear-gradient(180deg,rgba(255,255,255,.5),transparent 30%)}

/* ============ [4] ПЛАШКА «УВЕДОМЛЕНИЯ» = СТИЛЬ .hero-pill ============ */
/* Кнопки (обновить/выбрать/меню и т.д.) НЕ трогаем — остаются почти квадратными (radius 14px).
   Меняется сама таблетка: как .hero-pill «Информация об аккаунте» —
   по центру, ширина по содержимому, капсула 999px, та же высота и шрифт. */
.sys-top-row{width:fit-content;max-width:calc(100% - 8px);margin-left:auto;margin-right:auto;min-height:0;padding:7px 12px 7px 26px;border-radius:999px;gap:14px}
.sys-top-title{font-size:clamp(14px,2.8vw,19px);font-weight:600;letter-spacing:.2px;white-space:nowrap;display:inline-flex;align-items:center;gap:9px}
.sys-top-title svg{width:19px;height:19px;flex-shrink:0;stroke:currentColor;fill:none;opacity:.55}
/* кнопки в шапке чуть компактнее (были 42px), но почти квадратные как были */
.sys-top-row .sys-archive-btn{width:36px;height:36px;border-radius:12px}
.sys-top-row .sys-archive-btn svg{width:16px;height:16px}

/* ФИКС v5.4: в таблетке две иконки — колокол (Уведомления) и коробка (Архив).
   Текст вынесен в span#sysTopTitleText: JS раньше делал innerText по всей таблетке
   и уничтожал svg при входе/выходе из архива. Теперь меняется только текст + класс. */
.sys-top-title .sys-title-ic-box{display:none}
.sys-top-title.is-archive .sys-title-ic-bell{display:none}
.sys-top-title.is-archive .sys-title-ic-box{display:block}

/* ============ [5] МОБИЛЬНЫЕ КНОПКИ: «ЛЕТАЮЩИЙ» СТИЛЬ ============ */
@media (max-width:768px){
  /* модалки больше не на всю ширину экрана — кнопки внутри не растягиваются по краям */
  .rating-modal,.ping-modal{width:calc(100% - 36px)!important;max-width:430px!important}
  /* кнопки-плашки в уведомлениях: не растягиваются по краям, «летят» по центру; радиус родной (~квадратные) */
  .sys-load-more-btn,.sys-collapse-btn{width:calc(100% - 28px);max-width:360px;margin-left:auto;margin-right:auto;box-shadow:var(--pill-edge),0 10px 26px rgba(0,0,0,.32)}
  [data-theme="light"] .sys-load-more-btn,[data-theme="light"] .sys-collapse-btn{box-shadow:var(--pill-edge),0 10px 24px rgba(30,45,80,.14)}
}
@media (max-width:480px){
  .confirm-actions{padding:0 4px}
  .confirm-actions .btn-primary,.confirm-actions button{border-radius:14px}
}

/* ============ [6] МОДАЛКИ ОЦЕНКИ/ПИНГА: ПОВЕРХ ШТОРКИ + КВАДРАТНАЯ ИКОНКА ============ */
/* шторка (z-index 2000) стоит в конце body — при равном z-index рисуется поверх модалок */
.rating-modal-overlay,.ping-modal-overlay{z-index:2200}
/* иконка в модалке сплющивалась: модалка — flex-колонка с max-height:90vh, длинный список
   локаций сжимал её по высоте (у .opt-icon в шторке flex-shrink:0 есть, у .modal-icon — не было) */
.modal-icon{flex-shrink:0}

/* ============ [7] ВЫПАДАЮЩЕЕ МЕНЮ УВЕДОМЛЕНИЙ: АРХИВ + ФИЛЬТРЫ + РАССЫЛКИ ============
   Было: каждый пункт — отдельная «кнопка в кнопке» (рамка внутри рамки), эмодзи 📦/🔔/✈️ вперемешку со svg.
   Стало: флэт-строки в одном стеклянном контейнере, svg-иконки, активный фильтр — мягкая
   индиго-подложка + галочка справа, режим рассылок — цветная иконка (колокол/самолёт/перечёркнутый). */
.sys-more-menu{min-width:238px;max-width:calc(100vw - 24px);gap:2px;border-radius:18px;padding:6px;background:rgba(17,17,21,.97);box-shadow:0 18px 44px rgba(0,0,0,.5),0 3px 12px rgba(0,0,0,.35),inset 0 1px 0 rgba(255,255,255,.07)}
[data-theme="light"] .sys-more-menu{background:rgba(252,252,254,.98);box-shadow:0 18px 44px rgba(30,45,80,.16),0 3px 12px rgba(30,45,80,.08),inset 0 1px 0 #fff}
/* строки: без рамок, ровные отступы */
.sys-more-menu .sys-more-item{background:transparent;border:1px solid transparent;border-radius:11px;padding:10px 12px;font-size:13.5px;transition:background .16s ease}
.sys-more-menu .sys-more-item:hover{background:rgba(255,255,255,.07)}
[data-theme="light"] .sys-more-menu .sys-more-item{background:transparent}
[data-theme="light"] .sys-more-menu .sys-more-item:hover{background:rgba(20,28,50,.06)}
/* svg-иконка строки (коробка архива) */
.sys-menu-ic{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;opacity:.62}
.sys-archive-menu-label svg{flex-shrink:0}
/* активный фильтр: мягкая индиго-подложка, точка сохраняет свой цвет, справа галочка */
.sys-more-menu .sys-more-item.active,.sys-more-menu .sys-more-item.active:hover{background:rgba(138,120,255,.16)!important;color:var(--text)!important;border-color:transparent!important}
.sys-more-menu .sys-more-item.active:hover{background:rgba(138,120,255,.24)!important}
[data-theme="light"] .sys-more-menu .sys-more-item.active,[data-theme="light"] .sys-more-menu .sys-more-item.active:hover{background:rgba(95,79,216,.12)!important;color:var(--text)!important}
[data-theme="light"] .sys-more-menu .sys-more-item.active:hover{background:rgba(95,79,216,.18)!important}
/* точка фильтра не перекрашивается при активном фильтре (старое правило инвертировало её в цвет фона) */
.sys-more-menu .sys-more-item.active[data-filter="all"] .sys-filter-dot{border-color:var(--border-heavy)!important}
.sys-more-menu .sys-more-item.active[data-filter="white"] .sys-filter-dot{background:var(--text)!important;border-color:var(--border-heavy)!important}
.sys-filter-check{width:15px;height:15px;flex-shrink:0;margin-left:auto;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;opacity:0;transform:scale(.6);transition:opacity .18s ease,transform .18s ease}
.sys-more-item.active .sys-filter-check{opacity:1;transform:scale(1)}
/* сепаратор и заголовок секции */
.sys-more-sep{margin:5px 8px;opacity:.75}
.sys-more-label{padding:6px 12px 4px}
/* строка «Рассылки»: флэт, режим показывают иконка + цвет, а не заливка всей кнопки */
.sys-more-menu #sysMuteBtn{width:100%;display:flex;align-items:center;gap:11px;padding:10px 12px;border:1px solid transparent!important;background:transparent!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:11px;font-size:13.5px;font-weight:600;color:var(--text)!important;white-space:normal;text-align:left;transition:background .16s ease}
.sys-more-menu #sysMuteBtn:hover{background:rgba(255,255,255,.07)!important}
[data-theme="light"] .sys-more-menu #sysMuteBtn:hover{background:rgba(20,28,50,.06)!important}
.sys-more-menu #sysMuteBtn:active{transform:scale(.985)}
.sys-mute-ic{width:17px;height:17px;flex-shrink:0;stroke:currentColor;fill:none;display:none}
.sys-more-menu #sysMuteBtn[data-mode="all"] .sys-mute-ic-all{display:block;color:var(--tag-stable-color)}
.sys-more-menu #sysMuteBtn[data-mode="tg"] .sys-mute-ic-tg{display:block;color:var(--tag-beta-color)}
.sys-more-menu #sysMuteBtn[data-mode="off"] .sys-mute-ic-off{display:block;color:var(--tag-preview-color)}
.sys-mute-hint{margin-left:auto;font-size:11px;font-weight:600;color:var(--text-muted);opacity:.85}

/* ============ [8] КНОПКА «СКРЫТЬ/ПОКАЗАТЬ» У ДАТЫ ПОДПИСКИ ============
   Приклеена под датой (над пиллом «Информация об аккаунте»). Прячет весь кусок:
   точки-матрицу + большой счётчик дней + подпись «дней осталось». Дата и время остаются.
   Состояние хранится в localStorage (ml_sub_days_hidden), логика в js/06-profile.js.
   Использует те же токены, что .end-date — при fx-no-blur подложка сама становится плотной. */
.sub-days-toggle{display:inline-flex;align-items:center;gap:6px;margin-top:10px;padding:5px 16px;border-radius:999px;border:1px solid var(--pill-border);background:var(--pill-bg);-webkit-backdrop-filter:var(--pill-blur);backdrop-filter:var(--pill-blur);color:var(--text-muted);font-family:inherit;font-size:12px;font-weight:600;line-height:1;letter-spacing:.6px;cursor:pointer;transition:color .16s ease,border-color .16s ease,transform .16s ease;-webkit-tap-highlight-color:transparent}
.sub-days-toggle:hover{color:var(--text);border-color:var(--text-muted)}
.sub-days-toggle:active{transform:scale(.96)}
/* СКРЫТЫЙ РЕЖИМ: убираем точки и счётчик дней целиком (вместе с их отступами),
   дату и время НЕ трогаем — они остаются экономить место */
body.sub-days-hidden #dotsWrapper,body.sub-days-hidden #daysLeft,body.sub-days-hidden #subLabel{display:none!important}
body.sub-days-hidden .sub-days-toggle{margin-top:14px}

/* v5.7: при скрытых днях поджимаем оставшиеся «дыры» (жалоба: много пустого места).
   1) НАВБАР↔ДАТА: .cabinet{padding-top:120px} (95px на ≤480px) рассчитан на точки-матрицу,
      которых больше нет. 68px = низ навбара (~60px) + воздух. Исключения через :not():
      body.chat-open (70/65px — свой режим) и body.impersonating (160px — баннер админа)
      сохраняют родные отступы, :not() просто не даёт правилу совпасть.
   2) ДАТА: margin-top 15px→6px — сверху больше нет соседей, крупная дыра не нужна.
   3) КНОПКА↔ПИЛЛЫ: .sub-info{margin-bottom:50px}→18px (дальше идёт «Информация об аккаунте»).
   Специфичность (0,4,1)/(0,3,1)/(0,2,1) выше исходных — media-правило 95px тоже перекрыто. */
body.sub-days-hidden:not(.chat-open):not(.impersonating) .cabinet{padding-top:68px}
body.sub-days-hidden .sub-info .end-date{margin-top:6px}
body.sub-days-hidden .sub-info{margin-bottom:18px}