/*════════════════════ 01-theme.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* AURORA — все стили приложения (С115: вынесены из index.html при причёсывании).
Резка на части — следующая итерация; порядок правил СОХРАНЁН как в монолите. */
/* ⭐ ОСНОВНАЯ ТЕМА — «Циан-магента» в стиле Solana (выбор Михаила С87).
Чёрный фон (уход в тёмный баклажан), --em = электрик-циан #00E5FF (основной акцент),
--em2 = магента #FF3D9A. Кислотный неон в меру: акценты яркие, фон нейтрально-чёрный. */
:root{
/* ⭐ С223 (Михаил): фон приложения — ЧИСТЫЙ чёрный, а не «уход в баклажан». Красим тремя
переменными сразу: --bg (полотно), --panel (панели и шапки) и --side-bg (подложка
сайдбара) — покрасить одну мало, соседние остаются светлее и фон выглядит пятнами. */
--bg:#000000; --panel:#000000; --hair:#1c1c26; --em:#00E5FF; --em2:#FF3D9A;
--muted:#8a8a95; --glass:rgba(255,255,255,.045); --txt:#e8e8ec;
--glow1:rgba(0,229,255,.26); --glow2:rgba(255,61,154,.20);
--side-bg:rgba(0,0,0,.86); --bubble-border:rgba(0,229,255,.22);
--bubble-shadow:rgba(0,229,255,.30); --daybg:rgba(255,255,255,.06);
--glass-soft:rgba(255,255,255,.03);
/* ⭐⭐⭐⭐⭐ С262 (Михаил): МОИ сообщения — фиолетовые во ВСЕХ чатах (AURORA, Telegram,
сайт), как пузырь ассистента. Раньше оттенок исходящих брался от акцента темы: в
«Авроре» он зелёный, в светлой — тоже зелёный, и свои сообщения выбивались из общего
вида. Теперь цвет исходящих задан ОТДЕЛЬНО от акцента темы — тремя переменными сразу
(фон, обводка, акцент прочитанного), и темы его больше не переопределяют. */
--out-bg:rgba(184,155,255,.12);
--out-border:rgba(184,155,255,.34); --out-accent:#b89bff;
--in-border:rgba(255,255,255,.16); /* ⭐С96 (Михаил): окантовка входящих СВЕТЛЕЕ — сообщения не сливаются (во всех чатах) */
}
/* темы оформления (переключаются классом на ) */
html.theme-aurora{ --em:#22e3a0; --em2:#8a5cff; --bg:#080b14; --panel:#0a0f1c; --hair:#182238; --muted:#9fb0d0;
--glow1:rgba(138,92,255,.18); --glow2:rgba(34,227,160,.14); --side-bg:rgba(10,15,28,.7);
--bubble-border:rgba(138,92,255,.16); --bubble-shadow:rgba(138,92,255,.38); --daybg:rgba(159,176,208,.16); } /* ⭐С262 исходящие не перекрашиваем: они фиолетовые во всех темах */
html.theme-sunset{ --em:#ff4d8d; --em2:#ff9a3d; --bg:#0f0a14; --panel:#120a18; --hair:#2a1c33; --muted:#d0a0c0;
--glow1:rgba(255,77,141,.18); --glow2:rgba(255,154,61,.14); --side-bg:rgba(18,10,24,.7);
--bubble-border:rgba(255,154,61,.16); --bubble-shadow:rgba(255,77,141,.38); --daybg:rgba(208,160,192,.16); } /* ⭐С262 исходящие не перекрашиваем: они фиолетовые во всех темах */
html.theme-lime{ --em:#b6ff3c; --em2:#1fe0c0; --bg:#0b0e0c; --panel:#0a0f0c; --hair:#1c2620; --muted:#a0d0b0;
--glow1:rgba(182,255,60,.14); --glow2:rgba(31,224,192,.12); --side-bg:rgba(10,15,12,.7);
--bubble-border:rgba(31,224,192,.16); --bubble-shadow:rgba(31,224,192,.35); --daybg:rgba(160,208,176,.16); } /* ⭐С262 исходящие не перекрашиваем: они фиолетовые во всех темах */
/* ⭐С94 СВЕТЛАЯ ТЕМА (тумблер в Настройки→Оформление). Базовые поверхности инвертированы,
стеклянные слои белого «стекла» (rgba(255,255,255,…)) заменены на чёрное «стекло» —
на белом фоне белая полупрозрачность невидима. Акцент хранится РАЗДЕЛЬНО для тёмной/светлой. */
/* ⭐С94 v178 «дорого и богато» (правка Михаила: чисто-белый смотрелся дёшево, шрифты бледные):
жемчужный тонированный фон + РАДУЖНЫЕ пастельные переливы (как живой градиент тёмной темы),
стекло = молочно-белое с чёткими обводками и мягкими цветными тенями, тексты темнее. */
html.light{
--bg:#f4f3fb; --panel:#ffffff; --hair:#d5d8e5; --muted:#5f6272;
--glass:rgba(255,255,255,.65); --txt:#101118; --glass-soft:rgba(255,255,255,.45);
--side-bg:rgba(255,255,255,.82); --daybg:rgba(255,255,255,.75);
--in-border:rgba(0,0,0,.10); --fg:#101118;
}
/* живой радужный градиент фона (голубой/розовый/лаванда/бирюза) — насыщеннее, чем тёмные пятна,
иначе на светлом не видно; та же анимация auroraFlow */
html.light .app::before{background:
radial-gradient(38% 32% at 22% 18%, rgba(0,190,255,.11), transparent 60%),
radial-gradient(42% 34% at 82% 26%, rgba(255,90,180,.10), transparent 60%),
radial-gradient(40% 34% at 70% 82%, rgba(140,120,255,.18), transparent 62%),
radial-gradient(36% 30% at 26% 76%, rgba(0,220,180,.15), transparent 62%)}
/* светлая: неоновые отсветы фона делаем мягче (на белом яркие радиалы выглядят грязно) */
html.light, html.light body{ background:
radial-gradient(70% 30% at 15% 100%, var(--glow1), transparent 60%),
radial-gradient(70% 30% at 85% 100%, var(--glow2), transparent 60%),
var(--bg) }
html.light::before{ background:
radial-gradient(70% 24% at 15% 100%, var(--glow1), transparent 60%),
radial-gradient(70% 24% at 85% 100%, var(--glow2), transparent 60%),
var(--bg) }
/* белое «стекло» карточек/кнопок → чёрное «стекло» на светлом фоне */
html.light .chat-item.active{background:linear-gradient(135deg, rgba(0,0,0,.08), rgba(0,0,0,.03))}
/* пузыри: молочное стекло с чёткой обводкой и мягкой цветной тенью (стиль по скриншотам Михаила
⏸️ ОТЛОЖЕН до согласования — см. память light-theme; пока прежний вид v180) */
html.light .out{border-color:rgba(0,0,0,.12);box-shadow:0 2px 8px rgba(80,90,140,.10)}
html.light .in{background:rgba(255,255,255,.72);border:1px solid rgba(0,0,0,.08);
box-shadow:0 2px 8px rgba(80,90,140,.08)}
html.light .in.admin-in{background:linear-gradient(rgba(255,255,255,.82),rgba(255,255,255,.82)) padding-box, var(--bg) padding-box}
/* день-разделитель и настройки: белые карточки с обводкой/тенью, разделители видимые */
html.light .day{background:rgba(255,255,255,.75);border:1px solid var(--hair)}
html.light .set-acc{background:rgba(255,255,255,.78);border:1px solid rgba(0,0,0,.10);
box-shadow:0 2px 10px rgba(80,90,140,.08)}
html.light .set-acc-head:hover{background:rgba(0,0,0,.03)}
html.light .search{background:rgba(255,255,255,.7);border-color:var(--hair)}
/* ⭐С94 v179 (правка Михаила «плохо читается шрифт на верхней шапке»): градиентное имя
Aurora Intelligence было из ЯРКИХ неонов — на светлом бледнело. Тёмная версия градиента. */
/* v183: многоцветный ТЁМНЫЙ градиент (морской→фиолет→магента→изумруд) — радужно И читаемо на белом */
html.light .ai-name{background:linear-gradient(100deg,#0077b6,#7a3ad6,#d1268f,#0a8f74,#0077b6);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
html.light .b .who.ai-name{background-size:100% 100%}
/* ⭐С94 v180 (Михаил): статусы шапки — темнее для читаемости на светлом;
v185: «твой ассистент» — тёмно-бирюзовый (просьба Михаила), остальные — тёмно-серые */
html.light .head i{color:#4a4d5c}
html.light .head i.st-em{color:#00707f}
html.light .head .callbtn{color:#0a7a41}
html.light .head .videobtn{color:#00606e}
/* ⭐С94 v180 (Михаил): список чатов был «просто белый» — пастельные переливы и в сайдбаре */
html.light .side{background:
radial-gradient(60% 34% at 92% 0%, rgba(0,190,255,.12), transparent 60%),
radial-gradient(52% 30% at 0% 100%, rgba(255,90,180,.12), transparent 60%),
radial-gradient(45% 28% at 10% 30%, rgba(140,120,255,.08), transparent 62%),
rgba(255,255,255,.38)}
/* ⭐С94 (Михаил, ЗАПОМНИТЬ КАК ПРАВИЛО): на ВСЕХ градиентных («радужных») кнопках
в светлой теме — ВСЕГДА белый шрифт (тёмный на затемнённом градиенте не читается) */
html.light .w-btn.pri, html.light .set-save, html.light .auth-card button, html.light .totp-open,
html.light .rem-add-btn, html.light .ci-badge,
html.light .gc-result .gc-av, html.light .gi-member .gc-av{color:#fff}
/* ⭐С96 плюсик создания чата — сдержанный (currentColor), белый override убран */
/* ⭐С94 v179 (правка «внизу нет надписи Сообщение»): НЕ только плейсхолдер — само ПОЛЕ ввода
было белым стеклом rgba(255,255,255,.06) на белом фоне, невидимо целиком. Молочное стекло + обводка. */
html.light .msg{background:rgba(255,255,255,.75);border-color:rgba(0,0,0,.14)}
html.light .msg:empty::before{color:#8a8da0}
/* сайдбар: тёмное стекло → светлое (сам фон .side задан ниже в v180-блоке с пастельными переливами) */
html.light .side-top{background:rgba(255,255,255,.5)}
/* ⭐С94 правка Михаила: белое «стекло» карточек чатов на белом фоне не видно — тёмная обводка */
html.light .chat-item{background:linear-gradient(135deg, rgba(255,255,255,.7), rgba(255,255,255,.4));
border:1px solid rgba(0,0,0,.12);box-shadow:0 1px 4px rgba(0,0,0,.06)}
/* ⭐С262: в светлой теме общее правило карточек перебивало рамку закреплённого —
сказывается старшинство селектора, поэтому задаём её явно и здесь. */
html.light .chat-item.pinned-chat{border-color:rgba(124,92,240,.42)}
/* ⭐С94 правка Михаила-2: иконки/акценты в чате на белом — темнее (стекло сохраняем, цвет глушим) */
html.light .head .callbtn{color:#0f9e54} /* зелёная трубка: тёмно-зелёный, читается на белом */
html.light .b .rd{color:#9aa0ad} /* серые галочки чуть темнее на белом */
/* ⭐С262 (Михаил): и в светлой теме свои сообщения фиолетовые, а не зелёные. Оттенок
темнее ночного (#6b3df0): на белом фоне светлая сирень читается плохо. */
/* ⚠️ На белом фоне светлая сирень почти не видна, поэтому здесь тот же тон, но плотнее. */
html.light .out.read .rd, html.light .out.read .t{color:#7c5cf0}
html.light .out.read{border-color:rgba(124,92,240,.42);box-shadow:0 0 6px rgba(124,92,240,.15)}
*{box-sizing:border-box}
/* ⭐ жёстко фиксируем документ + ЗАПРЕТ зума пальцами (пинч/двойной тап) — как в настоящем
мессенджере: окна не раздвигаются и не масштабируются жестами. touch-action:pan-y разрешает
только вертикальную прокрутку (ленты), пинч-зум и горизонтальный разъезд блокирует. */
html,body{margin:0;height:100%;overflow:hidden;width:100%;
overscroll-behavior:none;touch-action:pan-y;-webkit-text-size-adjust:100%}
/*════════════════════ 02-base.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ⭐⭐С90 ФИНАЛ низа: ВОЗВРАТ к рабочей схеме v94 — body:fixed (НЕ html!), html обычной высоты
с min-height ниже. Мой html:fixed (диагностическая итерация) УКОРАЧИВАЛ рендер низа → чёрная
полоса вернулась. Скролл документа при фокусе теперь предотвращает OPACITY-ХАК (focus-хендлер),
а не CSS-замок — html:fixed больше не нужен. Низ красят html-фон + html::before (как в v94). */
body{position:fixed;top:0;left:0;right:0;bottom:0}
/* ⭐⭐⭐С88 ФИКС ЧЁРНОЙ ОБЛАСТИ СНИЗУ iOS-PWA (проверенное решение dev.to + разбор эксперта):
КОРЕНЬ — position:fixed на html/body в standalone-PWA укорачивал высоту (не включал home-indicator).
Убрали position:fixed (защита от скролла осталась: overflow:hidden + .app position:fixed).
min-height с safe-area-top + фон fixed → фон дизайна покрывает ВСЮ высоту стекла, чёрной зоны нет. */
html{min-height:calc(100% + var(--sat,env(safe-area-inset-top)));background-attachment:fixed}
/* ⭐С88 html-фон = тёмный с циан-магента низом: даже зона home-indicator (safe-area) в PWA
под .app окрашена в дизайн, а не чёрная. Плюс env safe-area внизу гарантированно покрыта. */
/* ⭐ С223 (Михаил): «полностью весь фон чёрный». Цвет давали ТРИ слоя, не один: неоновые
радиалы на html, такие же на body и живые переливы .app::before. Гасим все три — иначе
чёрный получается пятнами. Светлая тема не затронута: её правила (html.light …) идут с
более высокой специфичностью и перекрывают эти. */
html{background:var(--bg)}
/* ⭐⭐⭐С88 ФИКС ЧЁРНОЙ ПОЛОСЫ ВНИЗУ (root cause, разбор эксперта): в iOS standalone-PWA html/body
с position:fixed;height:100% вычисляют высоту БЕЗ зоны home-indicator (safe-area-inset-bottom) →
ниже края html системный ЧЁРНЫЙ, его не красит ни один элемент (полоса и на входе, и в чате).
ЛЕЧЕНИЕ: фиксированный подслой на ВСЁ стекло экрана, уходящий НИЖЕ края в safe-area. Не двигается
при клавиатуре (fixed), не ломает верх. z-index:-1 — виден только в непокрытой зоне снизу. */
/* ⭐С90 подслой ВОЗВРАЩЁН на html::before (ровно как в рабочем v94): html снова обычный (не fixed),
stacking-ловушки нет, z-index:-1 корректен — подслой виден в непокрытой зоне снизу. */
/* ⭐С90 глубина -40px ДОПОЛНИТЕЛЬНО к env: env(34) меньше реальной нижней зоны (~47) → хвостик
полосы. Подложка на html (вне body) — обрезка body её не касается, рисуется глубже всех слоёв. */
html::before{content:"";position:fixed;top:0;left:0;right:0;
bottom:calc(-1 * var(--sab,env(safe-area-inset-bottom)) - 40px);z-index:-1;pointer-events:none;
background:
radial-gradient(70% 24% at 15% 100%, rgba(0,229,255,.12), transparent 60%),
radial-gradient(70% 24% at 85% 100%, rgba(255,61,154,.10), transparent 60%),
var(--bg)}
/* ⭐ body покрашен в основной ЧЁРНЫЙ фон (--bg): раньше был --panel (чуть светлее) → на стыке
снизу (safe-area/заниженный dvh) просвечивала тёмная ПОЛОСА другого оттенка. Теперь весь низ
сливается с чёрным фоном приложения — полосы нет ни на входе, ни в списке чатов. */
/* ⭐С88 body — низ подкрашен циан-магента в тон дизайну: если .app короче экрана (в PWA vv.height
не включает home-indicator), под ним видна НЕ чёрная дыра, а продолжение градиента. Полосы нет. */
/* ⚠️ БЕЗ position:fixed на body/.app! iOS во время АНИМАЦИИ клавиатуры перепривязывает fixed-элементы
к визуальному вьюпорту → весь экран «падает ровно на высоту клавиатуры и едет вверх вместе с ней»
(дёрг шапки, скрин-описание Михаила v90). absolute к этому эффекту НЕ чувствителен. */
html{height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Arial,sans-serif;
color:var(--txt);height:100%;overflow:hidden;position:relative;
background:var(--bg)}
/* градиентный фон переносим на сам .app (переписку), а не на body */
.app{background:var(--bg)}
/* ⭐ ПРОДОЛЖЕНИЕ ФОРМЫ под клавиатуру (как в Telegram): зона от низа контента (--app-h) до низа
экрана красится в тон формы с растворением вниз. Родной фон приложения почти чёрный (#050507) —
без этого под светлой стеклянной формой видна «чёрная дыра» (скрины Михаила v83-v88).
Без клавиатуры --app-h = высота окна → зона нулевая, не видна. */
/* ⭐⭐С90 body::after УБРАН (был плоский слой БЕЗ живых переливов от низа контента до низа экрана —
эта «мёртвая» зона и читалась как полоса; чем меньше контент — тем БОЛЬШЕ полоса, что Михаил и
видел). Низ теперь покрывает ЖИВОЙ фон .app, растянутый до низа стекла с запасом — переливы до края. */
/* ⭐⭐С88 ЖИВОЙ переливающийся градиент фона (в стиле solana.com): несколько мягких цветных пятен
МЕДЛЕННО плавают по всему экрану — заполняют чёрную пустоту, заходят на шапку, дышат. Тонко,
не явно (низкая прозрачность). Один слой ::before на .app, анимация transform (GPU, не грузит). */
.app::before{content:"";position:absolute;inset:-30%;z-index:0;pointer-events:none;
background:none}
@keyframes auroraFlow{
0% {transform:translate(0,0) rotate(0deg) scale(1)}
33% {transform:translate(3%,-2%) rotate(4deg) scale(1.08)}
66% {transform:translate(-2%,3%) rotate(-3deg) scale(1.04)}
100% {transform:translate(0,0) rotate(0deg) scale(1)}
}
@media(prefers-reduced-motion:reduce){ .app::before{animation:none} }
/* содержимое .app (сайдбар/переписка) — над живым фоном */
.side,.main{position:relative;z-index:1}
/* ⭐⭐ СХЕМА МИХАИЛА (v87): ФОН НЕ ДВИГАЕТСЯ, поднимается только контент.
.app (фон: чёрный + живые переливы ::before) — ВСЕГДА на полную высоту окна (--app-full).
При клавиатуре ужимается только СОДЕРЖИМОЕ (.main/.side → height:--app-h = vv.height):
форма садится над клавиатурой, а ПОД ней до самого низа остаётся родной фон приложения —
никаких чёрных обрывов и затычек, щель над панелью ↑↓✓ выглядит как продолжение фона. */
/* ⭐⭐С90 ФИНАЛ (после веб-ресёрча): transform-КОМПЕНСАЦИЯ УБРАНА — реактивный путь запаздывает
на кадры (рывок неизбежен) и создаёт containing block (ломал внутренние координаты — чёрная лента
v100). Вместо лечения последствий — ПРЕДОТВРАЩЕНИЕ причины: opacity-хак на поле в момент фокуса
(см. focus-хендлер) — iOS НЕ скроллит документ к невидимому полю вообще (gist kiding, проверено). */
/* ⭐⭐С90 ФОН .app ДО НИЗА СТЕКЛА: высота = max(--app-full, 100dvh) + 60px запаса. 100dvh в
standalone = полная высота стекла (включая зону home-indicator, в отличие от innerHeight=--app-full).
+60px гарантированно перекрывает низ; лишнее за краем экрана не видно (overflow скрыт). Живой фон
.app (var(--bg)+переливы .app::before) доходит до самого края → мёртвой полосы нет по построению.
КОНТЕНТ (.side/.main) управляется отдельно через --app-h — эта высота на его позицию НЕ влияет. */
.app{display:grid;grid-template-columns:368px 1fr;overflow:hidden;
height:calc(max(var(--app-full, 100dvh), 100dvh) + 60px);
position:absolute;left:0;right:0;width:100%;top:0;box-sizing:border-box}
/* контент (лента+форма/сайдбар) — по видимой высоте, фон .app остаётся на месте */
.side,.main{height:var(--app-h, 100%)}
/*════════════════════ 03-sidebar.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ── сайдбар со списком чатов ── */
/* ⭐С88 сайдбар ПОЛУПРОЗРАЧНЫЙ — живой градиент .app::before переливается сквозь него (видно стекло).
Свои свечения убраны: их заменил общий живой фон. */
.side{border-right:1px solid var(--hair);display:flex;flex-direction:column;min-width:0;
background:rgba(0,0,0,.42)} /* ⭐С223: подложка сайдбара — чёрная, без синего оттенка */
.side-top{padding:16px 16px 12px;border-bottom:1px solid var(--hair);
padding-top:calc(16px + var(--sat,env(safe-area-inset-top))); /* ⭐ ниже чёлки iPhone */
display:flex;align-items:center;gap:11px;
/* ⭐С88 шапка сайдбара СТЕКЛЯННАЯ — свечение сверху просвечивает, видно что стекло */
background:rgba(0,0,0,.4);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} /* ⭐С223: та же чёрная база */
.logo{width:38px;height:38px;border-radius:11px;font-size:20px;
display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--em),var(--em2))}
/* ⭐С106 (Михаил): аватарка и имя в шапке сайдбара кликабельны → мой профиль с «Лентой» */
.side-top #me-avatar, .side-top .brand{cursor:pointer}
.side-top #me-avatar:active{transform:scale(.95)}
/* ⭐С148 (Михаил: «в настройках у аватара есть свечение — такое же нужно в шапке,
иначе тёмное фото сливается с фоном»). Тот же приём, что у .set-avatar в
08-settings-feed.css: мягкое свечение фирменным цветом + тонкая светлая окантовка,
чтобы аватарка отделялась от шапки независимо от того, светлое фото или тёмное. */
/* ⚠️С148 ФИКС СРАЗУ ПОСЛЕ ПРАВКИ (Михаил: «появилась какая-то белая, даже жёлтая полоса
над головой»). КОРЕНЬ: у #me-avatar класс .logo с ГРАДИЕНТНЫМ фоном (см. выше). Добавленный
border рисовался ПОВЕРХ градиента и на светлой части давал жёлтую кромку.
Убираем border совсем — отделяет аватарку одно только свечение, этого достаточно. */
.side-top #me-avatar{
box-shadow:0 0 16px var(--bubble-shadow), 0 2px 10px -2px rgba(0,0,0,.5)}
.side-top b{font-size:17px;letter-spacing:-.01em}
.side-top .me{font-size:12px;color:#fff;opacity:.75} /* ⭐С112 (Михаил): логин в шапке БЕЛЫЙ (чуть приглушён) */
.side-top .logout{font-size:20px;cursor:pointer;color:var(--muted);padding:4px 6px;flex:0 0 auto;transition:color .2s}
.side-top .logout:hover{color:#ff6b6b}
.search{margin:12px 14px;height:38px;border-radius:19px;border:1px solid rgba(255,255,255,.18);
background:var(--glass);color:var(--muted);display:flex;align-items:center;padding:0 14px;font-size:13px;gap:8px}
.search .search-ic{flex:0 0 auto;opacity:.7}
.search input{flex:1;min-width:0;background:none;border:none;outline:none;color:var(--txt);
font-size:13px;font-family:inherit;padding:0}
.search input::placeholder{color:var(--muted)}
.search:focus-within{border-color:var(--em)}
/* ⭐ список чатов тянется до самого низа; padding-bottom с safe-area — чтобы снизу не было
тёмной некрашеной полосы (зона safe-area iPhone / зазор после убранной палитры) */
.chats{flex:1;overflow-y:auto;padding:8px 10px;padding-bottom:calc(8px + var(--sab,env(safe-area-inset-bottom)));
display:flex;flex-direction:column;gap:8px}
/* ⭐ стеклянные плашки чатов: на тёмном фоне сам blur не виден, поэтому «стекло» рисуем светлым
диагональным градиентом + светлым бликом по верхней грани (imitация бликующего стекла).
Обводка — ТОНКАЯ и еле заметная (не яркий неон). */
.chat-item{position:relative;display:flex;gap:12px;padding:12px 14px;cursor:pointer;align-items:center;border-radius:16px;
background:linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.03));
border:1px solid rgba(255,255,255,.1);
box-shadow:inset 0 1px 0 rgba(255,255,255,.12); /* верхний блик — читается как стекло */
-webkit-backdrop-filter:blur(16px) saturate(1.2);backdrop-filter:blur(16px) saturate(1.2);
transform:translateZ(0); /* ⭐С88 форс GPU-слоя: iOS не гасит backdrop-filter при тапе (стекло не «пропадает») */
transition:border-color .15s,background .15s;
/* ⭐С93 ФИКС: долгий тап открывал НАШЕ меню (📌Закрепить/…) ОДНОВРЕМЕННО с системным
Safari-выделением текста/callout-меню («Копировать») — Михаил: нужно развести, как в Telegram.
-webkit-touch-callout:none убирает системное long-press меню картинок/ссылок на iOS,
user-select:none убирает выделение текста по долгому тапу — наш JS-таймер остаётся единственным. */
-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;
/* ⭐С145 (Михаил: «карточка темнеет при пролистывании пальцем» — @media(hover:hover) из С133
не помог полностью): WebKit/iOS Safari рисует СВОЙ полупрозрачный серый tap-highlight при
касании ЛЮБОГО кликабельного элемента — это отдельный от CSS :hover встроенный эффект
браузера, медиа-запрос на него не действует. Обнуляем явно. */
-webkit-tap-highlight-color:transparent}
/* ⭐ С223 (Михаил): неоновая окантовка теперь ПРИЗНАК ЗАКРЕПЛЁННОГО чата, а не открытого.
Раньше она загоралась у активной карточки — то есть просто у той, которую ты последней
открыл, и читалась как метка «этот чем-то особенный». Открытая карточка по-прежнему чуть
светлее фоном: где ты находишься, видно и без рамки. */
.chat-item.active{background:linear-gradient(135deg, rgba(255,255,255,.13), rgba(255,255,255,.05))}
/* ⭐С262 (Михаил): рамка закреплённого чата — того же фиолетового, что и свои пузыри.
Раньше она брала цвет акцента темы и в «Авроре»/«Лайме» выходила зелёной. */
.chat-item.pinned-chat{border-color:var(--out-border, var(--bubble-border))}
/* ⭐С93 закреплённый чат — маленькая иконка 📌; заглушённый — приглушённое имя + 🔕.
⭐С144v5: булавка переехала из абсолютного ::after в поток .ci-side (см. ниже) — не
перекрывает время последнего сообщения.
⭐С145: колокольчик 🔕 переехал в отдельный .ci-mute (верх колонки .ci-side, по ТЗ Михаила)
— старый ::before перед временем убран, иначе дублировался с новым элементом. */
.chat-item.muted-chat .ci-name{opacity:.6}
/* ⭐С96 (Михаил): карточка Aurora Intelligence БОЛЬШЕ НЕ sticky — при скролле списка чатов
уходит вверх вместе со всеми (раньше «прилипала» и чаты уезжали под неё). Но она всегда
ПЕРВАЯ в порядке (сортировка admin→-1) и не опускается при новых сообщениях.
+ фирменная градиентная обводка в стиле AURORA (::before). */
.chat-item[data-chat="admin"]{
position:relative; z-index:1;
border:1px solid transparent;
}
.chat-item[data-chat="admin"]::before{
content:"";
position:absolute; inset:-1.5px;
border-radius:17px;
padding:1.5px;
background:linear-gradient(270deg, var(--em), var(--em2), var(--em));
background-size:220% 220%;
animation:aiBorderFlow 6s ease-in-out infinite;
-webkit-mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;
mask:linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
mask-composite:exclude;
pointer-events:none; z-index:-1;
}
/* ⭐ плавное переливание обводки Admin Intelligence — медленное, не резкое */
@keyframes aiBorderFlow{
0%{background-position:0% 50%}
50%{background-position:100% 50%}
100%{background-position:0% 50%}
}
@media (prefers-reduced-motion: reduce){
.chat-item[data-chat="admin"]::before{animation:none}
}
/* ⭐С133 (Михаил: «карточка чата темнела при прокрутке пальцем») — touch-устройства не имеют
настоящего hover, но браузер иногда его симулирует при тапе/скролле; медиа-запрос исключает
эффект там, где нет реальной мыши. ⭐С145: это правило было утеряно при более ранней правке,
восстановлено 1:1 из git-истории (коммит c867e67). */
/* ⭐С145v2 (Михаил: скриншотом поймал — карточка остаётся тёмной ПОСЛЕ отпускания пальца,
пока не тронешь другую; @media(hover:hover) не спас). ИЗВЕСТНЫЙ баг WebKit: в PWA
display-mode:standalone на iOS media-фичи hover/pointer иногда репортятся НЕПРАВИЛЬНО
(возвращают true даже на touch) — медиа-запрос не срабатывает так, как должен. Дополнительно
страхуемся классом .has-hover, который выставляет JS через настоящий matchMedia() + событие
mousemove (только у мыши есть movementX/Y без предшествующего touch) — надёжнее чистого CSS. */
html.has-hover .chat-item:hover{background:linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04))}
/* ⭐С133 (Михаил): аватарка-заглушка (когда человек не загрузил фото) была градиентной —
теперь стеклянный квадрат со скруглением и первой буквой имени. ⭐С145: правило было утеряно
при более ранней правке CSS (без видимой причины — просто пропало), восстановлено 1:1
из git-истории (коммит c867e67), включая настоящий backdrop-filter blur, не плоский цвет. */
.ci-av{width:46px;height:46px;border-radius:14px;flex:0 0 auto;font-weight:700;font-size:17px;
display:flex;align-items:center;justify-content:center;color:var(--em);
background:rgba(20,24,32,.22);border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(6px) saturate(1.6);backdrop-filter:blur(6px) saturate(1.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
/* ⭐С133 аватарка канала новостей — стекло (общий .ci-av) + бирюзовый рупор вектором */
/* ⭐С148 (Михаил: «стеклянная — для тех, кто не добавил аватарку, а у Аврора Новости должна
быть красивая фирменная; раньше была голубая с золотистым рупором»). В С133 канал перевели
на общее стекло .ci-av, и он стал выглядеть безликой заглушкой наравне с юзерами без фото.
Возвращаем: голубая заливка + ЗОЛОТИСТЫЙ рупор (белый смотрелся скучно — правка Михаила
сразу после первой версии). Золото задаётся градиентом на самом SVG (см. ниже). */
.ci-av-news{
color:#ffc95c;
background:linear-gradient(150deg,#2aa9ff 0%,#1e7fe0 55%,#1a63c9 100%);
border:1px solid rgba(255,255,255,.28);
box-shadow:inset 0 1px 0 rgba(255,255,255,.35), 0 6px 16px -8px rgba(30,127,224,.7);
-webkit-backdrop-filter:none;backdrop-filter:none}
/* Мягкая тень под золотом, чтобы рупор читался на синем фоне.
Сам градиент задан в SVG (см. index.html, defs#newsGold) — не через CSS. */
.ci-av-news svg{filter:drop-shadow(0 1px 2px rgba(120,60,0,.45))}
/* ⭐С148 синяя галочка «подтверждённый канал» рядом с названием (идея Михаила —
как у верифицированных аккаунтов в Telegram/Instagram) */
.verified-badge{display:inline-block;vertical-align:-2px;margin-left:5px;flex:0 0 auto}
/* ⭐С97 зелёная точка «онлайн» на аватаре (список чатов и шапка) */
.online-dot{position:absolute;right:-2px;bottom:-2px;width:13px;height:13px;border-radius:50%;
background:#31d158;border:2px solid var(--panel);box-shadow:0 0 0 1px rgba(0,0,0,.15)}
/* ⭐С90: бот-аватар Админа (SVG-робот) БЕЗ фоновой подложки — сама голова робота выделяется. */
.ci-av-bot,.h-av-bot{padding:0!important;background:none!important;box-shadow:none;position:relative;overflow:visible}
.ci-av-bot svg,.h-av-bot svg{filter:drop-shadow(0 0 4px rgba(0,229,255,.45))}
.h-av-bot{padding:0!important}
/* ⭐С91 статус-индикатор «онлайн» — зелёный кружок на уголке головы робота (вместо слова «онлайн») */
.bot-status{position:absolute;right:-1px;bottom:-1px;width:12px;height:12px;border-radius:50%;
background:#22e37a;border:2.5px solid var(--panel,#0a0a0e);
box-shadow:0 0 6px rgba(34,227,122,.8)}
.h-av-bot .bot-status{width:10px;height:10px;border-width:2px}
/* ⭐С91 «Избранное»: тёмный фон + закладка-градиент (не сплошная заливка, чтобы SVG читался) */
.ci-av-fav,.h-av-fav{background:rgba(10,14,20,.85)!important;border:1px solid rgba(0,229,255,.35)}
.ci-av-fav svg,.h-av-fav svg{filter:drop-shadow(0 0 3px rgba(0,229,255,.4))}
/* ⭐С145v9 (Михаил поймал: у «Избранное» время всё равно на 3.5px ниже, чем у обычных чатов) —
.chat-item{align-items:center} центрировал .ci-b(39px) внутри аватара(46px) — 3.5px сверху/
снизу. .ci-side/.ci-toprow вынесены из .ci-b и стоят align-self:flex-start (0px от верха) —
несовпадение. align-self:flex-start на .ci-b ровняет ВЕСЬ блок имя+текст с колонкой времени. */
.ci-b{flex:1;min-width:0;align-self:flex-start}
/* ⭐С145v5 (Михаил поймал: сломал карточки «Избранное»/«Нейродруг»/аватар-стекло — у них
.ci-b БЕЗ .ci-side, глобальный padding-right был лишним) — паддинг только у карточек списка
чатов через .ci-b-cardlist (класс вешает JS в makeChatCardSkeleton, НЕ на общий .ci-b). */
.ci-b-cardlist{padding-right:38px}
/* ⭐С104 (Михаил): особая карточка Aurora — картинка-баннер на всю высоту слева.
Скруглена слева (по радиусу карточки), правый край РОВНЫЙ. Текст сдвинут за баннер. */
/* overflow НЕ hidden — иначе обрезается радужная окантовка (::before с inset:-1.5px).
Баннер сам скруглён слева и обрезает картинку, карточке overflow не нужен. */
.chat-item.aurora-hero{padding:0;gap:0;align-items:stretch;min-height:80px}
.aurora-hero .ah-banner{flex:0 0 auto;width:96px;align-self:stretch;position:relative;overflow:hidden;
border-top-left-radius:16px;border-bottom-left-radius:16px}
.aurora-hero .ah-banner img{width:100%;height:100%;object-fit:cover;display:block}
/* мягкая градиентная растушёвка правого края баннера в фон карточки — чтобы стык был плавным */
.aurora-hero .ah-banner::after{content:"";position:absolute;top:0;right:0;bottom:0;width:26px;
background:linear-gradient(90deg, transparent, rgba(10,10,18,.55))}
.aurora-hero .ci-b{display:flex;flex-direction:column;justify-content:center;padding:12px 14px}
.aurora-hero .ci-name{font-size:16.5px} /* ⭐С104 (Михаил): название на размер крупнее (было 14.5) */
/* ⭐⭐С111 круглая кнопка-звонок в карточке Нейро-друга/подруги (фиолетовая, свечение) */
/* ⭐С112 (Михаил): убрал громоздкий фиолетовый ФОН — оставил только фиолетовую трубку
(чуть светлее для чёткости). Кружок-фон и свечение сняты. */
/* ⭐С148 (Михаил: «трубки у нейро-друга и нейроподруги маленькие, бедно смотрятся —
сделай побольше»). Размер кнопки 40→46px, самой трубки — задаём явно 24px
(раньше наследовался мелкий размер из разметки). */
.neuro-call-ic{flex:0 0 auto;margin-left:6px;width:46px;height:46px;border-radius:50%;
display:flex;align-items:center;justify-content:center;background:none;box-shadow:none}
.neuro-call-ic svg{transform:scaleX(-1);width:24px;height:24px}
.neuro-call-ic svg path{fill:#a98bff}
.neuro-row .neuro-call-ic{margin-left:8px} /* ⭐С111 трубка в правом крае (текст тянется) */
/* ⭐⭐⭐С120 (Михаил): плашка Нейро-друга/подруги — ДВЕ явные половины вместо одной переключаемой
роли (было непонятно, как поменять пол голоса — юзер спрашивал «как переключить»). Левая
половина = Друг (синяя трубка), правая = Подруга (розовая) — каждая кликабельна отдельно и
сразу звонит своему собеседнику, без похода в настройки. */
/* ⭐С120 ФИКС (Михаил: «карточка Нейро-друга/подруги пропала, осталась серая полоска»). КОРЕНЬ:
родитель #chats — display:flex;flex-direction:column — каждая карточка чата это flex-item.
Обычный .chat-item держит высоту через padding:12px 14px (см. базовое правило выше). Здесь я
обнулил padding:0 (нужно было под вплотную сдвинутые половины) — вместе с overflow:hidden и без
явного flex-shrink:0/min-height высота карточки схлопнулась до ~2px (реально измерено в DOM),
хотя ВНУТРЕННИЕ .neuro-half были нормальной высоты (64px) — просто родитель их не растягивал.
flex-shrink:0 + min-height гарантируют, что карточка больше не сожмётся независимо от того,
что именно в раскладке списка её схлопывало. */
.chat-item.neuro-split{padding:0;gap:0;overflow:hidden;flex-shrink:0;min-height:64px}
/* ⭐С121 (Михаил: «нажимается вся плашка, а должна только половинка») — родительский
:hover сброшен на прозрачный, подсветка нажатия теперь ТОЛЬКО у конкретной .neuro-half. */
.chat-item.neuro-split:hover{background:transparent}
.neuro-half{flex:1 1 50%;min-width:0;display:flex;align-items:center;gap:8px;padding:12px 10px;
cursor:pointer;-webkit-tap-highlight-color:transparent;transition:background .12s}
.neuro-half:active{background:rgba(255,255,255,.09)}
html.light .neuro-half:active{background:rgba(0,0,0,.06)}
.neuro-half:first-child{border-right:1px solid rgba(255,255,255,.1)}
.neuro-half .ci-av{width:40px;height:40px;flex:0 0 auto}
.neuro-half .ci-name{font-size:13.5px}
.neuro-half .ci-last{font-size:11.5px}
/* ⭐С148 трубки в половинках «Друг | Подруга» тоже крупнее (30→36px кнопка, 17→22px трубка) */
.neuro-half .neuro-call-ic{width:36px;height:36px;margin-left:auto}
.neuro-half .neuro-call-ic svg{width:22px;height:22px}
.neuro-call-ic-m svg path{fill:#6bb3ff}
.neuro-call-ic-f svg path{fill:#ff8fc7}
.aurora-hero .ci-badge{right:14px}
/* ⭐С91 badge непрочитанных — градиентный кружок с цифрой справа на карточке */
.ci-badge{flex:0 0 auto;min-width:20px;height:20px;padding:0 6px;border-radius:11px;
background:linear-gradient(135deg,var(--em),var(--em2));color:#04121a;
font-size:12px;font-weight:800;display:inline-flex;align-items:center;justify-content:center;
box-shadow:0 0 8px rgba(0,229,255,.5);align-self:center}
/* ⭐С91 МЕНЮ АДМИНА (кнопка в шапке + выпадающий список) */
/* ⭐С106 (Михаил): кнопка возможностей Aurora — заметная радужная плашка с искрами (было «⋮») */
.admin-menu-btn{cursor:pointer;flex:0 0 auto;width:38px;height:38px;border-radius:12px;
display:flex;align-items:center;justify-content:center;color:#04121a;
background:linear-gradient(135deg,var(--em),#8f6bff,var(--em2));
box-shadow:0 3px 12px -3px rgba(0,229,255,.5);transition:transform .18s,box-shadow .2s}
.admin-menu-btn:hover{transform:scale(1.06);box-shadow:0 4px 16px -3px rgba(143,107,255,.6)}
.admin-menu-btn:active{transform:scale(.94)}
/* ⭐⭐С110 КНОПКА-ТРУБКА голосового звонка Aurora Intelligence (слева от кнопки возможностей).
Фирменный градиент var(--em)→var(--em2) — как оформлено имя «Aurora Intelligence». */
/* ⭐С148 (Михаил: «в Aurora Intelligence трубка расположена в неправильную сторону» +
общая просьба сделать трубки крупнее). Кнопка 38→42px, сама трубка 20→24px, и главное —
scaleX(-1): трубка теперь смотрит в ту же сторону, что у нейро-друга/подруги.
Действует на обе кнопки этого класса — звонок Авроре и звонок Админу. */
.aurora-call-btn{cursor:pointer;flex:0 0 auto;width:42px;height:42px;border-radius:13px;margin-right:6px;
display:flex;align-items:center;justify-content:center;color:#04121a;
background:linear-gradient(135deg,var(--em),var(--em2));
box-shadow:0 3px 12px -3px rgba(0,229,255,.5);transition:transform .18s,box-shadow .2s}
.aurora-call-btn svg{transform:scaleX(-1);width:24px;height:24px}
.aurora-call-btn:hover{transform:scale(1.06);box-shadow:0 4px 16px -3px rgba(255,61,154,.6)}
.aurora-call-btn:active{transform:scale(.94)}
/* ⭐С92 ФИКС: .main > *{position:relative;z-index:1} (стр.370) перебивал absolute у меню —
оно вставало в поток flex-колонки (толкало шапку вниз, «пустая раскрытая шапка»). !important возвращает всплывашку. */
.admin-menu{position:absolute !important;top:calc(56px + var(--sat,env(safe-area-inset-top)));right:12px;z-index:60 !important;min-width:230px;
background:var(--panel,#0a0a0e);border:1px solid var(--hair);border-radius:14px;
box-shadow:0 12px 40px rgba(0,0,0,.6);overflow:hidden;padding:6px}
.admin-menu-item{display:flex;align-items:center;gap:12px;width:100%;background:none;border:none;
color:var(--fg,#fff);font-size:14.5px;padding:11px 12px;border-radius:9px;cursor:pointer;text-align:left;transition:background .15s}
.admin-menu-item:hover{background:rgba(255,255,255,.05)}
.admin-menu-item.danger{color:#ff6b6b}
.admin-menu-item .am-ic{font-size:17px;width:22px;text-align:center;flex:0 0 auto}
/* попап-оверлей (напоминания и простые попапы) */
.rem-overlay{position:fixed;inset:0;z-index:120;background:rgba(0,0,0,.6);backdrop-filter:blur(4px);
display:flex;align-items:center;justify-content:center;padding:16px}
.rem-box{width:100%;max-width:440px;max-height:88vh;display:flex;flex-direction:column;
background:var(--panel,#0a0a0e);border:1px solid var(--hair);border-radius:20px;overflow:hidden;
box-shadow:0 20px 60px rgba(0,0,0,.7)}
.rem-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px;border-bottom:1px solid var(--hair)}
.rem-head b{font-size:17px}
.rem-close{cursor:pointer;color:var(--muted);font-size:20px;line-height:1;padding:2px 6px}
.rem-close:hover{color:var(--em)}
.rem-body{padding:16px 18px;overflow-y:auto}
/* ⭐С104 РАЗДЕЛ «Что умеет Aurora Intelligence» — прокручиваемый профиль ассистента.
Тело без паддинга (hero на всю ширину), карточки функций с мини-иллюстрациями. */
.rem-body.about-ai{padding:0}
.aai-hero{padding:24px 20px 20px;text-align:center;position:relative;overflow:hidden}
.aai-hero::before{content:"";position:absolute;inset:-40% -20% auto -20%;height:200px;
background:radial-gradient(60% 80% at 50% 0,rgba(143,107,255,.22),transparent 70%);pointer-events:none}
.aai-robot{width:74px;height:74px;margin:0 auto 12px;display:block;filter:drop-shadow(0 8px 20px rgba(255,61,154,.32))}
.aai-hero h2{margin:0;font-size:21px;font-weight:800;letter-spacing:-.02em;
background:linear-gradient(100deg,#00E5FF,#FF3D9A,#8f6bff,#00E5FF,#FF3D9A);
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent}
.aai-hero p{margin:8px auto 0;max-width:300px;font-size:13.5px;line-height:1.5;color:var(--muted)}
.aai-aud{display:flex;gap:8px;padding:4px;margin:16px 18px 4px;background:var(--glass);border-radius:14px;border:1px solid var(--hair)}
.aai-aud button{flex:1;padding:9px;border:none;background:none;color:var(--muted);font-size:13px;font-weight:700;border-radius:10px;cursor:pointer;transition:.2s}
.aai-aud button.on{background:var(--panel);color:var(--txt,#fff);box-shadow:0 2px 8px rgba(0,0,0,.3)}
.aai-aud button.on::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;
background:linear-gradient(120deg,#00E5FF,#8f6bff,#FF3D9A,#22e3a0);margin-right:6px;vertical-align:1px}
.aai-label{padding:16px 20px 4px;font-size:11px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.aai-feat{display:flex;gap:13px;padding:14px 18px;align-items:flex-start}
.aai-feat + .aai-feat{border-top:1px solid var(--hair)}
.aai-thumb{flex:0 0 auto;width:92px;height:70px;border-radius:11px;overflow:hidden;background:var(--glass);border:1px solid var(--hair)}
.aai-thumb svg{width:100%;height:100%;display:block}
.aai-ftxt{flex:1;min-width:0}
.aai-ftxt h3{margin:0 0 3px;font-size:14.5px;font-weight:800}
.aai-ftxt h3 .fic{margin-right:5px}
.aai-ftxt p{margin:0;font-size:12.5px;line-height:1.45;color:var(--muted)}
.aai-say{margin-top:6px;font-size:12px;color:var(--em);background:rgba(0,229,255,.08);border-radius:8px;padding:5px 9px;display:inline-block;line-height:1.35}
.aai-foot{padding:18px 20px;text-align:center;font-size:12px;color:var(--muted);border-top:1px solid var(--hair);margin-top:6px}
/* календарь */
.rem-cal{background:var(--glass);border:1px solid var(--hair);border-radius:14px;padding:12px;margin-bottom:14px}
.rem-cal-top{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.rem-cal-title{font-weight:600;font-size:15px}
.rem-cal-nav{cursor:pointer;color:var(--em);font-size:22px;line-height:1;padding:0 10px;user-select:none}
.rem-cal-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:3px}
.rem-cal-dow{text-align:center;font-size:10px;color:var(--muted);padding:2px 0}
.rem-cal-day{aspect-ratio:1;display:flex;flex-direction:column;align-items:center;justify-content:center;
font-size:13px;border-radius:9px;cursor:pointer;position:relative;color:var(--fg,#fff);transition:background .15s}
.rem-cal-day.empty{cursor:default}
.rem-cal-day:not(.empty):hover{background:rgba(255,255,255,.06)}
.rem-cal-day.today{border:1px solid var(--em)}
/* ⭐С104 (Михаил): выбранная дата — ВСЕГДА радужная градиентная окантовка (не серая).
Прежний баг: .sel менял только фон, а рамка от .today (одноцветная) оставалась «серой».
Решение: градиентная рамка со СКРУГЛЁННЫМИ углами через двойной фон
(border-image не уважает border-radius, поэтому используем background + mask-composite).
Переопределяем и .today, и .today.sel — чтобы серая рамка не перебивала. */
.rem-cal-day.sel,
.rem-cal-day.today.sel{
background:transparent;color:var(--fg,#fff);font-weight:700;border:none;
}
.rem-cal-day.sel::before{
content:"";position:absolute;inset:0;border-radius:9px;padding:2px;
background:linear-gradient(135deg,#00E5FF,#8f6bff,#FF3D9A,#22e3a0);
-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);
-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none;
}
.rem-cal-dot{position:absolute;bottom:4px;width:5px;height:5px;border-radius:50%;background:var(--em2)}
.rem-cal-day.sel .rem-cal-dot{background:var(--em2)}
/* добавление */
.rem-add-row{display:flex;gap:8px;margin-top:8px}
.rem-when{flex:1;min-width:0}
.rem-add-btn{flex:0 0 auto;background:linear-gradient(135deg,var(--em),var(--em2));color:#04121a;
border:none;border-radius:11px;padding:0 16px;font-weight:700;font-size:14px;cursor:pointer;
/* ⭐С104 (Михаил): в разделах Заметки/Идеи/Задачи кнопка отдельная (без flex-соседа-инпута),
вертикальный padding был 0 → «сплюснутая». Даём высоту явно, текст по центру. */
min-height:44px;display:inline-flex;align-items:center;justify-content:center}
.rem-msg{font-size:12px;color:var(--em);margin-top:6px;min-height:14px}
.rem-msg.err{color:#ff6b6b}
/* список */
.rem-list{margin-top:14px;display:flex;flex-direction:column;gap:8px}
.rem-item{display:flex;align-items:flex-start;gap:10px;background:var(--glass);border:1px solid var(--hair);
border-radius:12px;padding:11px 12px}
.rem-item.done{opacity:.5}
.rem-item.done .rem-item-text{text-decoration:line-through}
.rem-item-check{flex:0 0 auto;width:22px;height:22px;border-radius:7px;border:1.5px solid var(--em);
cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--em);margin-top:1px}
.rem-item.done .rem-item-check{background:var(--em);color:#04121a}
.rem-item-body{flex:1;min-width:0}
.rem-item-text{font-size:14px;line-height:1.35;word-break:break-word}
.rem-item-when{font-size:11px;color:var(--muted);margin-top:3px}
.rem-item-del{flex:0 0 auto;color:var(--muted);cursor:pointer;font-size:16px;padding:0 4px}
.rem-item-del:hover{color:#ff6b6b}
/* ⭐С117 (аудит staging, Михаил: «в одной карточке несколько функций — нужны галочки внутри») —
чек-лист подзадач внутри детальной карточки идеи/задачи, тот же визуальный язык, что
.rem-item-check (общий раздел напоминаний), но компактнее. */
.aid-checklist{display:flex;flex-direction:column;gap:8px;margin-bottom:12px}
.aid-check-row{display:flex;align-items:flex-start;gap:10px;background:var(--glass);
border:1px solid var(--hair);border-radius:10px;padding:9px 11px;cursor:pointer}
.aid-check-box{flex:0 0 auto;width:20px;height:20px;border-radius:6px;border:1.5px solid var(--em);
display:flex;align-items:center;justify-content:center;font-size:13px;color:var(--em);margin-top:1px}
.aid-check-row.done .aid-check-box{background:var(--em);color:#04121a}
.aid-check-row.done .aid-check-label{text-decoration:line-through;opacity:.6}
.aid-check-label{flex:1;min-width:0;font-size:14px;line-height:1.35;word-break:break-word}
/* ⭐С104 заголовок выбранного дня над списком напоминаний + кнопка «показать все» */
.rem-day-head{display:flex;align-items:center;justify-content:space-between;
margin:4px 0 8px;font-size:13px;font-weight:700;color:var(--txt,#fff)}
.rem-day-all{font-size:12px;font-weight:600;color:var(--em);cursor:pointer}
/* ⭐С104 карточка Заметки/Идеи/Задачи: заголовок + превью текста, тап раскрывает попап */
.rem-item-body.aim-open{cursor:pointer}
.aim-preview{font-size:12px;color:var(--muted);margin-top:3px;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.35}
.aid-fulltext{font-size:14.5px;line-height:1.55;white-space:pre-wrap;word-break:break-word;color:var(--txt,#fff)}
.aid-actions{display:flex;gap:8px;margin-top:16px}
/* ⭐С104 (Михаил): поле редактирования пункта. Кнопка «Сохранить» — В ШАПКЕ (всегда над
клавиатурой и плашкой-тулбаром iOS, не проваливается). Попап прижат к верху, textarea тянется. */
/* ⭐⭐С111 редактируемые по тапу заголовок/текст карточки (contenteditable) */
#aid-title[contenteditable]{outline:none;cursor:text;border-radius:6px;padding:1px 4px;margin:-1px -4px;transition:background .15s}
#aid-title[contenteditable]:focus{background:rgba(0,229,255,.10);box-shadow:inset 0 0 0 1px rgba(0,229,255,.35)}
#aid-text[contenteditable]{outline:none;cursor:text;border-radius:8px;padding:8px 10px;margin:0 -2px;min-height:60px;
white-space:pre-wrap;transition:background .15s}
#aid-text[contenteditable]:focus{background:rgba(0,229,255,.07);box-shadow:inset 0 0 0 1px rgba(0,229,255,.28)}
#aid-title[contenteditable]:empty:before,#aid-text[contenteditable]:empty:before{content:attr(data-ph);color:#6f8299;pointer-events:none}
#ai-item-detail .rem-box{max-height:92dvh}
.aid-edit-ta{width:100%;min-height:120px;resize:none;line-height:1.5;font-size:14.5px}
#ai-item-detail.editing{align-items:flex-start;padding-top:calc(8px + var(--sat,env(safe-area-inset-top)))}
#ai-item-detail.editing .rem-box{height:auto;max-height:88dvh}
#ai-item-detail.editing .rem-body{max-height:calc(88dvh - 60px);overflow-y:auto}
#ai-item-detail.editing .aid-edit-ta{min-height:40dvh}
.rem-empty{text-align:center;color:var(--muted);font-size:13px;padding:16px 0}
.rem-hint{text-align:center;color:var(--muted);font-size:11.5px;margin-top:14px;line-height:1.4}
/* ⭐С91 ГРУППЫ/КАНАЛЫ: результаты поиска, выбранные, участники */
.gc-results{display:flex;flex-direction:column;gap:4px}
/* ⭐⭐С112 (Михаил): глобальный поиск людей ПОД списком чатов (как Telegram). Появляется при вводе. */
#global-search{display:none;padding:4px 8px 10px}
#global-search.on{display:block}
#global-search .gs-head{font-size:12px;font-weight:700;letter-spacing:.03em;text-transform:uppercase;
color:var(--muted);padding:8px 8px 6px}
#global-search .gc-result{padding:8px 8px}
#global-search .gs-empty{padding:10px 8px;color:var(--muted);font-size:13px}
.gc-result{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:10px;cursor:pointer;transition:background .15s}
.gc-result:hover{background:rgba(255,255,255,.05)}
.gc-result .gc-av{width:34px;height:34px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--em),var(--em2));color:#04121a;font-weight:700;font-size:14px;overflow:hidden}
.gc-result .gc-av img{width:100%;height:100%;object-fit:cover}
.gc-result .gc-info{flex:1;min-width:0}
.gc-result .gc-nm{font-size:14px;font-weight:600}
.gc-result .gc-un{font-size:12px;color:var(--muted)}
/* ⭐С104 бизнес-мета в результате поиска: компания·город и контакты (номер-маска/email) */
.gc-result .gc-meta{font-size:12px;color:var(--muted);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-result .gc-contact{font-size:11.5px;color:var(--em);margin-top:1px;font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gc-result .gc-plus{color:var(--em);font-size:20px;flex:0 0 auto}
.gc-chosen{display:flex;flex-wrap:wrap;gap:8px}
.gc-empty{color:var(--muted);font-size:13px}
.gc-chip{display:inline-flex;align-items:center;gap:6px;background:var(--glass);border:1px solid var(--em);
border-radius:20px;padding:5px 10px;font-size:13px}
.gc-chip .gc-x{cursor:pointer;color:var(--muted);font-weight:700}
.gc-chip .gc-x:hover{color:#ff6b6b}
.gi-members{display:flex;flex-direction:column;gap:4px}
.gi-member{display:flex;align-items:center;gap:10px;padding:8px 6px}
.gi-member .gc-av{width:36px;height:36px;border-radius:10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;
background:linear-gradient(135deg,var(--em),var(--em2));color:#04121a;font-weight:700;overflow:hidden}
.gi-member .gc-av img{width:100%;height:100%;object-fit:cover}
.gi-member .gm-info{flex:1;min-width:0}
.gi-member .gm-nm{font-size:14px;font-weight:600}
.gi-member .gm-role{font-size:11px;color:var(--em)}
.gi-member .gm-del{color:var(--muted);cursor:pointer;font-size:15px;padding:0 6px}
.gi-member .gm-del:hover{color:#ff6b6b}
/* ⭐С96 (Михаил): аватар группы/канала по умолчанию — БЕЗ цветного фона (оранж/синий убраны),
только иконка (👥 группа, 📢 канал) на прозрачном фоне, крупнее. */
.ci-av-group,.ci-av-channel{background:transparent!important;font-size:26px!important;box-shadow:none!important}
/* ⭐С145v8 (Михаил поймал: у «Избранное»/«Админ (лично)»/«Aurora Новости» время внутри .ci-top
съезжало НИЖЕ верха аватара) — align-items:baseline выравнивал по базовой линии текста, а
время(11px) и имя(14.5px) имеют разные шрифты → разные baseline. flex-start прижимает оба
строго к верху строки, вровень с аватаром — как в остальном списке чатов. */
.ci-top{display:flex;justify-content:space-between;align-items:flex-start;gap:8px}
.ci-name{font-size:14.5px;font-weight:600}
/* ⭐С145v5 (Михаил поймал: глобальный nowrap на .ci-name сломал «Нейродруг»/«Нейроподруга» —
там имя специально в 2 строки через ). Одна строка + обрезка многоточием — ТОЛЬКО у
карточек списка чатов (класс вешает JS в makeChatCardSkeleton, не общий .ci-name). */
.ci-name-cardlist{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0;display:block}
/* ⭐С90 (правка): буквы A/I в «Admin Intelligence» — читаются как «AI» = искусственный интеллект.
Раньше терялись в тексте (просто цветной градиент той же кегли). Теперь: крупнее, жирнее,
лёгкое свечение — чтобы смысл «AI» считывался с первого взгляда. */
/* ⭐С91 буквы A/I «Admin Intelligence»: раньше drop-shadow-свечение делало их МУТНЫМИ.
Теперь — КАПСУЛА: залитый градиентом квадратик с тёмной чёткой буквой внутри.
Читается сразу как «AI», резко, без размытия. */
/* ⭐С92 ФИНАЛ №2 (решение Михаила): капсулы-квадратики убраны совсем — вся надпись
«Admin Intelligence» одним градиентом в фирменном стиле AURORA (как «AURORA» на лендинге/
экране входа), без выделения отдельных букв. Никакой геометрии/vertical-align — обычный
текстовый градиент через background-clip, ведёт себя как единый текст на любой платформе. */
.ai-name{background:linear-gradient(100deg,var(--em),var(--em2),#8f6bff,var(--em),var(--em2));
background-size:300% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
font-weight:800}
.ci-last{font-size:13px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:2px}
.ci-last-text{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
/* ⭐С145v7 (Михаил, голосом поправил 5 раз — история в git blame). ИТОГ: время ЖЁСТКО прибито
к верху карточки (align-self:flex-start — родитель .chat-item центрирует по умолчанию,
из-за чего v6 «прыгало»: колонка без булавки короче колонки с булавкой, и center-центрирование
давало РАЗНУЮ позицию времени в зависимости от того, что внутри). Галочка вообще ВЫНЕСЕНА из
этой колонки (см. .ci-tick-cardlist ниже, абсолютно внизу-справа) — значит .ci-side содержит
только toprow(время)+pin(булавка), а флаг «есть/нет булавки» на позицию времени не влияет. */
.ci-side{flex:0 0 auto;align-self:flex-start;display:flex;flex-direction:column;align-items:flex-end;gap:4px;min-width:34px}
.ci-toprow{display:flex;align-items:center;gap:3px}
/* колокольчик СЛЕВА от времени, в одну строку — не под ним, иначе колонка расширяется по высоте */
.ci-mute{font-size:10px;opacity:.85;visibility:hidden}
.chat-item.muted-chat .ci-mute{visibility:visible}
.ci-time{font-size:11px;color:var(--muted)}
.ci-pin{font-size:11px;opacity:.85;display:none}
.chat-item.pinned-chat .ci-pin{display:block}
/* галочка — ОТДЕЛЬНО от .ci-side, абсолютно внизу-справа карточки (не тянет время за собой) */
.ci-tick-cardlist{position:absolute;right:14px;bottom:10px}
.ci-tick{font-size:11px;letter-spacing:-2px;color:var(--muted);transition:color .35s ease}
.ci-tick.read{color:var(--em)}
.themes{display:flex;gap:8px;padding:12px 16px;border-top:1px solid var(--hair);flex-wrap:wrap;align-items:center}
.swatch{width:26px;height:26px;border-radius:50%;cursor:pointer;border:2px solid transparent;
flex:0 0 auto;position:relative}
.swatch.on{border-color:#fff;box-shadow:0 0 10px currentColor}
.swatch.add{display:flex;align-items:center;justify-content:center;font-size:18px;font-weight:400;
color:var(--muted);background:var(--glass);border:1px dashed var(--bubble-border);overflow:hidden}
.swatch.add input[type=color]{position:absolute;inset:0;opacity:0;cursor:pointer;border:none;padding:0}
/* ⭐С89 задача Н: режим редактирования палитры */
.palette-edit{background:none;border:none;color:var(--em);font-size:12px;font-weight:600;cursor:pointer;
padding:2px 4px;font-family:inherit}
.palette-edit.active{color:var(--em2)}
/* крестик удаления — виден только в режиме редактирования, только на удаляемых свотчах */
.swatch .rm{position:absolute;top:-6px;right:-6px;width:16px;height:16px;border-radius:50%;
background:#ff3b30;color:#fff;font-size:12px;line-height:16px;text-align:center;cursor:pointer;
display:none;box-shadow:0 0 6px rgba(255,59,48,.7);border:1.5px solid var(--panel);z-index:2}
#themes.editing .swatch:not(.add):not(.locked) .rm{display:block}
#themes.editing .swatch:not(.add){animation:swWobble .35s ease-in-out infinite alternate}
@keyframes swWobble{from{transform:rotate(-4deg)}to{transform:rotate(4deg)}}
/* бренд в сайдбаре — просто голубой текст БЕЗ свечения (свечение только на экране входа) */
.brand{font-size:17px;letter-spacing:2px;font-weight:700;font-style:normal;color:#fff} /* ⭐С96 курсив убран; ⭐С112 (Михаил): имя в шапке БЕЛОЕ, не бирюзовое */
/* ⭐С116 МАРКЕР STAGING (Михаил): визуально отличить staging от боевой прямо в шапке.
Активно ТОЛЬКО при data-env="staging" на (ставит staging-сервер). Боевая — не тронута. */
html[data-env="staging"] #me-name{ color:#ff8a8a !important; font-weight:600; } /* имя светло-красным */
html[data-env="staging"] .brand::after{ content:" · STAGING"; color:#ff8a8a; font-size:11px; letter-spacing:1px; font-weight:600; opacity:.9; }
/*════════════════════ 04-chat-thread.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ── область переписки ── */
/* height НЕ здесь — её задаёт .side,.main{height:var(--app-h)} (схема «фон стоит, контент ужимается») */
.main{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;overflow:hidden}
/* ⭐С88 ЗАКРЕПЛЁННЫЕ свечения области чата (по макету Михаила): красное свеч. справа-вверху заходит
на шапку, циан слева-внизу у поля ввода. position:absolute к .main → НЕ двигаются при прокрутке
ленты (скроллится только #thread внутри). pointer-events:none → не мешают кликам. */
/* ⭐С88 красное пятно справа-вверху — ПРИГЛУШЁННОЕ (Михаил: слишком яркое, темнее), тёмно-бордовое */
.main::before{content:"";position:absolute;top:-40px;right:-40px;width:78%;height:40%;pointer-events:none;z-index:0;
background:
radial-gradient(300px 220px at 100% 0%, rgba(180,30,45,.28), transparent 60%),
radial-gradient(480px 340px at 100% 0%, rgba(150,35,45,.16), transparent 68%)}
/* нижнее циан-свечение убрано — живой фон .app::before уже даёт переливы у поля (не перекрывает сообщения) */
/* содержимое чата — над свечениями */
.main > *{position:relative;z-index:1}
/* ⭐С88 LIQUID GLASS шапка (стиль iOS): сильный blur+saturate, полупрозрачная, красное пятно
ясно просвечивает; светлый блик сверху и мягкая грань снизу читаются как жидкое стекло. */
.head{display:flex;align-items:center;gap:11px;padding:13px 18px;position:relative;
padding-top:calc(13px + var(--sat,env(safe-area-inset-top))); /* ⭐ ниже чёлки/статусбара iPhone */
background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(5,5,7,.28));
-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
border-bottom:1px solid rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 1px 12px rgba(0,0,0,.25)}
.head .back{display:none;font-size:22px;cursor:pointer;margin-right:2px}
.h-av{width:40px;height:40px;border-radius:12px;font-weight:600;
display:flex;align-items:center;justify-content:center;color:#04121a;
background:linear-gradient(135deg,var(--em),var(--em2))}
.head b{font-size:17px;white-space:nowrap} /* ⭐С94 v185 (Михаил): имя в шапке крупнее, как в Telegram (17) */ /* ⭐С92 nowrap — «Admin Intelligence» переносилось посреди слова «Intelligence» на узком экране (между капсулой «I» и «ntelligence» нет явного пробела, браузер резал inline-элементы) */
/* ⭐С94 (Михаил): статус в шапке СЕРЫЙ (логин собеседника и т.п.); бирюзовый — ТОЛЬКО
«твой ассистент» у Aurora Intelligence (класс st-em ставит switchChat) */
.head i{font-style:normal;font-size:12px;color:var(--muted);display:block}
.head i.st-em{color:var(--em)}
.head .reload{font-size:22px;cursor:pointer;color:var(--muted);padding:4px 6px;flex:0 0 auto;
transition:transform .3s,color .2s}
.head .reload:hover{color:var(--em)}
.head .reload:active{transform:rotate(180deg)}
/* ⭐С98 панель режима выбора сообщений (перекрывает шапку) */
/* ⭐С112 (Михаил): панель выбора теперь ВНИЗУ — обычный блок в потоке .main НАД формой ввода
(position:absolute/safe-area больше не нужны: снизу чёлки нет, шапку не перекрываем). */
#select-bar{display:flex;align-items:center;gap:14px;min-height:52px;padding:6px 16px;
background:var(--bg);border-top:1px solid var(--hair);z-index:6}
#select-bar.hidden{display:none}
#select-bar .sb-close,#select-bar .sb-del,#select-bar .sb-fwd{font-size:22px;cursor:pointer;flex:0 0 auto;line-height:1;padding:4px}
#select-bar .sb-count{flex:1;font-size:16px;font-weight:600}
#select-bar .sb-del,#select-bar .sb-fwd{opacity:.5;pointer-events:none;transition:opacity .15s}
#select-bar .sb-del.on,#select-bar .sb-fwd.on{opacity:1;pointer-events:auto}
/* пузырь в режиме выбора: галочка слева, подсветка выбранного */
body.selmode .b{cursor:pointer}
.b.sel-on{outline:2px solid var(--em);outline-offset:1px}
.b .selmark{display:none}
body.selmode .b .selmark{display:inline-flex;position:absolute;left:-24px;top:50%;transform:translateY(-50%);
width:20px;height:20px;border-radius:50%;border:2px solid var(--muted);align-items:center;justify-content:center;
font-size:12px;color:#04121a;background:transparent}
body.selmode .b.sel-on .selmark{background:var(--em);border-color:var(--em)}
body.selmode .b{position:relative;margin-left:26px}
#thread{flex:1 1 auto;min-height:0;overflow-y:auto;padding:18px 16px;display:flex;flex-direction:column;gap:9px;
-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
/* ⭐С114 приём Telegram против прыжка ленты при появлении клавиатуры: браузерный якорь держит
позицию контента при изменении высоты контейнера (vv.resize) — низ остаётся на месте без
рывка «подпрыгнул вниз и вернулся». Работает вместе с доскроллом в vv-обработчике. */
overflow-anchor:auto}
/* ⭐С94 (Михаил): шрифт сообщений КАК В TELEGRAM (iOS-дефолт 17pt; было 14px — мелко);
v185: пузыри ШИРЕ (было 70% — большие пустые поля по бокам) */
/* ⭐С96 (Михаил): long-press по сообщению вызывал НАТИВНОЕ iOS-меню выделения текста поверх нашего
меню пересылки. Гасим системное выделение/callout на пузырях — остаётся только наш JS-таймер. */
.b{max-width:86%;padding:8px 12px;font-size:16px;line-height:1.4;word-wrap:break-word;font-weight:400;
-webkit-touch-callout:none;-webkit-user-select:none;user-select:none}
/* ⭐С148 ПЕРЕНОСЫ СТРОК: посты каналов приходят многострочными (списки, абзацы), но без
pre-wrap браузер схлопывал все переводы строк в пробелы — пост читался сплошной стеной.
pre-wrap сохраняет переносы автора и при этом переносит длинные строки по ширине. */
.b .cap{white-space:pre-wrap}
/* ═══ ⭐⭐С148 ФОРМАТИРОВАНИЕ ТЕКСТА из Telegram ═══
Разметку строит renderMsgText (16-sounds.js) через createElement — HTML не парсится,
эти классы только оформляют уже созданные узлы. */
/* Цитата — вертикальная полоса слева, как в Telegram. ⚠️ Внутри .cap (inline-элемент)
настоящий
невалиден, поэтому рисуем div со стилями цитаты. */
.b .msg-quote{display:block;margin:5px 0;padding:4px 0 4px 11px;
border-left:3px solid var(--em);border-radius:2px;
background:rgba(255,255,255,.05);opacity:.95}
/* Моноширинный код */
.b .msg-code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;
background:rgba(0,0,0,.28);border-radius:5px;padding:1px 5px}
/* Спойлер: текст скрыт «шумом», раскрывается по тапу (как в Telegram) */
.b .msg-spoiler{background:rgba(140,150,175,.55);color:transparent;border-radius:4px;
cursor:pointer;transition:background .18s,color .18s;
text-shadow:0 0 9px rgba(255,255,255,.5);-webkit-user-select:none;user-select:none}
.b .msg-spoiler.revealed{background:transparent;color:inherit;text-shadow:none;cursor:auto}
/* Подчёркнутый и зачёркнутый — чуть мягче, чтобы не спорили с цветом текста */
.b u{text-decoration-thickness:1.5px;text-underline-offset:2px}
.b s{opacity:.75}
/* ═══ ⭐⭐С148 РЕАКЦИИ НА СООБЩЕНИЯ ═══ */
/* Ряд быстрых реакций в меню долгого нажатия (над пунктами), как в Telegram */
.mm-reactions{display:flex;gap:6px;justify-content:space-between;padding:10px 12px 4px;
overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.mm-reactions::-webkit-scrollbar{display:none}
.mm-react{flex:0 0 auto;width:42px;height:42px;border-radius:50%;cursor:pointer;
font-size:22px;line-height:1;display:flex;align-items:center;justify-content:center;
background:var(--glass);border:1px solid var(--hair);transition:transform .12s}
.mm-react:active{transform:scale(1.18)}
/* Плашки поставленных реакций под пузырём */
.msg-reacts{display:flex;flex-wrap:wrap;gap:4px;margin-top:5px}
.react-chip{display:inline-flex;align-items:center;gap:3px;padding:2px 7px;border-radius:11px;
font-size:12.5px;line-height:1.5;cursor:pointer;user-select:none;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.14)}
/* своя реакция — подсвечена фирменным цветом, сразу видно, что уже поставил */
.react-chip.mine{background:rgba(0,229,255,.18);border-color:var(--em);color:var(--txt)}
.react-chip:active{transform:scale(.94)}
/* ⭐С96 (Михаил): на ДЕСКТОПЕ (браузер MacBook) шрифт сообщений был крупным/жирным по сравнению
с Telegram. Уменьшаем до телеграмного (~14.5px, обычный вес). На телефоне 16px оставляем
(иначе iOS зумит поле/мелко на маленьком экране). */
@media(min-width:901px){ .b{font-size:14.5px;font-weight:400;line-height:1.55} .b .cap{font-weight:400;line-height:1.55} }
/* ⭐С98 (Михаил: «на MacBook опять крупный/жирный»): порог 901px хрупкий — в PWA/узком окне
ширина падает ниже и правило отваливалось. Дублируем триггер по УСТРОЙСТВУ (мышь/трекпад +
наведение = десктоп; на телефоне не сработает) — шрифт держится телеграмным независимо от ширины окна.
⭐С98 (Михаил: «текст слитный, строки жмутся»): line-height 1.4→1.55 на десктопе — строки
дышат, длинные абзацы читаются как в Telegram (на телефоне 1.4 оставляем — там 16px и так просторно). */
@media(pointer:fine) and (hover:hover){ .b{font-size:14.5px;font-weight:400;line-height:1.55;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale} .b .cap{font-weight:400;line-height:1.55} }
.b .t{font-size:11px;opacity:.55;float:right;margin:5px 0 -2px 10px}
/* ⭐С88 имя отправителя — РОЗОВЫМ (магента --em2); v185 (Михаил): подпись КРУПНЕЕ (была мелкой) */
.b .who{font-size:14.5px;font-weight:700;color:var(--em2);display:block;margin-bottom:2px}
.b .who.ai-name{color:transparent} /* ⭐С92 «Admin Intelligence» градиентом — .b .who{color} иначе перебивает */
/* ⭐С94 (Михаил: «подпись радужную, а не однотонную»): у .ai-name растяжка градиента 300% —
на КОРОТКОЙ подписи в пузыре был виден узкий срез одного цвета. Внутри пузыря градиент
сжимается в размер текста — все цвета видны, подпись реально радужная. */
.b .who.ai-name{background-size:100% 100%}
.in{align-self:flex-start;background:var(--glass);border:1px solid var(--in-border);
border-radius:16px 16px 16px 5px}
/* ⭐С93 окантовка входящих сообщений Админа — ТОЛЬКО рамка градиентом, вид пузыря — идентичен обычным
.in (тот же var(--glass) поверх фона чата). Три предыдущих подхода не сработали: border-image
игнорирует border-radius; двухслойный background/псевдоэлемент без непрозрачной подложки — сам .in
полупрозрачен ВЕЗДЕ на 4.5%, поэтому градиент позади просвечивал по ВСЕЙ площади, не только по кромке
(глаз легко ловит даже 4.5% яркого цвета). Решение: псевдоэлемент ::before с градиентом ПОЗАДИ +
НЕПРОЗРАЧНАЯ подложка var(--bg) (тот же фон, на котором лежит вся переписка) НА САМОМ .in под его
обычным var(--glass) — итоговый видимый оттенок пузыря = glass-поверх-bg, как у всех остальных .in. */
.in.admin-in{position:relative;background:linear-gradient(var(--glass),var(--glass)) padding-box,
var(--bg) padding-box}
.in.admin-in::before{content:"";position:absolute;inset:-1.5px;border-radius:inherit;
background:linear-gradient(100deg,var(--em),var(--em2),#8f6bff,var(--em));z-index:-1}
/* ⭐ вариант B «Глубокий эфир»: исходящие — СТЕКЛЯННЫЕ с неон-обводкой (не сплошная заливка).
--out-bg задан в каждой теме (без color-mix — он ломал Safari/iPhone). */
/* ⭐ ближе к макету B: почти прозрачный стеклянный пузырь, тонкая обводка, деликатное свечение */
/* ⭐⭐С89 задача И — вернуть СЛАБУЮ окантовку (регрессия после стрелок дала яркий неон).
НЕПРОЧИТАННОЕ моё: СЕРАЯ окантовка + серые галочки, БЕЗ свечения.
ПРОЧИТАННОЕ: неоновые галочки + ПРИГЛУШЁННЫЙ неон (лёгкое свечение, как было раньше — не ярко). */
.out{align-self:flex-end;font-weight:400;color:var(--txt);
background:var(--out-bg);
border:1px solid rgba(255,255,255,.14); /* серая нейтральная окантовка непрочитанного */
border-radius:16px 16px 5px 16px;
transition:border-color .35s ease, box-shadow .35s ease}
.out .t{color:var(--muted)} /* время у непрочитанного — тоже приглушённое */
.b .rd{display:inline-block;font-size:10px;margin-left:4px;letter-spacing:-2px;
color:var(--muted);vertical-align:baseline;transition:color .35s ease}
/* прочитанное: приглушённый неон — тонкая цветная обводка + ДЕЛИКАТНОЕ свечение (не двойное/яркое) */
.out.read{border-color:var(--out-border);
box-shadow:0 0 6px var(--bubble-shadow)}
.out.read .t{color:var(--out-accent, var(--em))}
.out.read .rd{color:var(--out-accent, var(--em))}
.day{align-self:center;font-size:11px;color:var(--muted);padding:3px 12px;
background:var(--daybg);border-radius:20px;margin:4px 0}
/* ⭐С94 МАГАЗИН МОДУЛЕЙ — полноэкранная витрина в стиле App Store (эталон Михаила):
крупные карточки с «продуктовым» мокапом UI модуля сверху + полоса установки снизу. */
/* ⭐С133 единый канон подложки: blur(7px) + .28 */
#modules-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:170;
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
/* ⭐С132 (Михаил: «фон Магазина модулей чисто чёрный — стекло на карточках/кнопках непонятно
что стекло, надо задний фон посветлее/с градиентом, чтобы эффект стекла подчёркивался») —
было плоским var(--bg). Тонкий фирменный радиальный градиент в углах (тот же приём, что уже
используют .device-stage/лендинг), едва заметный, не спорит с карточками. */
#modules-sheet{position:fixed;inset:0;z-index:171;
background:radial-gradient(900px 500px at 100% 0%, rgba(0,229,255,.07), transparent 60%),
radial-gradient(800px 480px at 0% 100%, rgba(255,61,154,.06), transparent 60%), var(--bg);
display:flex;flex-direction:column;animation:msheetUp .22s ease-out}
@keyframes msheetUp{from{transform:translateY(100%)}to{transform:translateY(0)}}
.msheet-handle{display:none}
/* ⭐С96 (Михаил): полоска под шапкой магазина — радужная ЗАТУХАЮЩАЯ от центра к краям
(было: ровная серая линия). Фирменный штрих. */
.msheet-top{flex:0 0 auto;display:flex;align-items:center;justify-content:space-between;position:relative;
padding:calc(14px + var(--sat,env(safe-area-inset-top))) 18px 12px;border-bottom:none}
.msheet-top::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;
background:linear-gradient(90deg,transparent,var(--em) 30%,#8f6bff 50%,var(--em2) 70%,transparent)}
.msheet-title{font-weight:800;font-size:20px}
.msheet-close{width:32px;height:32px;border-radius:50%;background:var(--glass);border:1px solid var(--hair);
display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--txt);font-size:15px}
.msheet-scroll{flex:1;overflow-y:auto;padding:16px 16px calc(24px + var(--sab,env(safe-area-inset-bottom)))}
.msheet-grid{display:grid;grid-template-columns:1fr;gap:16px;max-width:520px;margin:0 auto}
/* ⭐С95 (Михаил): на широком экране (десктоп/планшет-ландшафт) — 2 колонки карточек,
на телефоне — 1 (места мало). Брейкпоинт 720px = типичная граница телефон/планшет-десктоп. */
@media(min-width:720px){
.msheet-grid{grid-template-columns:1fr 1fr;max-width:900px}
}
/*════════════════════ 05-store.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ── карточка модуля (крупный мокап + полоса установки) ── */
/* ⭐С96 (Михаил): окантовка карточки СВЕТЛЕЕ — тёмная сливала карточки в одну сплошную. */
/* ⭐С132 (Михаил: «окантовка идёт по всей карточке, а верхняя часть уже с градиентным фоном —
там кант не нужен, оставляем только снизу») — border убран с .mod-card целиком, добавлен только
на .mod-band (низ с текстом) — left/right/bottom, без top (стык с картинкой mod-media бесшовный). */
.mod-card{border-radius:20px;overflow:hidden;background:var(--panel);cursor:pointer}
.mod-card:active{transform:scale(.99)}
.mod-media{position:relative;height:220px;padding:20px 18px;display:flex;flex-direction:column;overflow:hidden}
.mod-media::after{content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(60% 70% at 20% 10%,rgba(255,255,255,.10),transparent 60%)}
.mm-top{position:relative;z-index:1;display:flex;align-items:center;gap:9px;margin-bottom:auto}
.mm-ic{width:36px;height:36px;border-radius:11px;display:flex;align-items:center;justify-content:center;
font-size:17px;background:rgba(255,255,255,.14);flex-shrink:0}
.mm-nm{font-size:12.5px;font-weight:800;color:#fff}
.mm-caption{position:relative;z-index:1;font-size:18px;font-weight:800;color:#fff;line-height:1.22;
margin-top:auto;text-wrap:balance}
/* ⭐С96 (Михаил, 2-й заход): низ карточки (название+Открыть) ВСЁ ЕЩЁ сливался. Усиливаем:
заметно ТЁМНЕЕ фон подвала (не полупрозрачный glass) + более явная линия-разделитель. */
.mod-band{padding:14px 16px 16px;background:rgba(0,0,0,.28);
border:1px solid rgba(255,255,255,.14);border-top:1px solid rgba(255,255,255,.12);
border-radius:0 0 20px 20px}
html.light .mod-band{background:rgba(0,0,0,.05);border-color:rgba(0,0,0,.10)}
/* ⭐С96 (Михаил): мелкие шрифты карточек подняты до читаемых (люди с плохим зрением);
крупные (.mod-title) оставлены крупными. */
/* ⭐С132 (Михаил: «не может быть у каждой карточки "Новинка" — единый брендовый лейбл AURORA
градиентом как логотип + Live Platform серым») — заменяет прежний per-модульный m.eyebrow. */
.mod-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;margin-bottom:5px}
.brand-grad{font-weight:800;background:linear-gradient(90deg,var(--em),#8f6bff,var(--em2));
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.brand-gray{font-weight:600;color:var(--muted)}
.mod-title{font-size:16px;font-weight:800;line-height:1.2;margin-bottom:10px;color:var(--txt)}
.mod-app-row{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--hair);
border-radius:13px;padding:8px 10px}
.mod-app-ico{width:34px;height:34px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:16px;background:rgba(255,255,255,.06)}
.mod-app-tag{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.mod-app-nm{font-size:14px;font-weight:700;color:var(--txt)}
.mod-app-sub{font-size:12px;color:var(--muted);margin-top:1px}
/* ⭐С106 (Михаил): «Открыть» = приглушённая БИРЮЗА (доступно), «Скоро» = светло-РОЗОВАЯ.
Раньше soon-класс красил кнопку по мокапу (mock:"soon"), из-за чего у готовых
конференций кнопка «Открыть» ошибочно была фиолетовой. Теперь цвет «Скоро» привязан
к ОТДЕЛЬНОМУ классу .state-soon (ставится только при реальном m.soon), а мокап-заглушка
.soon на цвет кнопки больше не влияет. */
/* ⭐С132 (Михаил): градиент/яркий цвет — только для Aurora Intelligence. «Открыть» — стекло по
эталону .attach-menu (просвечивает), не плоский полупрозрачный белый. */
.mod-get{margin-left:auto;flex-shrink:0;font-size:14.5px;font-weight:700;padding:8px 18px;border-radius:999px;
background:linear-gradient(0deg, rgba(18,22,30,.82), rgba(28,34,46,.78));
-webkit-backdrop-filter:blur(20px) saturate(1.8); backdrop-filter:blur(20px) saturate(1.8);
border:1px solid rgba(255,255,255,.16);color:#eef4ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
transform:translateZ(0)}
/* ⭐С106 кнопка «Скоро» — светло-розовая, приглушённая (остаётся смысловым исключением — статус, не действие) */
.mod-card.state-soon .mod-get{background:rgba(255,138,193,.16)!important;color:#ff8ac1;border-color:transparent!important}
/* ⭐С132 (Михаил: «Управление счетами и RoboForex — голые свечи без фона, Магазин/Конференции
тёмно-коричневые с песочными часами хотя готовы») — фон карточки был завязан на m.mock, у модулей
с одинаковым mock ("chart": Управление счетами+RoboForex; общий соон-мокап без реального
m.soon: Магазин+Конференции) не было своего правила вовсе. Теперь класс = m.id, у каждого свой цвет. */
.mod-card.shields .mod-media{background:linear-gradient(155deg,#0a1a2e 0%,#142440 55%,#1d1030 100%)}
.mod-card.shields .mod-eyebrow{color:var(--em)}
.mod-card.roboforex .mod-media{background:linear-gradient(155deg,#0a1530 0%,#122a5c 55%,#0a1020 100%)}
.mod-card.roboforex .mod-eyebrow{color:#5b8fe0}
.mod-card.wallet .mod-media{background:linear-gradient(155deg,#1a0e2e 0%,#0d0a18 100%)}
.mod-card.wallet .mod-eyebrow{color:#d6a8ff}
.mod-card.altyn .mod-media{background:linear-gradient(155deg,#1a2e14 0%,#0d2410 55%,#0a1408 100%)}
.mod-card.altyn .mod-eyebrow{color:#6ee8ad}
.mod-card.shop .mod-media{background:linear-gradient(155deg,#2e1024 0%,#24081c 55%,#180512 100%)}
.mod-card.shop .mod-eyebrow{color:#ff8ac1}
.mod-card.conf .mod-media{background:linear-gradient(155deg,#0a2e26 0%,#0d241c 55%,#081810 100%)}
.mod-card.conf .mod-eyebrow{color:#3fd6a8}
/* «Скоро» (реальный m.soon, не мокап) — приглушённый коричневый + затемнение, отдельным state-классом */
.mod-card.state-soon .mod-media{background:linear-gradient(155deg,#241a0e,#1a1208)}
.mod-card.state-soon .mod-eyebrow{color:#ffb066}
.mod-card.state-soon{opacity:.7}
/* ⭐С97 (Михаил): карточка Telegram — фирменный синий фон + логотип */
.mod-card.telegram .mod-media{background:linear-gradient(155deg,#0e2233 0%,#123047 55%,#0a1826 100%)}
.mod-card.telegram .mod-eyebrow{color:#2AABEE}
.detail-media.telegram{background:linear-gradient(160deg,#0e2233,#123047,#0a1826)}
/* ⭐С132 (Михаил: «в правом углу везде появился одинаковый квадратик-подложка (background+shadow
прямоугольник) — стало однотипно; раньше (жетон Кошелька .art-coin, купюра Altyn) картинка была
СВОБОДНОЙ ФОРМОЙ без рамки, так красивее; слева текста немного — саму иллюстрацию можно крупнее»).
.art-tg/.art-tg-logo (квадратный логотип-плашка) и .art-mini-* (единая квадратная подложка под
ВСЕ картинки) — убраны. Каждый мокап теперь рисует СВОЮ форму без общего прямоугольного контейнера
(position:absolute + inline width/height/right/top из JS, как уже было у .art-coin/.art-altyn). */
.art-freechart, .art-freebag, .art-freechat{position:absolute;z-index:0}
.mini-bar{position:absolute;bottom:0;width:13%;border-radius:2px 2px 0 0;background:rgba(255,255,255,.16)}
/* Конференции — сетка 2×2 остаётся (осмысленная метафора «окна видеозвонка»), но БЕЗ общей
внешней плашки-фона: сама сетка прозрачная, у каждой ячейки свой цвет/скругление. */
.art-freeconf{position:absolute;z-index:0;display:grid;grid-template-columns:repeat(2,1fr);gap:6px}
.conf-cell{border-radius:10px;background:linear-gradient(155deg,rgba(63,214,168,.4),rgba(63,214,168,.14));
display:flex;align-items:center;justify-content:center;box-shadow:0 6px 16px rgba(0,0,0,.25)}
.conf-cell.you{background:linear-gradient(155deg,rgba(63,214,168,.7),rgba(63,214,168,.3))}
/* мокап: баланс кошелька — крупный жетон с бликом + сетка узора */
.mm-balance{position:relative;z-index:1}
.mm-balance .lbl{font-size:10px;text-transform:uppercase;letter-spacing:.07em;color:#cdbdf7;font-weight:700;margin-bottom:6px}
.mm-balance .amt{font-size:30px;font-weight:800;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.mm-balance .net{font-size:11px;color:#7ee8ff;margin-top:6px;font-family:ui-monospace,monospace}
.mm-actions{position:relative;z-index:1;display:flex;gap:8px;margin-top:14px}
.art-coin{position:absolute;z-index:0;border-radius:50%;
background:radial-gradient(circle at 32% 28%,#fff 0%,#ffe9a8 8%,#d6a8ff 32%,#8f6bff 65%,#4a2f8f 100%);
box-shadow:0 12px 30px rgba(143,107,255,.4),inset 0 -6px 14px rgba(0,0,0,.25)}
.art-coin::after{content:"₮";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
font-weight:800;color:rgba(255,255,255,.5);font-size:38%;text-shadow:0 2px 4px rgba(0,0,0,.3)}
/* мокап: Оплата Алтын — купюра-карточка + QR-плитка */
.art-altyn{position:absolute;inset:0;z-index:0;overflow:hidden}
.art-altyn .bill{position:absolute;border-radius:12px;
background:linear-gradient(135deg,#2fa876 0%,#1d7a53 55%,#12492f 100%);
box-shadow:0 10px 24px rgba(0,0,0,.4);border:1px solid rgba(255,255,255,.18)}
.art-altyn .bill::before{content:"";position:absolute;inset:8px;border:1px dashed rgba(255,255,255,.28);border-radius:8px}
.art-altyn .bill .sum{position:absolute;left:14px;bottom:10px;font-weight:800;color:#eafff2;font-size:15px;font-variant-numeric:tabular-nums}
.art-altyn .qr{position:absolute;border-radius:10px;background:#fff;box-shadow:0 8px 20px rgba(0,0,0,.35)}
.art-altyn .qr-px{position:absolute;background:#0a1408}
.mm-actions div{flex:1;text-align:center;font-size:11px;font-weight:800;padding:9px 0;border-radius:12px;
background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
/* мокап: заглушка «скоро» */
.art-soon{position:relative;z-index:1;flex:1;display:flex;align-items:center;justify-content:center;font-size:52px;opacity:.85}
/* ── детальная страница модуля (полноэкранный попап поверх магазина) ── */
#mod-detail{position:fixed;inset:0;z-index:180;background:var(--bg);display:flex;flex-direction:column}
#mod-detail.hidden{display:none}
.detail-scroll{flex:1;overflow-y:auto}
.detail-media{position:relative;padding:calc(26px + var(--sat,env(safe-area-inset-top))) 20px 24px;
display:flex;flex-direction:column;overflow:hidden;min-height:280px}
.detail-media::before{content:"";position:absolute;inset:0;z-index:0;
background:radial-gradient(55% 60% at 20% 10%,rgba(143,107,255,.4),transparent 65%),
radial-gradient(50% 55% at 90% 95%,rgba(0,229,255,.24),transparent 65%)}
.dm-top{position:relative;z-index:1;display:flex;align-items:center;gap:10px}
.dm-ic{width:42px;height:42px;border-radius:13px;display:flex;align-items:center;justify-content:center;
font-size:20px;background:rgba(255,255,255,.14);flex-shrink:0}
.dm-nm{font-size:14px;font-weight:800;color:#fff}
.dm-balance{position:relative;z-index:1;margin-top:auto}
.dm-balance .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.07em;color:#cdbdf7;font-weight:700;margin-bottom:7px}
.dm-balance .amt{font-size:38px;font-weight:800;color:#fff;letter-spacing:-.01em;font-variant-numeric:tabular-nums;line-height:1}
.dm-balance .net{font-size:12px;color:#7ee8ff;margin-top:8px;font-family:ui-monospace,monospace}
.dm-actions{position:relative;z-index:1;display:flex;gap:9px;margin-top:18px}
.dm-actions div{flex:1;text-align:center;font-size:12px;font-weight:800;padding:11px 0;border-radius:13px;
background:rgba(255,255,255,.12);color:#fff;border:1px solid rgba(255,255,255,.16)}
.detail-close{position:absolute;top:calc(14px + var(--sat,env(safe-area-inset-top)));right:14px;z-index:3;
width:30px;height:30px;border-radius:50%;background:rgba(0,0,0,.5);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center;color:#fff;font-size:14px;cursor:pointer}
.detail-band{padding:14px 18px 16px;background:var(--panel)}
.detail-eyebrow{font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;color:#d6a8ff;margin-bottom:6px}
.detail-title{font-size:19px;font-weight:800;line-height:1.18;margin-bottom:12px;color:var(--txt);text-wrap:balance}
.detail-app-row{display:flex;align-items:center;gap:9px;background:var(--glass);border:1px solid var(--hair);
border-radius:13px;padding:9px 11px}
.detail-app-ico{width:38px;height:38px;border-radius:11px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:18px;background:rgba(255,255,255,.06)}
.detail-app-tag{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.detail-app-nm{font-size:14px;font-weight:700;color:var(--txt)}
.detail-app-sub{font-size:12px;color:var(--muted);margin-top:1px}
/* ⭐С132 (Михаил): градиент/яркий цвет — только для Aurora Intelligence, остальные кнопки —
единое тёмное матовое стекло (см. .w-btn в 09-glass-global.css). Раньше была бирюза. */
/* ⭐С132 (Михаил: «Открыть» на детальной странице потерял окантовку — стал просто текстом, не
кнопкой») — при переходе на «убрать бирюзу» забыл дать замену (не входит в глобальный .w-btn
список 09-glass-global.css, там только .drawer-store-btn и другие, не .detail-get). Свой стеклянный фон. */
.detail-get{margin-left:auto;font-size:14.5px;font-weight:700;padding:9px 18px;border-radius:999px;flex-shrink:0;
background:linear-gradient(0deg, rgba(18,22,30,.82), rgba(28,34,46,.78));
-webkit-backdrop-filter:blur(26px) saturate(1.8); backdrop-filter:blur(26px) saturate(1.8);
border:1px solid rgba(255,255,255,.16);color:#eef4ff;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18);
transform:translateZ(0)}
/* ⭐С132 «Убрать из добавленных» / «Вернуть в добавленные» — второстепенное действие под шапкой модуля,
заметно приглушённее detail-get (текст, не заливка), чтобы не спорило с «Открыть» за внимание. */
.detail-remove{width:100%;margin-top:10px;padding:9px 0;border-radius:11px;font-size:12.5px;font-weight:600}
.detail-remove:active{opacity:.7}
/* ⭐С132 (Михаил: «Убрать из добавленных» — лёгкий красный оттенок стекла, деструктивное действие) */
.detail-remove.danger{background:rgba(72,26,32,.45)!important;border-color:rgba(255,120,130,.32)!important;color:#ffc9cf!important}
/* ⭐С98 (Михаил): вкладки «Описание»/«Инструкция по установке» в карточке модуля */
.detail-tabs{display:flex;gap:6px;padding:14px 18px 0;border-bottom:1px solid var(--hair)}
.dt-tab{font-size:13.5px;font-weight:700;color:var(--muted);padding:8px 4px 12px;cursor:pointer;
border-bottom:2px solid transparent;transition:color .15s,border-color .15s}
.dt-tab.active{color:var(--txt);border-color:var(--em)}
.install-steps{display:flex;flex-direction:column;gap:16px}
.install-step{display:flex;align-items:flex-start;gap:12px}
.is-num{width:26px;height:26px;border-radius:50%;flex-shrink:0;display:flex;align-items:center;justify-content:center;
font-size:13px;font-weight:800;color:#fff;background:linear-gradient(135deg,#8f6bff,#d6a8ff)}
.is-t{font-size:14.5px;font-weight:700;color:var(--txt);margin-bottom:2px}
.is-d{font-size:13px;color:var(--muted);line-height:1.45}
.detail-body{padding:18px}
.detail-body.hidden{display:none}
.detail-body p{font-size:13.5px;line-height:1.55;color:var(--muted);margin:0 0 18px}
.detail-body b{color:var(--txt)}
.detail-shots{display:flex;gap:14px;overflow-x:auto;margin-bottom:20px;padding-bottom:2px;
scrollbar-width:none;-webkit-overflow-scrolling:touch}
.detail-shots::-webkit-scrollbar{display:none}
.shot{flex-shrink:0;width:220px;border-radius:22px;overflow:hidden;position:relative;aspect-ratio:9/17.5;
display:flex;flex-direction:column;justify-content:flex-end;padding:18px 14px 22px}
.shot::before{content:"";position:absolute;inset:0;z-index:0}
.shot.s1::before{background:radial-gradient(120% 90% at 20% 0%,#2a1a4d 0%,#17102b 55%,#0c0916 100%)}
.shot.s2::before{background:radial-gradient(120% 90% at 80% 0%,#0e2a3d 0%,#0d1a2e 55%,#0a0f1c 100%)}
.shot.s3::before{background:radial-gradient(120% 90% at 50% 100%,#142e28 0%,#0f1c1a 55%,#0a1210 100%)}
.shot-cap{position:relative;z-index:2;font-size:12px;font-weight:800;color:#fff;line-height:1.3;
margin-top:14px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
/* ⭐С132 мини-мокап реального экрана модуля — SVG, отцентрированный в свободной зоне карточки
НАД подписью (не приклеен к верху — иначе визуально пусто снизу на коротких мокапах). Подпись
остаётся внизу на градиентной подложке (::before у .shot). z-index под .shot-cap. */
.shot-art{position:absolute;left:0;right:0;top:0;bottom:56px;z-index:1;display:flex;align-items:center;
justify-content:center;overflow:hidden}
.shot-art svg{width:100%;height:auto;display:block}
/* ⭐С95 крупная иконка фичи в центре скриншота-заглушки — вместо пустого градиента.
.shot уже flex-column;justify-content:flex-end — margin:auto 0 выталкивает иконку
к центру доступного пространства НАД подписью, которая остаётся у низа. */
.shot-ico{position:relative;z-index:2;font-size:64px;text-align:center;width:100%;
margin:auto 0;filter:drop-shadow(0 8px 20px rgba(0,0,0,.4))}
.feat-list{display:flex;flex-direction:column;gap:10px;margin-bottom:6px}
.feat-item{display:flex;align-items:flex-start;gap:11px}
.feat-ico{width:32px;height:32px;border-radius:10px;flex-shrink:0;display:flex;align-items:center;
justify-content:center;font-size:14px;background:rgba(143,107,255,.14)}
/* ⭐С96 (Михаил): шрифты детальной страницы модуля тоже подняты до читаемых (были мелкие внизу) */
.feat-t{font-size:14.5px;font-weight:700;color:var(--txt);margin-bottom:2px}
.feat-d{font-size:13px;color:var(--muted);line-height:1.4}
.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:12px;padding-top:16px;margin-top:6px;border-top:1px solid var(--hair)}
.info-cell .k{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-bottom:3px}
.info-cell .v{font-size:14px;font-weight:700;color:var(--txt)}
#module-frame-wrap{position:fixed;inset:0;z-index:172;display:flex;flex-direction:column;background:var(--bg)}
#module-frame-wrap.hidden{display:none}
.mframe-head{display:flex;align-items:center;gap:8px;padding:calc(8px + var(--sat,env(safe-area-inset-top))) 12px 8px;
border-bottom:1px solid var(--hair);background:var(--panel)}
#mframe-title{flex:1;font-weight:700;font-size:15px}
.mframe-btn{width:34px;height:34px;display:flex;align-items:center;justify-content:center;
border-radius:10px;background:var(--glass);border:1px solid var(--hair);cursor:pointer;font-size:15px;user-select:none}
#mframe-body{flex:1;position:relative}
#mframe-body iframe{position:absolute;inset:0;width:100%;height:100%;border:none;background:#fff}
/* ⭐С94 правый нижний угол — колонка: стрелка «в конец чата» ВНИЗУ, свёрнутые модули НАД ней */
/* ⭐С94 v187 (Михаил): плавающая колонка модулей справа-внизу — ТОЛЬКО когда открыт чат/десктоп;
на списке чатов быстрый доступ к модулям даёт ряд #top-row (кружки под шапкой). */
#fab-col{position:fixed;right:14px;bottom:calc(84px + var(--sab,env(safe-area-inset-bottom)));z-index:130;
display:flex;flex-direction:column;align-items:flex-end;gap:10px}
@media(max-width:900px){ #fab-col:not(.in-chat){display:none !important} }
/* ── ⭐С94 РЯД ПОИСКА под шапкой ── */
#top-row{display:flex;align-items:center;gap:8px;margin:12px 14px;min-width:0}
#top-row .search{flex:1;margin:0}
/* ── ⭐С95 (Михаил, живой тест, третий заход): прямоугольная кнопка со скруглёнными краями
(тот же стиль, что поле поиска — одинаковая высота), СПРАВА от поиска/в шапке чата.
Внутри — сетка 2×2 маленьких квадратов с радужной ОКАНТОВКОЙ (полые, не залитые) —
классическая иконка «модули/приложения» неоновым контуром вместо заливки. ── */
.mod-tab{width:44px;height:44px;flex-shrink:0;border-radius:13px;
background:var(--glass);border:1px solid var(--hair);
display:flex;align-items:center;justify-content:center;cursor:pointer;
transition:transform .12s}
.mod-tab:active{transform:scale(.92)}
/* ⭐С112 кнопка «Звонки» в ряду поиска — тот же размер/форма, что модули; иконка-трубка бирюзовая */
.calls-tab{width:44px;height:44px;flex-shrink:0;border-radius:13px;
background:var(--glass);border:1px solid var(--hair);color:var(--em);
display:flex;align-items:center;justify-content:center;cursor:pointer;transition:transform .12s}
.calls-tab:active{transform:scale(.92)}
/* ⭐С148 (Михаил: «трубку развернуть в другую сторону и сделать чуть покрупнее —
иначе рядом с новой иконкой магазина смотрится мелко»). scaleX(-1) — тот же разворот,
что у трубок нейро-друга/подруги, чтобы все трубки в приложении смотрели одинаково. */
.calls-tab svg{transform:scaleX(-1);width:26px;height:26px}
/* ⭐С148 (Михаил выбрал вариант №5 «Плитка-грид» из макета 10 иконок, С147):
четыре плитки разной высоты в синих оттенках. Абстрактный «раздел с модулями»
вместо предметной метафоры лавки — читается спокойнее и не спорит с трубкой рядом.
Размер 23→26px: иконка стала визуально крупнее, под неё подтянута и трубка звонков. */
.mod-tab-shop{width:26px;height:26px;opacity:.95}
.mod-tab.open .mod-tab-shop{opacity:1}
/* ⭐С95 пока панель открыта — кнопка подсвечена акцентной окантовкой (сигнал состояния) */
.mod-tab.open{border-color:var(--em);background:rgba(0,229,255,.08)}
/* ── ⭐С94 ВЫДВИЖНАЯ ПАНЕЛЬ (#mod-drawer) — единый компактный вид, открывается язычком ── */
/* ⭐С95 (Михаил): раньше фон за панелью оставался чётким — список чатов просвечивал и «мешался»
с открытой панелью. Добавлен блюр + усилено затемнение — фон читается как единый задний план. */
/* ⭐С132 (Михаил, живое сравнение на iPhone двух скриншотов: «Медиатека выглядит стеклом,
Активные модули — нет»). Найдена причина: у эталонного .attach-menu (10-composer-media.css)
backdrop-подложки вообще НЕТ — чат за ним обычной яркости. У #mod-drawer был отдельный
затемняющий backdrop (.28 + blur) — ДВОЙНОЕ затемнение (backdrop + само стекло панели)
гасило просвечивание, панель выглядела сплошной тёмной, а не прозрачным стеклом. Backdrop
убран полностью — панель ведёт себя точно как .attach-menu (закрывается кликом мимо, без
подложки-гашения). */
/* ⭐С132 (Михаил: «сначала добьёмся эффекта стекла как у Медиатеки, ПОТОМ вернём размытие и лёгкое
затемнение фона») — слабое затемнение+блюр, заметно легче исходного (.42), чтобы не спорило
с проверкой самого эффекта просвечивания панели. */
/* ⭐С132 (Михаил, iPhone: «плашка всё равно заливка, не просвечивает») — новая гипотеза: ДВА
независимых backdrop-filter подряд (сначала на backdrop, потом на самой панели) могут не
«стекать» корректно на iOS Safari — второй blur видит уже растеризованный результат первого,
не живой слой. Backdrop-filter убран отсюда полностью, ТОЛЬКО плоское затемнение без блюра —
единственный источник blur теперь #mod-drawer сам по себе (как у .attach-menu, где backdrop
вообще нет). */
/* ⭐С133: подложка стала ПОЛНОСТЬЮ ПРОЗРАЧНОЙ (только ловит клик мимо). Причина:
backdrop-filter размывает ТО, ЧТО ОТРИСОВАНО ПОД элементом. Под панелью лежал
сплошной чёрный прямоугольник подложки — то есть панель честно размывала его, а не
чат. Размытие однородного чёрного неотличимо от матовой заливки = «металл».
У эталонного .attach-menu подложки нет вообще — под ним живой чат, поэтому стекло видно. */
/* ⭐С133 (Михаил): раз попап стал реально прозрачным, задний план (чаты) не должен
«лезть на передний план» — подложка размывает и слегка затемняет его.
ВАЖНО про радиус: подложка размывает чаты, а панель поверх неё читает УЖЕ размытое.
Если задрать радиус здесь — панель снова увидит однородную массу и стекло пропадёт
(ровно тот баг, что чинили весь С133). Поэтому умеренные 7px, не 20-30px. */
#mod-drawer-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.28);z-index:139;
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px)}
/* ⭐С96 (Михаил, 2-й заход): панель модулей — ПО ЦЕНТРУ экрана на ВСЕХ устройствах (была смещена
вверх к язычку и «выглядела просто/дёшево»). Магазин модулей = гордость AURORA → презентабельный
вид: центрированная модалка, радужная окантовка сверху, крупнее, мягкая тень, плавное появление. */
/* ⭐С132 (Михаил: «по бокам ещё есть расстояние на телефоне, можно расширить, чтобы влезало
4 иконки в ряд») — было 92vw+22px паддинг (реально ~315px рабочей ширины, 3 плитки по 78px
влезали впритык, 4-я не помещалась). Расширено до 96vw, паддинг чуть уже по бокам. */
/* ⭐С132 (Михаил: «плашка сливается с затемнённым фоном за ней, нужно стекло, чтобы отделялась»)
было сплошным var(--panel) — визуально не отличалось от .modules-backdrop сзади. Тёмное матовое
стекло (тот же рецепт, что .w-btn в 09-glass-global.css) — светлее фона + чуть заметная кромка. */
/* ⭐С132 (Михаил): обёртка позиционируется по центру, панель и кнопка «Магазин модулей» внутри неё
идут КОЛОНКОЙ, но визуально раздельные блоки (кнопка не внутри стеклянной плашки). */
/* ⭐С132 (Михаил, iPhone: «плашка всё равно не просвечивает, хотя фон за ней размыт») — гипотеза:
WebKit «замораживает» backdrop-filter на статичном кадре, когда анимация (transform+opacity)
идёт на РОДИТЕЛЕ элемента со стеклом, а не на самом стеклянном элементе (у эталонного
.attach-menu анимация amPop — на САМОЙ панели, без обёртки-родителя с transform). Анимация
появления перенесена с #mod-drawer-wrap на #mod-drawer (см. ниже), обёртка теперь БЕЗ animation. */
/* ⭐С132 (Михаил, iPhone, ПРОДОЛЖАЕТ не работать после translateZ/anim-фиксов) — новая гипотеза:
#mod-drawer (position:fixed + backdrop-filter) вложен ВНУТРИ #mod-drawer-wrap, у которого ТОЖЕ
position:fixed + transform:translate(-50%,-50%) — двойной fixed+transform создаёт вложенный
stacking/containing-block context, в котором iOS Safari достоверно теряет связь backdrop-filter
с реальным нижним слоем (задокументированный класс WebKit-багов: backdrop-filter на fixed-
потомке fixed+transform-родителя). Обёртка теперь ТОЛЬКО flex-контейнер БЕЗ position/transform
своих — центрирование переехало на сам #mod-drawer (position:fixed напрямую, без родителя-fixed
между ним и body). */
/* ⭐С133: обёртка БОЛЬШЕ НЕ position:fixed — эталонный .attach-menu вообще не имеет
fixed-предков. Центрирование переехало на саму панель (fixed + центрирование
через left/right/margin — БЕЗ transform, чтобы не создавать лишний containing block). */
/* ⭐С133: обёртка = fixed-слой БЕЗ transform (transform создаёт containing block, из-за
которого iOS теряет связь backdrop-filter с нижним слоем). Сама панель внутри —
position:absolute, ровно как эталонный .attach-menu (absolute, не fixed). */
#mod-drawer-wrap{position:fixed;inset:0;z-index:140;pointer-events:none;
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px}
#mod-drawer-wrap > *{pointer-events:auto}
/* ⭐С132 (Михаил: «плашка серая, металлическая, не просвечивает — сделай по принципу окна
скрепки/Медиатеки, вот там ПРАВДОПОДОБНОЕ стекло») — заменено на тот же рецепт, что .attach-menu
(10-composer-media.css): вертикальный градиент двух тёмных тонов + saturate(1.8), а не
плоский серый rgba с brightness. */
/* ⭐С132 (Михаил, живой тест на iPhone: «плашка не просвечивает вообще, как металл») — эталонный
.attach-menu (10-composer-media.css) имеет transform:translateZ(0) с явным комментарием «форс
GPU-слоя: iOS не гасит backdrop-filter при тапе». У #mod-drawer этого форса не было — плюс
она вложена ВНУТРЬ #mod-drawer-wrap с animation+transform на родителе (у .attach-menu анимация
на САМОЙ панели, без обёртки-родителя с transform) — на iOS Safari это гасит backdrop-filter
после анимации. Добавлен тот же transform:translateZ(0) форс. */
/* ⭐С132 anim-появление теперь ТОЛЬКО opacity (не transform+scale, как раньше) — animation с
transform на элементе конфликтовал бы с постоянным translateZ(0) форсом (один и тот же
свойство "transform" нельзя одновременно анимировать keyframe'ом и держать статичным GPU-форсом
без объединения в одну цепочку) — это тоже могло мешать iOS корректно держать backdrop-filter
на всех кадрах анимации, а не только на последнем. */
/* ⭐С133 ГЛАВНОЕ: overflow-y:auto УБРАН с самой панели (переехал на внутренний
#mod-drawer-scroll). На iOS Safari скроллируемый контейнер получает собственный
композиторский слой с отдельным backing store — backdrop-filter перестаёт сэмплить
нижний слой и вырождается в плоскую заливку. У эталона .attach-menu — overflow:hidden.
Также: панель теперь сама position:fixed без fixed-родителя и без transform-центровки. */
#mod-drawer{overflow:hidden;position:relative;flex-shrink:0;
width:min(440px,96vw);max-height:56vh;
/* ⭐С133 НАСТОЯЩАЯ ПРИЧИНА «матового металла» (найдена экспериментом в браузере):
не тёмный фон и не слои, а САМ РАДИУС размытия. blur(28px) усредняет такую широкую
область, что аватарки/картинки под панелью превращаются в однородную серую массу —
фон технически проходит (проверено: выключение backdrop-filter делает панель
прозрачной, весь контент виден), но после размытия неразличим. Плотность заливки
роли почти не играла: при .10 панель выглядела так же, как при .82.
Решение: маленький радиус (6px) + лёгкая заливка → фон узнаваем, стекло сохранено.
У эталонного .attach-menu blur(26px) работает лишь потому, что панель маленькая
и висит вплотную над контрастной лентой сообщений. */
background:rgba(20,24,32,.22);
-webkit-backdrop-filter:blur(6px) saturate(1.6); backdrop-filter:blur(6px) saturate(1.6);
border:1px solid rgba(255,255,255,.16);
border-radius:24px;padding:18px 16px 20px;
display:flex;flex-direction:column;
transform:translateZ(0);
animation:modDrawerIn .18s ease-out;
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 40px 100px -30px rgba(0,0,0,.75)}
@keyframes modDrawerIn{from{opacity:0}to{opacity:1}}
/* радужная полоска-акцент сверху панели (фирменный штрих магазина) */
#mod-drawer::before{content:"";position:absolute;top:0;left:16px;right:16px;height:3px;border-radius:0 0 3px 3px;
background:linear-gradient(90deg,var(--em),#8f6bff,var(--em2))}
.drawer-title{font-size:16px;font-weight:700;color:var(--txt);margin:6px 0 14px;text-align:center}
/* ⭐С133: внутренний скролл-контейнер — скроллится ОН, не сама стеклянная панель. */
#mod-drawer-scroll{overflow-y:auto;-webkit-overflow-scrolling:touch;min-height:0;flex:1 1 auto}
/* ⭐С133: кнопка «Магазин модулей» — собственный fixed под панелью (обёртка-флекс убрана). */
.drawer-store-btn{width:min(440px,96vw);flex-shrink:0}
@media(min-width:900px){ #mod-drawer{width:min(560px,86vw);padding:22px 28px 24px} .drawer-store-btn{width:min(560px,86vw)} }
/* ⭐⭐С164 (Михаил: «кнопка добавить в друзья везде съехавшая») — кнопки действий с человеком
(Добавить в друзья / Открыть чат / Принять приглашение) переиспользуют внешний вид
.drawer-store-btn, но НЕ её геометрию: та ширина (440/560px) рассчитана на шторку модулей
во всю ширину экрана. В узкой карточке профиля и в баннере внутри чата кнопка оказывалась
шире родителя и торчала за его левый край. Здесь ширина по содержимому с потолком по
контейнеру, и кнопка центрируется независимо от text-align родителя. */
.friend-act-btn{width:auto;max-width:100%;min-width:min(220px,100%);margin-left:auto;margin-right:auto;display:block}
@media(min-width:900px){ .friend-act-btn{width:auto} }
.drawer-grip{width:34px;height:4px;border-radius:2px;background:var(--hair);margin:0 auto 12px}
.drawer-row{display:flex;flex-direction:column;gap:8px}
#drawer-running-row:empty,#drawer-running-row:has(#drawer-running:empty){display:none}
.drawer-label{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700}
.drawer-divider{height:1px;background:var(--hair);margin:12px 0}
/* ⭐С106 (Михаил): модули в шторке переносятся на НЕСКОЛЬКО СТРОК (flex-wrap), а не уезжают
горизонтальным скроллом — теперь все видны сразу, попап растёт по высоте (max-height:82vh).
Иконки прижаты влево, ровными рядами. */
.module-scroll{display:flex;flex-wrap:wrap;gap:12px 8px;justify-content:flex-start;padding:4px 0 2px}
.module-scroll::-webkit-scrollbar{display:none}
.module-scroll:empty::after{content:"Пусто";font-size:12px;color:var(--muted);padding:4px 0}
/* ⭐С96 (Михаил): иконки модулей в панели КРУПНЕЕ (было 48px — «слишком маленькие»),
название модуля — БЕЛЫМ (var(--txt)) вместо серого. */
.mod-chip{flex:0 0 auto;width:74px;display:flex;flex-direction:column;align-items:center;gap:6px;cursor:pointer;position:relative}
.mod-chip-ic{width:62px;height:62px;border-radius:18px;display:flex;align-items:center;justify-content:center;
font-size:28px;background:var(--glass);border:1.4px solid var(--hair);position:relative}
.mod-chip.running .mod-chip-ic{background:rgba(0,229,255,.1);border-color:var(--em)}
/* ⭐С132 (Михаил, живой тест на телефоне: «в слове конференции последняя буква не влезает») —
70px было мало для длинных названий ("видео конференции") даже в 2 строки при 11px, буква
обрезалась overflow:hidden. Шире плитка + чуть мельче шрифт + разрешаем перенос ЛЮБОГО слова
(word-break), не только по пробелу — иначе длинное слово всё равно вылезет за 3-ю строку. */
.mod-chip-nm{font-size:10.5px;color:var(--txt);text-align:center;line-height:1.22;font-weight:600;
display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;width:100%;
word-break:break-word;overflow-wrap:anywhere}
.mod-chip-ic .ci-badge{position:absolute;top:-4px;right:-5px;min-width:16px;height:16px;font-size:10px;padding:0 4px}
/* ⭐⭐С105 (Михаил): единый стиль иконок — сама плитка (modTileHTML) рисует фон и скругление.
Обнуляем серые подложки/рамки старых контейнеров, чтобы не было «плитки в плитке». */
.mm-ic, .mod-app-ico, .dm-ic, .detail-app-ico, .mod-chip-ic{
background:none!important;border:none!important;border-radius:0!important;overflow:visible}
/* ⭐С106 (Михаил): убрали бирюзовое кольцо вокруг запущенных плиток — оно лезло за край
ряда/под шапку и выглядело неаккуратно. «Запущенные» теперь выглядят как «Добавленные»
(различаются секцией-заголовком, а не обводкой). */
.mod-chip.running .mod-chip-ic{background:none!important;border:none!important;box-shadow:none}
/* ⭐С132 градиент — только для Aurora Intelligence, эта кнопка теперь единое тёмное стекло (.w-btn в 09-glass-global.css) */
/* ⭐С133 (Михаил: «кнопка объективно вообще не просвечивает»). Причина — НЕ радиус:
09-glass-global.css задаёт всем стеклянным кнопкам плотную заливку .82/.78 !important,
сквозь неё фон не проходит ни при каком blur. Здесь перебиваем ТОЛЬКО для этой кнопки
(тот же рецепт, что у #mod-drawer) — остальные стеклянные кнопки Aurora не трогаем,
их облегчение = отдельная задача с проверкой читаемости на всех экранах и в light-теме. */
.drawer-store-btn{padding:13px;border-radius:14px;cursor:pointer;font-size:14.5px}
/* ⭐С96 (Михаил): свёрнутые модули больше НЕ плавают кружками справа поверх ленты (перекрывали
время/текст сообщений). Теперь — горизонтальный ряд под шапкой открытого чата (#chat-mod-row).
Иконки КВАДРАТНЫЕ со скруглёнными углами (не круглые). #fab-mods в правой колонке пуст/не используется. */
#fab-mods{display:none}
#chat-mod-row{display:flex;align-items:center;gap:8px;padding:7px 14px;overflow-x:auto;
flex:0 0 auto;border-bottom:1px solid var(--hair);background:rgba(8,8,12,.28);
-webkit-overflow-scrolling:touch;scrollbar-width:none}
#chat-mod-row::-webkit-scrollbar{display:none}
#chat-mod-row:empty{display:none}
html.light #chat-mod-row{background:rgba(245,247,252,.55)}
/* ⭐С97 (Михаил): плитка модуля = иконка + ПОДПИСЬ (иконки похожи, без названия непонятно) */
.cmr-mod{flex:0 0 auto;padding:5px 10px;border-radius:12px;display:flex;
align-items:center;gap:7px;font-size:18px;background:var(--panel);
border:1px solid var(--hair);box-shadow:0 3px 10px rgba(0,0,0,.3);cursor:pointer;transition:transform .12s;white-space:nowrap}
.cmr-mod .cmr-nm{font-size:12.5px;font-weight:500;color:var(--txt)}
.cmr-mod:active{transform:scale(.94)}
html.light .cmr-mod{box-shadow:0 3px 8px rgba(80,90,140,.18)}
#scroll-down-btn{width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--panel);border:1px solid var(--hair);color:var(--em);cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.35);
opacity:0;pointer-events:none;transform:translateY(6px);transition:opacity .18s,transform .18s}
#scroll-down-btn.show{opacity:1;pointer-events:auto;transform:none}
html.light #scroll-down-btn{box-shadow:0 4px 14px rgba(80,90,140,.22)}
/* ⭐С104 (Михаил): стрелка «наверх» — тап по статус-бару iOS не прокручивает внутренний
overflow-контейнер в WKWebView, поэтому даём явную плавающую кнопку (как #scroll-down-btn).
Появляется, когда активный список (лента чата ИЛИ список чатов) прокручен ВНИЗ >300px. */
/* ⭐С104 стрелка «наверх» — свой fixed-контейнер (не в #fab-col). Справа снизу, над таб-баром. */
#scroll-up-btn{position:fixed;right:14px;bottom:calc(84px + var(--sab,env(safe-area-inset-bottom)));z-index:125;
width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;
background:var(--panel);border:1px solid var(--hair);color:var(--em);cursor:pointer;
box-shadow:0 4px 14px rgba(0,0,0,.35);
opacity:0;pointer-events:none;transform:translateY(-6px);transition:opacity .18s,transform .18s}
#scroll-up-btn.show{opacity:1;pointer-events:auto;transform:none}
html.light #scroll-up-btn{box-shadow:0 4px 14px rgba(80,90,140,.22)}
/* кнопка сохранения фото в лайтбоксе (слева от крестика) */
/* ⭐С98 (Михаил: «высокое фото/скриншот закрывает кнопки скачать и крестик, на белом фото сливаются»):
z-index явно ВЫШЕ #lb-content (иначе last-in-DOM-wins у высокой картинки перекрывает кнопки),
плюс тёмная полупрозрачная подложка-кружок с тенью — не сливается ни с тёмным, ни с белым фото. */
#lightbox .lb-save{position:absolute;top:calc(16px + var(--sat,env(safe-area-inset-top)));left:18px;z-index:2;
font-size:22px;color:#fff;cursor:pointer;line-height:1;padding:8px;border-radius:50%;
background:rgba(0,0,0,.45);box-shadow:0 2px 10px rgba(0,0,0,.4);backdrop-filter:blur(6px);
display:flex;align-items:center;justify-content:center}
/* ⭐ форма прижата к САМОМУ низу (отступ 2px, как было при том поведении, что понравилось Михаилу).
Жесты iPhone работают поверх. */
/* ⭐С88 LIQUID GLASS форма ввода: полупрозрачное стекло + лёгкий циан-отлив снизу-слева (переливы фона
просвечивают, чёрной полосы нет). padding-bottom с safe-area → фон доходит до самого низа экрана. */
/* нижний отступ формы: при клавиатуре --form-pb=6px (форма вплотную к клавиатуре, как в Telegram),
без клавиатуры --form-pb = safe-area (над home-indicator). Значение задаёт JS. */
form{display:flex;gap:9px;position:relative;
padding:10px 14px;
padding-bottom:var(--form-pb, calc(12px + var(--sab,env(safe-area-inset-bottom)))); /* ⭐С90 поле ниже на ~13px */
background:
radial-gradient(300px 120px at 8% 130%, rgba(0,229,255,.16), transparent 65%),
linear-gradient(0deg, rgba(255,255,255,.04), rgba(10,10,14,.20));
-webkit-backdrop-filter:blur(22px) saturate(1.8);backdrop-filter:blur(22px) saturate(1.8);
border-top:1px solid rgba(255,255,255,.09);
box-shadow:inset 0 1px 0 rgba(255,255,255,.14)}
/* ⭐ поле ввода — стеклянное (blur). Теперь contenteditable div (убирает стрелки iOS).
Многострочность: min-height как у строки, растёт до max-height, дальше скролл. */
.msg{flex:1;min-height:44px;max-height:120px;overflow-y:auto;border-radius:14px; /* ⭐С90 менее скруглённые углы */
border:1px solid rgba(255,255,255,.1);background:rgba(255,255,255,.06);color:var(--txt);
padding:11px 16px;font-size:16px;line-height:1.4;outline:none;word-break:break-word; /* ⭐С94 16px как в Telegram (и iOS не зумит поле) */
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
-webkit-user-select:text;user-select:text}
.msg:focus{border-color:var(--em)}
/* placeholder для пустого contenteditable */
.msg:empty::before{content:attr(data-placeholder);color:var(--muted);pointer-events:none}
/* ⭐ кнопка отправки — стеклянная с голубой обводкой + свечение, стрелка цвета акцента (макет B) */
/* ⭐С96 (Михаил): кнопки ввода приглушены — бирюза бросалась в глаза. Нейтральный серый глиф,
серая обводка, без неон-свечения (спокойный, взрослый вид). */
button.send{width:44px;height:44px;border-radius:50%;cursor:pointer;font-size:17px;
color:var(--muted);background:rgba(255,255,255,.06);border:1px solid var(--hair);
-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
transition:background .15s,color .15s}
button.send:active{background:var(--out-bg);color:var(--em)}
/* адаптив: телефон — одна колонка */
@media(max-width:760px){
.app{grid-template-columns:1fr}
.side{width:100%}
/*════════════════════ 06-screens.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ⭐⭐С114 ОТКРЫТИЕ ЧАТА — СЛАЙД ТОЧНО КАК Telegram Web (снял механику в его DOM, С114):
у Telegram список (левая колонка) СТОИТ на месте (transform:none), а чат (центр) —
position:absolute, едет translateX(100%)→0 с transition .2s ease-in-out, ПОВЕРХ списка.
Список не наезжает и не просвечивает, потому что чат НЕПРОЗРАЧНЫЙ (фон приложения) и
перекрывает его целиком. Раньше (до С114) наш чат был прозрачным → список просвечивал =
«наложение», которое видел Михаил. Parallax-сдвиг списка НЕ делаем — у Telegram его нет.
Лента чата предпозиционируется вниз ДО слайда (jumpToBottom в openChatItem, пока .main
за экраном). GPU-композит по transform — без reflow-прыжка. */
.main{display:flex;position:absolute;top:0;left:0;right:0;z-index:5;
/* height НЕ через inset:0 (растянуло бы на всю .app, которая на 60px выше видимой зоны и
не сжимается клавиатурой) — оставляем прежнюю .side,.main{height:var(--app-h)} */
background:var(--bg); /* непрозрачный — список под чатом не виден */
transform:translateX(100%);
will-change:transform}
/* ⭐⭐С113 (Михаил: «сделай как в Telegram»): у них наезд чата = CSS ANIMATION (keyframes), а НЕ
transition. Разница критична: transition играет ТОЛЬКО если браузер зафиксировал старт до смены
(отсюда наша ГОНКА — иногда наезд не играл, «чат резко появлялся»). animation играет ВСЕГДА при
добавлении класса, независимо от тайминга/сети. Точный приём Telegram Web (.Transition-slide). */
.app.show-chat .main{transform:translateX(0);animation:chatSlideIn .2s ease-in-out}
@keyframes chatSlideIn{from{transform:translateX(100%)}to{transform:translateX(0)}}
/* ⭐⭐С113 (Михаил: «чаты открываются наездом, а закрываются исчезанием — некрасиво»): ЗАКРЫТИЕ
тоже наездом (отъезд вправо), как открытие и как Aurora Новости. Класс chat-closing играет
обратный keyframes; .main держится видимым translateX(0)→100% на время анимации. Приём Telegram. */
.app.chat-closing .main{transform:translateX(100%);animation:chatSlideOut .2s ease-in-out}
@keyframes chatSlideOut{from{transform:translateX(0)}to{transform:translateX(100%)}}
.head .back{display:block}
.head b{font-size:16.5px} /* ⭐С94 v186 (Михаил: «имя не увеличилось») — это мобильное правило
перебивало новые 17px; поднято до телеграмного размера, «Aurora Intelligence» помещается */
}
/* ⭐⭐С105 ЭКРАН КОНФЕРЕНЦИЙ (LiveKit) */
#conf-screen{position:fixed;inset:0;z-index:9000;background:#0a0d12;display:flex;flex-direction:column}
#conf-lobby{flex:1;display:flex;align-items:center;justify-content:center;padding:28px;position:relative;
background:radial-gradient(500px 380px at 50% 25%,rgba(0,229,255,.12),transparent 65%),#0a0d12}
.conf-lobby-inner{width:100%;max-width:360px;display:flex;flex-direction:column;align-items:center;text-align:center}
.conf-logo{font-size:52px;margin-bottom:8px}
.conf-h{font-size:24px;font-weight:800;color:#fff;margin:0 0 8px}
.conf-sub{font-size:14px;color:var(--muted);line-height:1.5;margin:0 0 20px}
.conf-input{width:100%;height:50px;border-radius:13px;border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.05);color:var(--txt);padding:0 16px;font-size:16px;outline:none;
margin-bottom:12px;text-align:center;transition:border-color .2s}
.conf-input:focus{border-color:var(--em)}
.conf-primary{width:100%;height:50px;border-radius:13px;border:none;cursor:pointer;font-size:16px;font-weight:700;
color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2));box-shadow:0 10px 28px rgba(0,229,255,.22);margin-bottom:10px}
.conf-secondary{width:100%;height:46px;border-radius:13px;border:1px solid var(--hair);cursor:pointer;
font-size:14px;font-weight:600;color:var(--txt);background:rgba(255,255,255,.04)}
.conf-primary:active,.conf-secondary:active{transform:scale(.98)}
.conf-err{color:#ff6b6b;font-size:13px;margin-top:10px;min-height:16px}
/* ⭐С114 тумблеры лобби вертикально (текст слева, стеклянный .switch справа) */
.conf-prejoin{display:flex;flex-direction:column;gap:12px;margin-top:18px;width:100%}
.conf-check{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:6px;cursor:pointer}
.conf-toggle-row{justify-content:space-between;gap:12px;width:100%;text-align:left}
.conf-toggle-row > span{flex:1;min-width:0}
/* ⭐С106 верхняя панель лобби (свернуть/закрыть) — как у обычного модуля */
.conf-lobby-top{position:absolute;top:calc(10px + env(safe-area-inset-top));right:14px;left:14px;
display:flex;justify-content:flex-end;gap:6px;z-index:2}
.conf-lobby-btn{font-size:22px;color:var(--muted);cursor:pointer;width:40px;height:40px;
display:flex;align-items:center;justify-content:center;border-radius:10px}
.conf-lobby-btn:active{background:rgba(255,255,255,.08)}
/* активная комната */
/* ⭐С110 (Михаил: «на десктопе тёмный экран растягивается вниз и нижние кнопки микро/камера
срезаются»). Причина — flexbox: #conf-room и .conf-grid тянулись по контенту без min-height:0,
выталкивая контролы за низ. Фикс: min-height:0 + overflow:hidden на комнате → грид скроллится
внутри себя, а нижняя панель контролов всегда видна. */
#conf-room{flex:1;min-height:0;display:flex;flex-direction:column;background:#0a0d12;overflow:hidden}
/* ⭐⭐С110 (Михаил: «верхние кнопки Код/Свернуть/Выйти уезжают за шапку iPhone») — топбар комнаты
не учитывал системную безопасную зону сверху (в отличие от лобби). Добавляем safe-area-top. */
.conf-topbar{display:flex;align-items:center;gap:10px;padding:12px 16px;border-bottom:1px solid var(--hair);
padding-top:calc(12px + env(safe-area-inset-top));flex-wrap:wrap}
.conf-room-name{font-size:15px;font-weight:700;color:#fff}
.conf-count{font-size:12px;color:var(--muted);background:rgba(255,255,255,.06);padding:2px 9px;border-radius:20px;margin-right:auto}
.conf-copy{font-size:12.5px;padding:7px 12px;border-radius:9px;border:1px solid var(--hair);
background:rgba(255,255,255,.04);color:var(--txt);cursor:pointer;font-weight:600;transition:all .15s}
.conf-copy:active{transform:scale(.94)}
/* ⭐С119 (Михаил: «непонятно скопировалось или нет») — зелёная подсветка «✓ Скопировано» */
.conf-copy.copied{background:rgba(34,227,160,.18);border-color:#22e3a0;color:#22e3a0}
/* ⭐С106 кнопка «Свернуть» в топбаре комнаты — бирюзовый акцент (действие, не разрыв) */
.conf-min{border-color:rgba(0,229,255,.35)!important;color:var(--em)!important}
/* ⭐⭐С110 (Михаил: «на десктопе камера ОГРОМНАЯ, не влезает в окно, скроллится вверх-вниз»).
Причина: aspect-ratio:4/3 на плитке жёстко задавал высоту от ширины — при 1-2 участниках
плитка на всю ширину колонки → высота 3/4 ширины = гигантская, выходит за окно.
ФИКС: грид на flex-раскладке (wrap+center), плитки ограничены по ВЫСОТЕ (доля окна) и по
ширине — весь грид всегда помещается в окно конференции, без прокрутки. */
.conf-grid{flex:1;min-height:0;display:flex;flex-wrap:wrap;gap:8px;padding:10px;overflow:auto;
align-content:center;justify-content:center;align-items:center}
/* ⭐С110 контролы не сжимаются — всегда видны внизу (десктоп-фикс) */
.conf-controls{flex:none}
.conf-tile{position:relative;background:#12161e;border-radius:14px;overflow:hidden;
display:flex;align-items:center;justify-content:center;
flex:1 1 260px;min-width:180px;max-width:min(100%,640px);
aspect-ratio:4/3;max-height:100%}
.conf-tile video{width:100%;height:100%;object-fit:cover;display:block;background:#000}
/* ⭐⭐С110 (Михаил: «чужой экран трансляции больше окна конференции, скроллится, не влезает»).
Скрин-плитка занимает всю ширину грида (span все колонки) и ограничена по высоте, видео
вписывается целиком (contain) — теперь совпадает с окном, не вылезает за края. */
.conf-tile.screen{aspect-ratio:auto;flex:1 1 100%;max-width:100%;max-height:100%}
.conf-tile.screen video{width:100%;height:100%;object-fit:contain;background:#000}
.conf-tile .conf-avatar{width:66px;height:66px;border-radius:50%;background:linear-gradient(135deg,var(--em),var(--em2));
display:flex;align-items:center;justify-content:center;font-size:26px;font-weight:800;color:#04121a}
.conf-tile .conf-name{position:absolute;left:8px;bottom:7px;font-size:12px;color:#fff;font-weight:600;
background:rgba(0,0,0,.5);padding:2px 8px;border-radius:7px;max-width:80%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conf-tile .conf-muted{position:absolute;right:8px;bottom:7px;font-size:13px;opacity:.9}
.conf-controls{display:flex;justify-content:center;gap:14px;padding:16px 12px calc(16px + env(safe-area-inset-bottom));
border-top:1px solid var(--hair)}
.conf-ctl{width:54px;height:54px;border-radius:50%;border:none;cursor:pointer;font-size:22px;
background:rgba(255,255,255,.10);color:#fff;display:flex;align-items:center;justify-content:center;transition:transform .1s,background .15s}
.conf-ctl:active{transform:scale(.92)}
.conf-ctl.off{background:rgba(255,80,80,.9)}
.conf-ctl.conf-share.on{background:linear-gradient(135deg,var(--em),var(--em2));color:#04121a}
/* ⭐С112 кнопка «Завершить» — красная таблетка с иконкой отбоя + подписью (не безымянный круг) */
.conf-ctl.conf-leave{background:#ff3b3b;color:#fff;width:auto;border-radius:27px;padding:0 20px;gap:8px;font-size:15px;font-weight:600}
.conf-ctl.conf-leave span{white-space:nowrap}
/* ⭐⭐С105 админ-панель: табы + строки журнала/юзеров */
/* ⭐С176 (Михаил: «вижу только 4 контакта в выдаче доступа») — секция «Пользователи» живёт
внутри аккордеона .set-acc, а у него max-height:900px жёстко зашит под CSS-анимацию
раскрытия (см. 08-settings-feed.css). При росте базы список выше 900px просто ОБРЕЗАЛСЯ
(overflow:hidden), скролла внутри не было. Даём списку СВОЙ скролл с запасом по высоте —
аккордеон больше не растёт вместе с числом юзеров, работает при любом их количестве. */
#ap-list-users{max-height:60vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.ap-tabs{display:flex;gap:6px;margin-bottom:6px;background:rgba(255,255,255,.05);border-radius:12px;padding:4px}
.ap-tab{flex:1;text-align:center;padding:9px 4px;border-radius:9px;font-size:13.5px;font-weight:700;
color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.ap-tab.active{background:var(--panel);color:var(--txt)}
.ap-row{background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:13px;padding:11px 13px}
.ap-row-top{display:flex;align-items:center;gap:8px;margin-bottom:5px;flex-wrap:wrap}
.ap-user{font-size:14px;font-weight:700;color:var(--txt)}
.ap-login{font-size:12.5px;color:var(--em)}
.ap-reason{font-size:11px;padding:2px 7px;border-radius:6px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}
.ap-reason.prefilter{background:rgba(255,180,60,.16);color:#ffb43c}
.ap-reason.leak{background:rgba(255,80,80,.16);color:#ff6b6b}
.ap-reason.admin_marker{background:rgba(0,229,255,.14);color:var(--em)}
.ap-q{font-size:13.5px;color:var(--txt);line-height:1.4;margin:4px 0 8px;word-break:break-word}
.ap-meta{font-size:11.5px;color:var(--muted)}
.ap-blockbtn{margin-top:8px;padding:8px 12px;border-radius:9px;border:none;cursor:pointer;font-size:13px;font-weight:700;
background:rgba(255,59,59,.15);color:#ff6b6b}
.ap-blockbtn.unblock{background:rgba(60,220,130,.15);color:#3adc82}
.ap-blocked-tag{font-size:11px;color:#ff6b6b;font-weight:700}
/* ⭐⭐С164 галочки персональных доступов (Нейро / Звонок Aurora) в карточке пользователя */
.ap-feats{display:flex;gap:14px;flex-wrap:wrap;margin:2px 0 4px}
.ap-feat{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--txt);cursor:pointer;user-select:none}
.ap-feat input{width:17px;height:17px;accent-color:var(--em);cursor:pointer;flex:none}
.ap-feat input:disabled{opacity:.5;cursor:default}
/* ⭐⭐С105 экран блокировки — перекрывает ВСЁ (z-index выше всех), взаимодействие невозможно */
#blocked-screen{position:fixed;inset:0;z-index:100000;display:flex;align-items:center;justify-content:center;
padding:32px;background:radial-gradient(600px 500px at 50% 30%,rgba(60,0,0,.55),transparent 70%),#0a0d12;
-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
-webkit-user-select:none;user-select:none;touch-action:none}
#blocked-screen .blk-inner{display:flex;flex-direction:column;align-items:center;text-align:center;max-width:340px}
#blocked-screen .blk-circle{width:120px;height:120px;margin-bottom:26px;
filter:drop-shadow(0 0 18px rgba(255,59,59,.5))}
#blocked-screen .blk-title{font-size:23px;font-weight:800;color:#fff;letter-spacing:.01em;margin-bottom:10px}
#blocked-screen .blk-sub{font-size:15px;color:#c7ccd6;line-height:1.5}
/* ⛔⭐⭐⭐⭐ С193 (Михаил: «в модуле Telegram кнопка «Подключить по QR-коду» стала шире экрана,
настройки болтаются влево-вправо, текст обрезается»). Причина: .drawer-store-btn задумана для
выдвижной панели магазина и имеет ФИКСИРОВАННУЮ ширину (min(440px,96vw)) — внутри узкого
экрана модуля она вылезала за его границы и растягивала весь экран. Внутри модуля Telegram
кнопки должны занимать ширину экрана и переносить текст. */
#tg-module-screen .drawer-store-btn,
#tg-module-screen .palette-edit{width:100%;max-width:100%;box-sizing:border-box;
white-space:normal;line-height:1.25;text-align:center}
@media(min-width:900px){ #tg-module-screen .drawer-store-btn{width:100%} }
/*════════════════════ 07-auth.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ── экран входа ── */
/* ⭐С106 (Михаил: «форма AURORA подскакивает слишком высоко над клавиатурой, а не прислоняется
к ней»): #auth центрировался по ПОЛНОЙ высоте окна (inset:0 без учёта клавиатуры) — при
появлении клавиатуры центр «полной» высоты оказывался ВЫШЕ реально видимой области, форма
улетала вверх. Высота теперь берётся из --app-h (та же переменная, что сжимает список
чатов/ленту при клавиатуре) — центрирование считается уже в ВИДИМОЙ части экрана.
⭐⭐С106 (2-я итерация, v408 центрированием прыжок не убрала): пока клавиатура АНИМИРУЕТ
выезд, --app-h пересчитывается НЕСКОЛЬКИМИ промежуточными значениями подряд (iOS шлёт
vv.resize сериями) — при align-items:center КАЖДЫЙ пересчёт двигает центр формы, отсюда
видимый прыжок. Решение — не центрировать вертикально при открытой клавиатуре, а прижать
форму к НИЖНЕЙ кромке (класс .kb-open, ставится/убирается в apply()) — тогда серия
промежуточных пересчётов её не двигает, она физически сидит у низа независимо от них. */
#auth{position:fixed;top:0;left:0;right:0;height:var(--app-h,100%);z-index:100;display:flex;align-items:center;justify-content:center;padding:24px}
/* ⭐⭐КРИТФИКС (Михаил, скриншот): #install-gate создавался БЕЗ position:fixed/z-index/фона —
рендерился как обычный блок в потоке страницы (иконка+«AURORA» вылезали поверх другого
контента, включая ленту). Даём ТОТ ЖЕ приём, что у #auth — полноэкранный фиксированный слой. */
#install-gate{position:fixed;top:0;left:0;right:0;height:var(--app-h,100%);z-index:90;
background:var(--bg);display:flex;align-items:center;justify-content:center;padding:24px}
#install-gate.hidden{display:none}
#auth.kb-open{align-items:flex-end;padding-bottom:12px}
background:
radial-gradient(500px 360px at 100% 0%, var(--glow1), transparent 55%),
radial-gradient(460px 340px at 0% 100%, var(--glow2), transparent 55%),
radial-gradient(400px 300px at 0% 0%, var(--glow2), transparent 55%),
radial-gradient(400px 300px at 100% 100%, var(--glow1), transparent 55%),
var(--bg)}
/* ⭐⭐С90 ДВЕ ЗОНЫ: (1) шапка-бренд — иконка + AURORA градиентом + Live Platform;
(2) карточка-форма — поле ввода + кнопка. Разделены визуально, единый стиль с лендингом. */
.auth-card{width:100%;max-width:380px;text-align:center;display:flex;flex-direction:column;align-items:center;gap:22px}
.auth-brand{display:flex;flex-direction:column;align-items:center}
.auth-logo{width:82px;height:82px;border-radius:22px;overflow:hidden;margin-bottom:16px;
box-shadow:0 0 0 1px rgba(255,255,255,.1),0 16px 46px rgba(0,229,255,.24),0 10px 32px rgba(255,61,154,.18)}
.auth-logo img{width:100%;height:100%;object-fit:cover;display:block}
/* ⭐С90 ПЕРЕЛИВАЮЩИЙСЯ градиент AURORA: широкий градиент едет по тексту (анимация background-position). */
.auth-card h1{font-size:64px;margin:0;line-height:1;letter-spacing:.12em;font-weight:850;
background:linear-gradient(100deg,var(--em),var(--em2),#8f6bff,var(--em),var(--em2));
background-size:300% 100%;
-webkit-background-clip:text;background-clip:text;color:transparent;
animation:auroraShimmer 6s linear infinite}
@keyframes auroraShimmer{0%{background-position:0% 50%}100%{background-position:300% 50%}}
@media(prefers-reduced-motion:reduce){ .auth-card h1{animation:none} }
.auth-sub{font-size:14px;color:var(--muted);letter-spacing:.3em;text-transform:uppercase;font-weight:600;margin-top:6px}
/* ⭐С97 слоган-позиционирование под брендом (смена посыла: не просто мессенджер) */
.auth-slogan{font-size:13px;color:var(--muted);margin-top:8px;letter-spacing:.02em;opacity:.9}
/* карточка-форма — отдельная стеклянная зона */
.auth-form{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--hair);border-radius:20px;
padding:24px 22px;-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
box-shadow:0 20px 60px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)}
/* ⭐С106 (Михаил): свежая PWA-иконка на iOS — поле почты/телефона не получало фокус (баг
standalone-режима). Явный touch-action на самих инпутах — вторая линия защиты вместе
с форс-focus в JS (глобальный touch-action:pan-y на body мог мешать распознаванию тапа). */
#auth input{touch-action:manipulation}
.auth-card p{color:var(--muted);font-size:14px;margin:0 0 16px;line-height:1.4}
.auth-card input{width:100%;height:50px;border-radius:13px;border:1px solid rgba(255,255,255,.14);
background:rgba(255,255,255,.05);color:var(--txt);padding:0 16px;font-size:16px;outline:none;
margin-bottom:12px;text-align:center;transition:border-color .2s,box-shadow .2s}
.auth-card input::placeholder{color:var(--muted);opacity:.75}
.auth-card input:focus{border-color:var(--em);box-shadow:0 0 0 3px rgba(0,229,255,.14)}
/* ⭐С97 (Михаил): 6 цифр кода в ОДИН ряд — на узких экранах letter-spacing 8px+24px
переносило. Сжато + nowrap, чтобы всегда одна строка. */
.auth-card input.code{letter-spacing:6px;font-size:21px;font-weight:600;white-space:nowrap;text-indent:6px}
@media(max-width:360px){ .auth-card input.code{letter-spacing:4px;font-size:19px} }
.auth-card button{width:100%;height:50px;border-radius:13px;border:none;cursor:pointer;font-size:16px;font-weight:700;
color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2));box-shadow:0 10px 28px rgba(0,229,255,.22)}
.auth-card button:active{transform:scale(.98)}
.auth-card button:disabled{opacity:.5;cursor:default}
.auth-err{color:#ff6b6b;font-size:13px;margin:10px 0 0;min-height:16px}
/* ⭐С90 2FA: ссылка «Открыть в Authenticator» + секретный ключ для ручного ввода */
.totp-open{display:block;margin:6px 0 4px;padding:13px;border-radius:12px;text-decoration:none;font-weight:600;font-size:15px;
color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2));box-shadow:0 8px 24px rgba(0,229,255,.25)}
.totp-secret{font-family:"SF Mono","Consolas",monospace;font-size:15px;letter-spacing:2px;word-break:break-all;
background:rgba(255,255,255,.06);border:1px solid var(--hair);border-radius:10px;padding:11px 12px;margin-bottom:14px;color:#cdd5e2;-webkit-user-select:all;user-select:all}
.auth-back{background:none!important;color:var(--muted)!important;font-weight:400!important;
height:auto!important;margin-top:14px;font-size:13px}
/* ⭐С98 переключатель способа входа (Почта/Телефон) над формой */
.auth-method-switch{display:flex;gap:6px;margin-bottom:14px;background:rgba(255,255,255,.05);
border-radius:12px;padding:4px}
.ams-tab{flex:1;text-align:center;padding:9px 4px;border-radius:9px;font-size:13.5px;font-weight:700;
color:var(--muted);cursor:pointer;transition:background .15s,color .15s}
.ams-tab.active{background:var(--panel);color:var(--txt)}
/* ⭐ ряд из 2 серых кнопок (выслать код / другой email) — та же высота, что у "Далее" */
.auth-row2{display:flex;gap:10px;width:100%;margin-top:10px}
.auth-row2 .auth-half{flex:1;width:auto!important;height:50px!important;border-radius:13px!important;
background:rgba(255,255,255,.06)!important;color:var(--txt)!important;font-weight:600!important;
font-size:14px!important;border:1px solid var(--hair)!important;margin:0!important}
.auth-row2 .auth-half:disabled{opacity:.5}
.hidden{display:none!important}
/* ── шестерёнка настроек в сайдбаре ── */
.side-top .settings-btn{font-size:19px;cursor:pointer;color:var(--muted);padding:4px 6px;flex:0 0 auto;transition:color .2s,transform .3s}
.side-top .settings-btn:hover{color:var(--em);transform:rotate(60deg)}
/* ⭐С108 (Михаил: «в меню чата у Закрепить/Удалить нет пробела эмодзи↔текст, у Заглушить/
Не показывать есть») — причина: разные эмодзи (📌🗑️🔕🚫) имеют разную визуальную ширину
(часть с вариационным селектором FE0F шире), а gap фиксирован — текст «прыгал». Фикс:
фиксированная ширина колонки иконки + центрирование → текст всех пунктов на одной вертикали. */
.ctx-ic{flex:0 0 auto;width:22px;display:inline-flex;align-items:center;justify-content:center;line-height:1}
/* ⭐С94 колокольчик «вышла новая версия» — дёргается, чтобы точно бросился в глаза (Михаил:
«простое появление могут не заметить»). Пауза между дёрганьями, а не непрерывная тряска —
назойливая постоянная анимация раздражает сильнее, чем помогает заметить. */
#update-bell{animation:bellRing 2.4s ease-in-out infinite}
@keyframes bellRing{
0%,73%,100%{transform:rotate(0)}
75%{transform:rotate(-16deg)} 78%{transform:rotate(13deg)} 81%{transform:rotate(-10deg)}
84%{transform:rotate(7deg)} 87%{transform:rotate(-4deg)} 90%{transform:rotate(0)}
}
@media (prefers-reduced-motion: reduce){ #update-bell{animation:none} }
/* ⭐С91 иконка кошелька — SVG-бумажник: центрируем, БЕЗ вращения на hover (крутится только шестерёнка) */
.side-top .wallet-ic{display:inline-flex;align-items:center;justify-content:center;padding:2px 4px}
.side-top .wallet-ic:hover{transform:none;filter:drop-shadow(0 0 4px rgba(0,229,255,.5))}
/* ⭐С88 плюсик создания группы/канала — КРУГ с градиентом циан→магента (как на макете Михаила),
плюс строго по центру (два псевдоэлемента-палочки). */
/* ⭐С96 (Михаил): плюсик «создать» больше НЕ радужный (убираем пестроту) — сдержанный стиль,
как у шестерёнки: прозрачный, серый глиф, при наведении подсветка акцентом. */
.side-top .new-btn{position:relative;width:32px;height:32px;border-radius:50%;border:none;padding:0;
flex:0 0 auto;cursor:pointer;background:transparent;
color:var(--muted);transition:transform .2s,color .2s}
.side-top .new-btn:hover{transform:scale(1.1);color:var(--em)}
.side-top .new-btn:active{transform:scale(.94)}
.side-top .new-btn::before,.side-top .new-btn::after{content:"";position:absolute;top:50%;left:50%;
background:currentColor;border-radius:2px}
.side-top .new-btn::before{width:14px;height:2.5px;transform:translate(-50%,-50%)} /* горизонталь */
.side-top .new-btn::after{width:2.5px;height:14px;transform:translate(-50%,-50%)} /* вертикаль */
/*════════════════════ 08-settings-feed.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ── ЭКРАН НАСТРОЕК ── */
#settings,#group-create,#group-info,#dm-search-screen,#person-card,#tg-module-screen,#user-profile,#admin-panel-screen,#news-screen,#calls-screen,#support-screen{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;
background:radial-gradient(600px 300px at 82% 0%, var(--glow1), transparent 60%),
radial-gradient(520px 260px at 0% 100%, var(--glow2), transparent 60%), var(--bg)}
#group-create.hidden,#group-info.hidden,#dm-search-screen.hidden,#person-card.hidden,#tg-module-screen.hidden,#user-profile.hidden,#admin-panel-screen.hidden{display:none}
/* ⭐⭐С113 (Михаил): наезд Aurora Новости справа — ПРОВЕРЕНО живьём в браузере (transform 100%→0 за .24s).
Ключ: НЕ display:none (глушит transition), а visibility+transform. Как обычный чат (.main). */
/* наезд управляется классом .slid-in (добавляется в JS ПОСЛЕ reflow — тогда transition играет). */
#news-screen{transition:transform .24s ease-in-out;will-change:transform;transform:translateX(100%)}
#news-screen.slid-in{transform:translateX(0)}
#news-screen.hidden{visibility:hidden;transform:translateX(100%);transition:transform .24s ease-in-out,visibility 0s .24s}
/* ⭐С106 КАНАЛ «AURORA НОВОСТИ» — карточки-анонсы */
.news-head-av{width:38px;height:38px;border-radius:11px;display:flex;align-items:center;justify-content:center;
font-size:20px;background:linear-gradient(135deg,#00E5FF,#8f6bff);flex:0 0 auto}
#news-list{display:flex;flex-direction:column;gap:16px;max-width:560px;margin:0 auto;width:100%}
.news-card{background:var(--panel,rgba(20,24,32,.7));border:1px solid rgba(0,229,255,.32);border-radius:20px;
overflow:hidden;box-shadow:0 12px 40px -18px rgba(0,0,0,.6);position:relative}
html.light .news-card{background:#fff}
/* ⭐⭐С110 (Михаил: «квадратный баннер срезается сверху/снизу в ленте»). Убран фикс aspect-ratio
16/9 + object-fit:cover (они обрезали квадрат). Теперь картинка показывается ЦЕЛИКОМ в своих
пропорциях (height:auto) — квадратный баннер виден полностью, по всей ширине карточки. */
.news-card-img{width:100%;height:auto;display:block;background:linear-gradient(135deg,#0e1830,#1a1030);-webkit-touch-callout:none;-webkit-user-select:none;user-select:none;pointer-events:none}
.news-card-body{padding:16px 16px 18px}
.news-card-title{font-size:18px;font-weight:800;color:var(--txt);margin-bottom:8px;line-height:1.25}
.news-card-text{font-size:14.5px;color:var(--txt);opacity:.9;line-height:1.5;white-space:pre-wrap}
/* ⭐С133 (Михаил): была градиентной — градиент оставлен ТОЛЬКО для Aurora Intelligence.
Обычное стекло, как остальные кнопки платформы. */
.news-card-btn{margin-top:14px;width:100%;padding:13px;border-radius:13px;cursor:pointer;
font-size:15px;font-weight:700;color:#eef4ff;background:rgba(20,24,32,.22);
border:1px solid rgba(255,255,255,.16);
-webkit-backdrop-filter:blur(6px) saturate(1.6);backdrop-filter:blur(6px) saturate(1.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
.news-card-btn:active{transform:scale(.98)}
.news-card-time{font-size:11.5px;color:var(--muted);margin-top:12px;text-align:right}
.news-empty{text-align:center;color:var(--muted);padding:50px 20px;font-size:15px}
/* ⭐С106 черновик (виден только владельцу) + кнопки модерации */
.news-card.draft{border-color:rgba(255,176,102,.5)}
.news-draft-tag{display:inline-block;font-size:12px;font-weight:700;color:#ffb066;
background:rgba(255,176,102,.14);padding:3px 10px;border-radius:8px;margin-bottom:10px}
.news-admin-row{display:flex;gap:8px;margin-top:12px}
.news-approve-btn{flex:1;padding:12px;border-radius:12px;border:none;cursor:pointer;font-size:14px;
font-weight:800;color:#04121a;background:linear-gradient(135deg,#6ee8ad,#00E5FF)}
.news-approve-btn:active{transform:scale(.98)}
.news-approve-btn:disabled{opacity:.6}
.news-del-btn{flex:0 0 auto;padding:12px 14px;border-radius:12px;border:1px solid rgba(255,107,107,.4);
background:none;color:#ff6b6b;font-size:14px;font-weight:600;cursor:pointer}
.news-del-btn:active{transform:scale(.98)}
/* ⭐С111 (Михаил): вместо больших кнопок — компактные КРУГЛЫЕ кнопки владельца ПОВЕРХ картинки
сверху справа (не оттягивают плашку, новость видна в оригинале). Свечение белым — читаются
на любом фоне. Галочка=опубликовать (зелёная), корзина=удалить (красная). Видны только владельцу. */
.news-owner-fab{position:absolute;top:10px;right:10px;display:flex;gap:8px;z-index:4}
.news-fab{width:38px;height:38px;border-radius:50%;border:none;cursor:pointer;font-size:17px;
display:flex;align-items:center;justify-content:center;color:#fff;line-height:1;
box-shadow:0 0 0 2px rgba(255,255,255,.9), 0 2px 10px rgba(0,0,0,.45);transition:transform .12s}
.news-fab:active{transform:scale(.9)}
.news-fab.ok{background:linear-gradient(135deg,#22c55e,#16a34a)}
.news-fab.del{background:linear-gradient(135deg,#ef4444,#dc2626)}
.news-fab:disabled{opacity:.6}
/* ⭐С97 профиль собеседника: кнопки действий + медиа-вкладки */
.up-act{width:100%;text-align:left;padding:13px 14px;margin-bottom:8px;border-radius:12px;border:1px solid var(--hair);
background:rgba(255,255,255,.04);color:var(--txt);font-size:15px;cursor:pointer}
.up-act:active{transform:scale(.99)}
.up-act.danger{color:#ff6b6b}
html.light .up-act{background:rgba(245,247,252,.6)}
/* ⭐С106 (Михаил) кнопки звонка в профиле — две в ряд, высота как .up-act, скруглённые */
.up-call-row{display:flex;gap:10px;margin-bottom:0}
.up-call-btn{flex:1;display:flex;align-items:center;justify-content:center;gap:8px;
padding:13px 14px;border-radius:12px;border:1px solid var(--hair);cursor:pointer;
font-size:15px;font-weight:600;color:var(--txt);background:rgba(255,255,255,.04)}
.up-call-btn:active{transform:scale(.98)}
.up-call-btn svg{width:20px;height:20px;flex:0 0 auto}
.up-call-btn.audio{color:#22e37a}
.up-call-btn.video{color:var(--em)}
html.light .up-call-btn{background:rgba(245,247,252,.6)}
/* ⭐⭐С106 (Михаил) блок «ЛЕНТА» — тёмный, броский, фирменный. Компактный, но заметный. */
.up-feed{background:linear-gradient(135deg, rgba(0,229,255,.10), rgba(143,107,255,.10)), rgba(0,0,0,.30);
border:1px solid var(--bubble-border,rgba(0,229,255,.22));border-radius:18px;padding:14px 14px 12px;
margin-bottom:16px;position:relative;overflow:hidden}
html.light .up-feed{background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(143,107,255,.08)),rgba(255,255,255,.7)}
.up-feed::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;
background:linear-gradient(90deg,var(--em),#8f6bff,var(--em2))}
.up-feed-head{display:flex;align-items:center;gap:8px;margin-bottom:12px;cursor:pointer}
.up-feed-ic{color:var(--em);display:flex;align-items:center}
.up-feed-title{font-size:15px;font-weight:800;background:linear-gradient(90deg,var(--em),#8f6bff);
-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.up-feed-count{font-size:12px;color:var(--muted);background:rgba(255,255,255,.06);
padding:2px 9px;border-radius:20px}
/* ⭐С106 стрелочка «открыть полную ленту» — перед кнопкой «+ Фото» (если она есть) */
.up-feed-chev{color:var(--muted);font-size:17px;line-height:1}
.up-feed-add{margin-left:auto;font-size:13px;font-weight:700;color:#04121a;cursor:pointer;
background:linear-gradient(135deg,var(--em),var(--em2));border:none;border-radius:9px;padding:6px 12px}
.up-feed-add:active{transform:scale(.96)}
.up-feed-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.up-feed-cell{position:relative;aspect-ratio:1;border-radius:11px;overflow:hidden;cursor:pointer;
background:rgba(255,255,255,.05)}
.up-feed-cell img{width:100%;height:100%;object-fit:cover;display:block}
.up-feed-cell .fc-cap{position:absolute;left:0;right:0;bottom:0;padding:14px 6px 4px;font-size:10px;
color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.65));overflow:hidden;white-space:nowrap;text-overflow:ellipsis}
/* ⭐С107 значок «несколько фото» — верхний правый угол карточки поста */
.up-feed-cell .fc-multi{position:absolute;top:5px;right:5px;font-size:10px;font-weight:700;color:#fff;
background:rgba(0,0,0,.55);padding:2px 6px;border-radius:8px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.up-feed-empty{font-size:13px;color:var(--muted);text-align:center;padding:14px 4px}
/* полноэкранный просмотр поста ленты */
#feed-viewer{position:fixed;inset:0;z-index:400;background:rgba(0,0,0,.94);display:flex;
flex-direction:column;align-items:center;justify-content:center;padding:20px}
#feed-viewer.hidden{display:none}
#feed-viewer img{max-width:100%;max-height:72vh;border-radius:14px;object-fit:contain}
.fv-cap{color:#fff;font-size:15px;margin-top:16px;text-align:center;max-width:520px;line-height:1.4}
.fv-meta{color:var(--muted);font-size:12px;margin-top:6px}
.fv-close{position:absolute;top:calc(14px + env(safe-area-inset-top));right:18px;font-size:26px;
color:#fff;cursor:pointer;width:44px;height:44px;display:flex;align-items:center;justify-content:center}
.fv-del{position:absolute;top:calc(14px + env(safe-area-inset-top));left:18px;font-size:15px;
color:#ff6b6b;cursor:pointer;padding:8px 12px;font-weight:600}
/* ⭐С107 кнопка редактирования подписи — рядом с «Удалить», у себя-владельца поста */
.fv-edit{position:absolute;top:calc(14px + env(safe-area-inset-top));left:110px;font-size:15px;
color:#00E5FF;cursor:pointer;padding:8px 12px;font-weight:600}
/* ⭐С107 точки-индикатор фото ВНУТРИ поста (когда их несколько) — над подписью */
.fv-photodots{display:flex;gap:6px;justify-content:center;margin-top:12px}
.fv-photodots i{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.35);flex:none}
.fv-photodots i.on{background:#00E5FF;width:16px;border-radius:3px;transition:.2s}
/* ⭐С107 форма редактирования подписи — заменяет .fv-cap, пока открыта */
.fv-cap-edit{width:100%;max-width:520px;margin-top:16px;display:flex;flex-direction:column;gap:8px}
.fv-cap-edit textarea{width:100%;min-height:70px;max-height:160px;padding:10px 12px;border-radius:10px;
border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.06);color:#fff;font-size:14px;
font-family:inherit;resize:vertical;box-sizing:border-box}
.fv-cap-edit-btns{display:flex;gap:8px;justify-content:flex-end}
.fv-cap-edit-btns button{padding:8px 16px;border-radius:9px;border:none;font-size:13px;font-weight:600;cursor:pointer}
#fv-cap-save{background:linear-gradient(90deg,#00E5FF,#8f6bff);color:#04121a}
#fv-cap-cancel{background:rgba(255,255,255,.1);color:#fff}
/* ⭐⭐С106 (Михаил) ПОЛНАЯ ЛЕНТА — полноэкранный экран как WeChat Moments */
#feed-full-screen{position:fixed;inset:0;z-index:200;background:var(--bg);display:flex;flex-direction:column;overflow:hidden}
#feed-full-screen.hidden{display:none}
/* ⭐С113 (Михаил): шапка выше (240→300px) — тут пишут контакты/названия/логотипы, узкая мала */
.ff-cover{position:relative;height:300px;flex:0 0 auto;background:linear-gradient(155deg,#0e1830,#1a1030);
display:flex;align-items:flex-end;overflow:hidden}
/* ⭐⭐КРИТФИКС (Михаил, найдено вживую через elementFromPoint): селектор `.ff-cover img` был
ДЕСКРИПТОР-СЕЛЕКТОРОМ — матчил ЛЮБОЙ внутри .ff-cover, включая маленькую круглую
аватарку, вложенную ГЛУБЖЕ (.ff-cover → .ff-owner → .ff-owner-av → img). Она тоже получала
position:absolute;inset:0, и поскольку её ближайший позиционированный предок — .ff-owner
(не .ff-owner-av, у которого overflow:hidden), аватарка растягивалась на всю ширину/высоту
.ff-owner (390×84), вылезая из своего маленького круглого контейнера — именно ЭТО Михаил
видел как «половина фото — моя старая аватарка». Сузили селектор до ТОЛЬКО #ff-cover-img. */
#ff-cover-img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
/* ⭐С108 (Михаил: «кнопка Добавить шапку наполовину перекрывает аватар») — раньше подсказка
растягивалась на весь блок (inset:0) поверх аватара, просвечивающего на фоне пустой шапки.
Теперь это КОМПАКТНЫЙ бокс со скруглёнными краями по центру, аватар с фона убран (см. JS). */
.ff-cover-empty{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);
display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
color:#fff;cursor:pointer;padding:16px 26px;border-radius:16px;
background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.18);
-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.ff-cover-empty span{font-size:30px;line-height:1;color:var(--em)}
.ff-cover-empty div{font-size:13px;font-weight:600}
.ff-back{position:absolute;top:calc(14px + env(safe-area-inset-top));left:14px;z-index:2;
font-size:28px;color:#fff;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;
justify-content:center;text-shadow:0 2px 8px rgba(0,0,0,.6)}
/* ⭐С112 НОЧЬ карандаш редактирования шапки — справа, симметрично «назад» */
.ff-edit-cover{position:absolute;top:calc(14px + env(safe-area-inset-top));right:62px;z-index:2;
font-size:18px;cursor:pointer;width:40px;height:40px;display:flex;align-items:center;justify-content:center;
background:rgba(0,0,0,.35);border-radius:50%;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
/* ⭐С113 (Михаил): аватарка+имя в углу шапки убраны — и так понятно, чья лента; на обложке
пользователь сам разместит контакты/логотип. Оверлей скрыт. */
.ff-owner{display:none !important}
.ff-owner-old{position:relative;z-index:1;display:flex;align-items:center;gap:10px;padding:16px;width:100%;
background:linear-gradient(transparent,rgba(0,0,0,.55))}
.ff-owner-av{width:52px;height:52px;border-radius:14px;background:linear-gradient(135deg,var(--em),var(--em2));
display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;color:#04121a;
box-shadow:0 4px 14px rgba(0,0,0,.4);flex:0 0 auto;overflow:hidden}
.ff-owner-av img{width:100%;height:100%;object-fit:cover}
.ff-owner-name{color:#fff;font-size:17px;font-weight:800;text-shadow:0 2px 6px rgba(0,0,0,.5)}
.ff-body{flex:1;overflow-y:auto;padding:18px 14px calc(18px + var(--sab,env(safe-area-inset-bottom)))}
.ff-list{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:28px}
/* ⭐С113 (Михаил): расстояние между постами больше (8→18px) — чтобы посты визуально отделялись */
.ff-day{display:flex;flex-direction:column;gap:18px}
.ff-day-head{display:flex;align-items:baseline;gap:8px;padding:0 2px}
.ff-day-date{font-size:14px;font-weight:800;color:var(--txt)}
.ff-day-count{font-size:12px;color:var(--muted)}
/* ⭐ФИКС (Михаил: «в WeChat Moments 9 фото складываются в квадрат, справа остаётся пустое место —
не нравится, хочу использовать всю полезную площадь»). Жёсткая grid(3 колонки) оставляла
маленькие ячейки с пустотой в НЕПОЛНОМ последнем ряду (1-2 фото). Flexbox с flex-grow сам
распределяет свободное место между ячейками ОДНОЙ строки — полные ряды остаются ровными
квадратами по 3, а неполный последний ряд РАСТЯГИВАЕТСЯ на всю ширину без пустот. */
.ff-day-grid{display:flex;flex-wrap:wrap;gap:6px}
.ff-cell{position:relative;flex:1 1 30%;aspect-ratio:1;border-radius:12px;overflow:hidden;cursor:pointer;background:rgba(255,255,255,.05)}
.ff-cell img{width:100%;height:100%;object-fit:cover;display:block}
/* ⭐ подпись КРУПНЕЕ, если пост один за день (не сетка 3×N, а карточка на всю ширину с текстом) */
.ff-day-single{position:relative;border-radius:16px;overflow:hidden;background:var(--glass);border:1px solid var(--hair);cursor:pointer}
.ff-day-single img{width:100%;max-height:340px;object-fit:cover;display:block}
/* ⭐С107 значок «несколько фото» — та же карточка-обложка поста в полной ленте */
.ff-multi{position:absolute;top:8px;right:8px;font-size:11px;font-weight:700;color:#fff;
background:rgba(0,0,0,.55);padding:3px 7px;border-radius:9px;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}
.ff-day-single .ff-single-cap{padding:12px 14px 14px;font-size:15px;line-height:1.45;color:var(--txt)}
/* ⭐ФИКС (Михаил: скриншот WeChat Moments — у КАЖДОГО поста своя подпись НАД сеткой, даже если
постов несколько за один день; раньше подпись показывалась ТОЛЬКО когда пост за день ровно один,
а при нескольких постах они схлопывались в общую сетку без подписей вообще). */
/* ⭐ФИКС (Михаил, по референсу «Лента» в профиле — красивая окантовка): каждый пост теперь
карточка с той же градиентной обводкой/полосой, что и компактная плашка «Лента» (.up-feed),
чтобы посты визуально отделялись друг от друга. Шапка карточки: подпись СЛЕВА (Михаил: «где
написано Лента» — там текст поста; ЗАЩИТА от длинного текста — line-clamp:2, обрезаем
многоточием, а не ломаем вёрстку), время СПРАВА (Михаил: «где +Фото» — там дата/время;
день уже показан общим заголовком группы выше, поэтому здесь — именно время HH:MM). */
.ff-post{background:linear-gradient(135deg, rgba(0,229,255,.10), rgba(143,107,255,.10)), rgba(0,0,0,.30);
border:1px solid var(--bubble-border,rgba(0,229,255,.22));border-radius:18px;padding:14px 14px 12px;
position:relative;overflow:hidden}
html.light .ff-post{background:linear-gradient(135deg,rgba(0,229,255,.08),rgba(143,107,255,.08)),rgba(255,255,255,.7)}
/* ⭐С113 (Михаил): акцентная полоса сверху толще (3→5px), заметнее отделяет пост */
.ff-post::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;
background:linear-gradient(90deg,var(--em),#8f6bff,var(--em2))}
/* ⭐С113 (Михаил): текстовая полоса-подпись отделена от картинок бОльшим отступом (10→16px) */
.ff-post-head{display:flex;align-items:flex-start;gap:10px;margin-bottom:16px}
.ff-post-cap{flex:1;min-width:0;font-size:14.5px;font-weight:600;color:var(--txt);line-height:1.35;
display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ff-post-date{flex:0 0 auto;font-size:11.5px;color:var(--muted);white-space:nowrap;padding-top:2px}
/* ⭐⭐С113 (Михаил): лайки + комментарии под постом. Чужой пользователь может лайкать и
комментировать; владелец ленты может отключить комментарии тумблером в настройках ленты. */
.ff-actions{display:flex;align-items:center;gap:20px;margin-top:12px;padding-top:11px;border-top:1px solid var(--hair)}
.ff-act{display:flex;align-items:center;gap:6px;font-size:13px;color:var(--muted);cursor:pointer;
user-select:none;background:none;border:none;padding:2px;transition:transform .1s}
.ff-act:active{transform:scale(.88)}
.ff-act .ic{font-size:17px;line-height:1}
.ff-act.liked{color:#ff4d6d}
/* ⭐⭐С113v2 (Михаил): попап комментариев — шторка снизу со своим скроллом */
/* ⭐С133 единый канон подложки: blur(7px) + .28 */
.ff-cm-overlay{position:fixed;inset:0;z-index:250;background:rgba(0,0,0,.28);
-webkit-backdrop-filter:blur(7px);backdrop-filter:blur(7px);
display:flex;flex-direction:column;justify-content:flex-end;opacity:0;transition:opacity .2s}
.ff-cm-overlay.hidden{display:none}
.ff-cm-overlay.open{opacity:1}
/* ⭐С113v3 (Михаил): ФИКСИРОВАННАЯ высота окна — раньше max-height + рост списка заставляли
окно «уезжать вверх бесконечно» при добавлении комментов. Теперь окно сразу открывается на
фикс. высоту, поле ввода стоит на месте, а комментарии опускаются в скролл-области ниже. */
.ff-cm-sheet{background:var(--panel);border-radius:22px 22px 0 0;height:76vh;height:76dvh;
display:flex;flex-direction:column;transform:translateY(100%);transition:transform .25s cubic-bezier(.22,1,.36,1);
padding-bottom:env(safe-area-inset-bottom);box-shadow:0 -10px 40px rgba(0,0,0,.5)}
.ff-cm-overlay.open .ff-cm-sheet{transform:translateY(0)}
.ff-cm-head{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:15px 18px;border-bottom:1px solid var(--hair);flex:0 0 auto}
.ff-cm-title{font-size:16px;font-weight:800;color:var(--txt)}
.ff-cm-count{font-size:13px;font-weight:600;color:var(--muted)}
.ff-cm-close{font-size:20px;color:var(--muted);cursor:pointer;width:34px;height:34px;
display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.ff-cm-form{display:flex;gap:8px;align-items:center;padding:12px 18px;border-bottom:1px solid var(--hair);flex:0 0 auto}
.ff-cm-form.hidden{display:none}
.ff-cm-list{flex:1 1 auto;overflow-y:auto;-webkit-overflow-scrolling:touch;
padding:16px 18px calc(16px + env(safe-area-inset-bottom));display:flex;flex-direction:column;gap:15px;min-height:80px}
.ff-com{display:flex;gap:8px;align-items:flex-start}
.ff-com-av{width:30px;height:30px;border-radius:9px;flex:0 0 auto;overflow:hidden;
background:linear-gradient(135deg,var(--em),var(--em2));display:flex;align-items:center;
justify-content:center;font-size:13px;font-weight:700;color:#04121a}
.ff-com-av img{width:100%;height:100%;object-fit:cover}
.ff-com-body{flex:1;min-width:0}
.ff-com-name{font-size:12.5px;font-weight:700;color:var(--txt)}
.ff-com-text{font-size:13.5px;color:var(--txt);line-height:1.4;overflow-wrap:anywhere}
.ff-com-time{font-size:10.5px;color:var(--muted);margin-top:1px}
.ff-com-del{font-size:14px;color:var(--muted);cursor:pointer;flex:0 0 auto;padding:0 4px;line-height:1.2}
.ff-com-form{display:flex;gap:8px;align-items:center;margin-top:2px}
.ff-com-input{flex:1;min-width:0;background:var(--glass,rgba(255,255,255,.06));border:1px solid var(--hair);
border-radius:14px;padding:8px 12px;font-size:13.5px;color:var(--txt);outline:none}
.ff-com-send{flex:0 0 auto;background:color-mix(in srgb,var(--em) 18%,transparent);color:var(--em);
border:1px solid color-mix(in srgb,var(--em) 32%,transparent);border-radius:14px;
padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer}
.ff-com-send:disabled{opacity:.5}
.ff-com-off{font-size:12.5px;color:var(--muted);text-align:center;padding:8px}
/* мини-меню настроек ленты (тумблер комментариев) */
.ff-feed-menu{position:absolute;top:56px;right:14px;z-index:5;min-width:210px;
background:var(--panel);border:1px solid var(--hair);border-radius:14px;overflow:hidden;
box-shadow:0 12px 34px rgba(0,0,0,.5)}
.ff-feed-menu .fm-row{display:flex;align-items:center;justify-content:space-between;gap:12px;
padding:13px 16px;font-size:14px;color:var(--txt);cursor:pointer}
.ff-feed-menu .fm-state{font-size:12.5px;font-weight:700}
.ff-feed-menu .fm-state.on{color:var(--em)}
.ff-feed-menu .fm-state.off{color:var(--muted)}
.ff-empty{text-align:center;color:var(--muted);padding:60px 20px;font-size:15px}
.ff-fab{position:fixed;right:20px;bottom:calc(24px + var(--sab,env(safe-area-inset-bottom)));
width:56px;height:56px;border-radius:50%;border:none;cursor:pointer;font-size:28px;font-weight:300;
color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2));
box-shadow:0 10px 30px -6px rgba(0,229,255,.5);z-index:2}
.ff-fab:active{transform:scale(.94)}
.up-tabs{display:flex;gap:6px;margin-bottom:12px}
.up-tab{flex:1;text-align:center;padding:8px 0;border-radius:10px;font-size:13px;font-weight:600;
color:var(--muted);background:rgba(255,255,255,.04);cursor:pointer}
.up-tab.active{color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2))}
#up-media{display:grid;grid-template-columns:repeat(3,1fr);gap:5px}
#up-media img,#up-media video{width:100%;aspect-ratio:1;object-fit:cover;border-radius:8px;cursor:pointer}
#up-media .up-empty{grid-column:1/-1;text-align:center;color:var(--muted);padding:24px;font-size:14px}
#up-media .up-file,#up-media .up-link{grid-column:1/-1;text-align:left;padding:10px;border-radius:10px;
background:rgba(255,255,255,.04);font-size:14px;word-break:break-all}
/* ⭐С97 (Михаил): ссылки читаемым акцентным цветом (было тёмно-синее — не видно на тёмном) */
#up-media a.up-link{color:var(--em);text-decoration:none}
#up-media a.up-link:active{opacity:.7}
.set-head{display:flex;align-items:center;gap:12px;padding:14px 18px;border-bottom:1px solid var(--hair);
padding-top:calc(14px + var(--sat,env(safe-area-inset-top)));background:var(--bg)}
/* ⭐v317 (Михаил): стрелка «назад» БЕЛАЯ (была бирюзовая) и выровнена по центру строки
с надписью «Настройки» (сидела ниже базовой линии из-за высокого глифа ‹) */
.set-head .set-back{font-size:26px;cursor:pointer;color:var(--txt,#fff);line-height:1;
display:flex;align-items:center;margin-top:-3px}
.set-head b{font-size:17px}
.set-body{flex:1;overflow-y:auto;padding:20px 18px;max-width:560px;width:100%;margin:0 auto;
padding-bottom:calc(24px + var(--sab,env(safe-area-inset-bottom)))}
/* аватар */
.set-avatar-wrap{display:flex;justify-content:center;margin:6px 0 22px}
.set-avatar{position:relative;width:104px;height:104px;border-radius:28px;cursor:pointer;
display:flex;align-items:center;justify-content:center;font-size:42px;font-weight:600;color:#04121a;
background:linear-gradient(135deg,var(--em),var(--em2));overflow:hidden;
box-shadow:0 0 18px var(--bubble-shadow)}
.set-avatar img{width:100%;height:100%;object-fit:cover;position:absolute;inset:0}
.set-avatar-cam{position:absolute;right:2px;bottom:2px;width:32px;height:32px;border-radius:50%;
background:var(--panel);border:1px solid var(--em);display:flex;align-items:center;justify-content:center;
font-size:15px;z-index:2}
/* секции и поля */
.set-section{background:var(--glass);border:1px solid var(--hair);border-radius:16px;
padding:16px 16px 18px;margin-bottom:16px}
/* ⭐С91 АККОРДЕОН настроек: заголовок-кнопка + сворачиваемое тело. Профиль развёрнут по умолчанию. */
.set-acc{background:var(--glass);border:1px solid var(--hair);border-radius:16px;margin-bottom:12px;overflow:hidden}
.set-acc-head{display:flex;align-items:center;gap:12px;padding:15px 16px;cursor:pointer;
user-select:none;font-size:15px;font-weight:600;color:var(--fg,#fff);transition:background .2s}
.set-acc-head:hover{background:rgba(255,255,255,.03)}
.set-acc-ic{width:26px;height:26px;flex:0 0 auto;display:flex;align-items:center;justify-content:center;color:var(--em)}
.set-acc-head .set-acc-title{flex:1;min-width:0}
.set-acc-chev{flex:0 0 auto;color:var(--muted);transition:transform .25s ease;font-size:18px;line-height:1}
.set-acc.open .set-acc-chev{transform:rotate(90deg);color:var(--em)}
.set-acc-body{max-height:0;overflow:hidden;padding:0 16px;
transition:max-height .22s cubic-bezier(.4,0,1,1), padding .22s ease}
.set-acc.open .set-acc-body{max-height:900px;padding:4px 16px 18px;
transition:max-height .3s cubic-bezier(0,0,.2,1), padding .3s ease}
.set-acc-body .set-section{background:none;border:none;border-radius:0;padding:0;margin:0}
.set-acc-body .set-section + .set-section{margin-top:14px;padding-top:14px;border-top:1px solid var(--hair)}
/* email-строка в профиле */
.set-email-row{display:flex;align-items:center;gap:10px}
.set-email-cur{flex:1;min-width:0;font-size:14px;color:var(--fg,#fff);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.set-email-change{flex:0 0 auto;background:none;border:1px solid var(--em);color:var(--em);
border-radius:9px;padding:6px 14px;font-size:13px;font-weight:600;cursor:pointer;transition:all .2s}
.set-email-change:hover{background:var(--em);color:#04121a}
/* ⭐С114 (Михаил: мелкий текст в модулях — статус/подсказки). Минимум читаемости 13px.
Иерархия label↔hint держится цветом (акцент/muted) и весом (600), а не размером. */
.set-label{font-size:13px;color:var(--em);margin:12px 0 6px;font-weight:600}
.set-label:first-child{margin-top:0}
.set-hint{font-size:13px;color:var(--muted);line-height:1.4;margin:2px 0 8px}
.set-input{width:100%;height:46px;border-radius:11px;border:1px solid var(--hair);
background:rgba(255,255,255,.05);color:var(--txt);padding:0 14px;font-size:15px;outline:none;
transition:border-color .2s}
.set-input:focus{border-color:var(--em)}
.set-save{width:100%;height:46px;border-radius:11px;border:none;cursor:pointer;margin-top:16px;
font-size:15px;font-weight:600;color:#04121a;background:linear-gradient(135deg,var(--em),var(--em2))}
.set-save:active{opacity:.85}
.set-msg{text-align:center;font-size:13px;margin-top:10px;min-height:16px;color:var(--em)}
.set-msg.err{color:#ff6b6b}
/* красная кнопка выхода — размер как «Сохранить» */
.set-logout{width:100%;height:46px;border-radius:11px;border:none;cursor:pointer;
font-size:15px;font-weight:600;color:#fff;background:linear-gradient(135deg,#ff5b6b,#e0323f);
box-shadow:0 4px 18px rgba(255,91,107,.35);margin-bottom:8px}
.set-logout:active{opacity:.85}
/* ⭐С106 (Михаил): «Выйти» и «Удалить профиль» — В ОДИН РЯД, разными цветами (не плодить
отдельные строки). Выйти — приглушённая (обратимое действие), Удалить — яркая красная
(необратимо, тревожный акцент). */
.set-danger-row{display:flex;gap:10px}
.set-danger-row .set-logout{margin-bottom:0}
.set-danger-row .set-logout.mild{background:rgba(255,255,255,.06);color:var(--txt);
box-shadow:none;border:1px solid var(--hair)}
/* ⭐С133 (Михаил): «убрать свечение, просто красное и стеклянное» */
.set-danger-row .set-logout.danger{background:rgba(70,22,28,.34);color:#ff8b8b;
border:1px solid rgba(255,120,120,.32);box-shadow:inset 0 1px 0 rgba(255,255,255,.14);
-webkit-backdrop-filter:blur(6px) saturate(1.6);backdrop-filter:blur(6px) saturate(1.6)}
/*════════════════════ 09-glass-global.css ════════════════════*/
/* AURORA styles — секция вырезана из app.css ПОСЛЕДОВАТЕЛЬНЫМ куском (С115).
Порядок файлов NN- = порядок каскада бывшего монолита, НЕ переставлять.
Браузер получает все секции одним /css/bundle.css (server.js склеивает). */
/* ═══════════════════════════════════════════════════════════════════════════
⭐⭐С113 (Михаил): ЕДИНЫЙ СТЕКЛЯННЫЙ СТИЛЬ КНОПОК — Apple Vision Pro (матовое тёмное стекло).
Пока ОБКАТКА только в Настройках (#settings). Понравится → снимем ограничение #settings и
раскатаем на весь мессенджер. Специфичности id (#settings) хватает, чтобы перебить градиенты. */
/* ⭐⭐⭐С113 (Михаил): РАСКАТКА единого стеклянного стиля НА ВСЁ ПРИЛОЖЕНИЕ (не только #settings).
Основные кнопки-плашки. !important — надёжно перебить разные исходные градиенты/inline. НЕ трогаем
кнопки звонков (.call-btn — на видео-фоне) и заявки в друзья (.friend-req-btn — цвет = смысл). */
/* ⭐С132 (Михаил: «окошко скрепки — Медиатека/Снять фото — вот это ПРАВДОПОДОБНОЕ стекло, оно
просвечивает; кнопки .w-btn сейчас не просвечивают, похожи на серый металл, а не стекло»).
Рецепт .attach-menu (10-composer-media.css) взят как эталон и применён сюда: вертикальный
градиент ДВУХ близких тёмных тонов (не единая плоская полупрозрачность) + saturate ВЫШЕ (1.8,
было 1.5) — именно эта комбинация даёт видимое просвечивание фона сквозь blur, а не «крашеное стекло». */
.w-btn, .w-btn.pri, .w-btn.gray, .set-save, .set-email-change, .drawer-store-btn, .rem-add-btn,
.mframe-btn, .conf-lobby-btn, .conf-primary, .pe-send, .rec-send, .lb-save, .pwa-btn, .gi-save-btn, .gc-create-btn{
background:linear-gradient(0deg, rgba(18,22,30,.82), rgba(28,34,46,.78)) !important;
border:1px solid rgba(255,255,255,.16) !important;
/* ⭐С133 (Михаил): 26px давал «матовый металл» — на такой ширине размытия фон
усредняется в однородную массу и кнопка перестаёт просвечивать (та же причина,
что у панели модулей, см. 05-store.css). 8px — фон узнаваем, стекло сохранено. */
-webkit-backdrop-filter:blur(8px) saturate(1.6);
backdrop-filter:blur(8px) saturate(1.6);
box-shadow:inset 0 1px 0 rgba(255,255,255,.18), 0 8px 26px rgba(0,0,0,.4) !important;
color:#eef4ff !important;
position:relative; overflow:hidden;
transform:translateZ(0); /* форс GPU-слоя — тот же приём, что .attach-menu, иначе на iOS Safari backdrop-filter гаснет */
}
/* ⭐С133 (Михаил): кнопка «Магазин модулей» под панелью модулей — ТАКОЕ ЖЕ лёгкое стекло,
как сама панель (#mod-drawer). Правило живёт ЗДЕСЬ, а не в 05-store.css, потому что общий
блок выше стоит с !important и подключается позже — из 05 его не перебить.
Плотная заливка .82 (не радиус!) была причиной «кнопка не просвечивает»: сквозь неё фон
не проходит ни при каком blur. Остальные стеклянные кнопки Aurora намеренно НЕ трогаем —
их облегчение = отдельная задача с проверкой читаемости на всех экранах и в light-теме. */
.drawer-store-btn{
background:rgba(20,24,32,.22) !important;
-webkit-backdrop-filter:blur(6px) saturate(1.6);
backdrop-filter:blur(6px) saturate(1.6);
}
.w-btn::before, .set-save::before, .set-email-change::before, .drawer-store-btn::before, .rem-add-btn::before,
.mframe-btn::before, .conf-lobby-btn::before, .conf-primary::before, .pe-send::before, .rec-send::before,
.lb-save::before, .pwa-btn::before, .gi-save-btn::before, .gc-create-btn::before{
content:""; position:absolute; inset:0; pointer-events:none;
background:linear-gradient(120deg, rgba(255,255,255,.14) 0%, rgba(255,255,255,.03) 30%, transparent 52%);
}
/* ⭐⭐С113 ТУМБЛЕРЫ глобально в стеклянном стиле, БЕЗ backdrop-filter (на ползунке не видно, а много
размытий = нагрузка). «Стекло» тут = полупрозрачность + кант + светящийся кружок. */
.switch .slider{
background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
box-shadow:inset 0 1px 2px rgba(0,0,0,.3);
}
.switch .slider:before{
background:linear-gradient(180deg,#ffffff,#dCEcFb);
box-shadow:0 1px 3px rgba(0,0,0,.45); top:2px; left:2px;
}
.switch input:checked + .slider{
background:rgba(90,200,255,.38); border-color:rgba(120,205,255,.65);
box-shadow:inset 0 1px 2px rgba(0,0,0,.2), 0 0 10px rgba(80,190,255,.4);
}
/* danger — стеклянный с красным подтоном (сохраняем тревожность необратимых действий) */
.set-logout, .set-danger-row .set-logout.danger{
background:rgba(72,26,32,.52) !important; border-color:rgba(255,120,130,.4) !important; color:#ffdadf !important;
}
.set-danger-row .set-logout.mild{
background:rgba(34,38,52,.5) !important; border-color:rgba(255,255,255,.16) !important; color:#eef4ff !important;
}
.w-btn:active, .set-save:active, .set-logout:active, .set-email-change:active,
.drawer-store-btn:active, .rem-add-btn:active, .mframe-btn:active, .conf-lobby-btn:active,
.conf-primary:active, .pe-send:active, .rec-send:active{ transform:scale(.97); opacity:1 }
/* ⭐С113 СВЕТЛАЯ ТЕМА — стекло на светлом: лёгкое затемнение, мягкая тень (без огромных чёрных), тёмный текст. */
html.light .w-btn, html.light .w-btn.pri, html.light .w-btn.gray, html.light .set-save,
html.light .set-email-change, html.light .drawer-store-btn, html.light .rem-add-btn,
html.light .mframe-btn, html.light .conf-lobby-btn, html.light .conf-primary, html.light .pe-send,
html.light .rec-send, html.light .lb-save, html.light .pwa-btn, html.light .gi-save-btn, html.light .gc-create-btn{
background:rgba(20,26,44,.09) !important;
border:1px solid rgba(0,0,0,.14) !important;
box-shadow:0 2px 8px rgba(0,0,0,.10), inset 0 1px 0 rgba(255,255,255,.5) !important;
color:#0f1420 !important;
}
html.light .w-btn::before, html.light .set-save::before, html.light .set-email-change::before,
html.light .drawer-store-btn::before, html.light .rem-add-btn::before, html.light .mframe-btn::before,
html.light .conf-lobby-btn::before, html.light .conf-primary::before, html.light .pe-send::before,
html.light .rec-send::before, html.light .lb-save::before, html.light .pwa-btn::before{
background:linear-gradient(120deg, rgba(255,255,255,.5) 0%, rgba(255,255,255,.12) 30%, transparent 52%);
}
html.light .set-logout{
background:rgba(255,80,95,.10) !important; border-color:rgba(210,50,63,.35) !important; color:#b3202e !important;
box-shadow:0 2px 8px rgba(0,0,0,.08) !important;
}
html.light .set-danger-row .set-logout.danger{
background:rgba(255,80,95,.14) !important; border-color:rgba(210,50,63,.45) !important; color:#a81b28 !important;
}
html.light #settings .set-danger-row .set-logout.mild{
background:rgba(20,26,44,.09); border-color:rgba(0,0,0,.14); color:#0f1420;
}
/* ⭐С113 (Михаил): имя/логин в шапке списка чатов — в СВЕТЛОЙ теме тёмные (были белые, не видно). */
html.light .brand{ color:#0f1526 }
html.light .side-top .me{ color:#0f1526; opacity:.7 }
/* ═══════════════════════════════════════════════════════════════════════════ */
/* ⭐ КОШЕЛЁК — экран и элементы (стиль циан-магента, переиспользует .set-*) */
#wallet{position:fixed;inset:0;z-index:150;display:flex;flex-direction:column;
background:radial-gradient(600px 300px at 82% 0%, var(--glow1), transparent 60%),
radial-gradient(520px 260px at 0% 100%, var(--glow2), transparent 60%), var(--bg)}
.w-bal{background:linear-gradient(135deg, rgba(0,229,255,.14), rgba(255,61,154,.12));
border:1px solid var(--hair);border-radius:18px;padding:18px;margin-bottom:14px}
.w-bal .w-lbl{font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted)}
.w-bal .w-amt{font-size:32px;font-weight:800;margin-top:4px;line-height:1}
.w-bal .w-amt small{font-size:16px;color:var(--muted);font-weight:600}
.w-bal .w-net{font-size:11px;color:var(--em);margin-top:8px;font-family:ui-monospace,monospace}
.w-btns{display:flex;gap:10px;margin-bottom:14px}
.w-btn{flex:1;height:48px;border-radius:12px;border:1px solid var(--hair);cursor:pointer;
font-size:14px;font-weight:600;color:var(--fg);background:var(--glass);display:flex;
align-items:center;justify-content:center;gap:6px}
.w-btn.pri{background:linear-gradient(100deg,var(--em),var(--em2));color:#04121a;border:none}
/* ⭐С94 (Михаил): служебные кнопки кошелька (скопировать) — серый градиент, единый стиль */
.w-btn.gray{background:linear-gradient(135deg,#8a94a6,#5a6577);color:#fff;border:none}
/* ⭐С117 (аудит staging, Михаил: «стеклянные кнопки бесцветные, не отличить») — модификатор
для опасных действий (удаление аккаунта/сессии и т.п.), по образцу .pri/.gray выше */
.w-btn.danger{background:rgba(255,59,48,.14);color:#ff6b6b;border:1px solid rgba(255,59,48,.35)}
.w-btn:active{opacity:.85}
.w-addr{background:var(--glass);border:1px solid var(--hair);border-radius:12px;padding:12px;
font-family:ui-monospace,monospace;font-size:12px;color:var(--muted);word-break:break-all;text-align:center}
.w-qr{width:180px;height:180px;margin:14px auto;background:#fff;border-radius:12px;padding:10px;display:block}
.w-qr img,.w-qr canvas,.w-qr table{width:100%;height:100%}
.w-seed{background:var(--glass);border:1px solid var(--em);border-radius:12px;padding:14px;
font-family:ui-monospace,monospace;font-size:14px;line-height:1.9;color:var(--fg);margin:10px 0;word-spacing:6px}
.w-warn{font-size:12px;color:#ffcf6b;background:rgba(245,166,35,.1);border:1px solid rgba(245,166,35,.3);
border-radius:10px;padding:10px 12px;margin:8px 0}
.w-tx{display:flex;align-items:center;gap:10px;padding:10px 0;border-top:1px solid var(--hair);font-size:13px}
.w-tx .w-ar{width:28px;height:28px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex:0 0 auto}
.w-tx .w-ar.in{background:rgba(52,211,153,.15);color:#34d399}
.w-tx .w-ar.out{background:rgba(255,61,154,.15);color:var(--em2)}
.w-tx .w-v{margin-left:auto;font-family:ui-monospace,monospace;font-weight:700}
.w-empty{text-align:center;color:var(--muted);font-size:13px;padding:20px}
.w-ptr{text-align:center;color:var(--em);font-size:12px;font-family:ui-monospace,monospace;
height:0;overflow:hidden;opacity:0;transition:opacity .2s;margin-top:-4px}
.w-ptr.show{height:26px;opacity:1}
.w-ptr.spin{animation:w-ptr-pulse 1s ease-in-out infinite}
@keyframes w-ptr-pulse{0%,100%{opacity:.4}50%{opacity:1}}
/* сканер камеры */
#scanner{position:fixed;inset:0;z-index:200;background:#000;display:none;flex-direction:column;overflow:hidden}
/* ⭐С107 (Михаил, хвост из С106: «скачок масштаба камеры при сканере») — без явных размеров