/* ========================================================================= POLISH-ASSISTANT.CSS - ПОМОЩНИК APOLLO AI: ИЗ КОРОБКИ В СВЕТЯЩИЙСЯ ПУЗЫРЬ (25.08.2026) ДОСЛОВНО ОТ ВЯЧЕСЛАВА 25.08: «То, что справа бот Apollo AI. Он тоже как-то всё квадратно, уебански, там вообще неудобно справа он выглядит. Надо как-то лучше его сделать, и чтобы его прям видно было, чтобы какое-нибудь свечение было. Ты можешь за эталон взять мой сайт просто ApolloProduction.studio.» ЭТАЛОН СНЯТ С ЖИВОГО КОДА, А НЕ С ОПИСАНИЯ. Открыт проект сайта агентства: src/components/AIChatBot.tsx - помощник там КРУГЛЫЙ (h-16 w-16 rounded-full, то есть 64px) и стоит в трёх слоях свечения: широкий ореол -inset-4 blur-3xl, слой поуже -inset-6 blur-2xl и третий -inset-2 blur-2xl, зажигающийся на наведении; подсказка приходит ОТДЕЛЬНЫМ облачком с хвостиком, а хвостик там сделан квадратом, повёрнутым на 45 градусов; src/index.css, .btn-cosmic - серебро двумя слоями linear-gradient (#f3f6f9 -> #cfd6df 44% -> #e9edf3), inset-блик сверху и тень 0 6px 20px -6px, которая на наведении набирает синеву. Копии кода здесь нет и быть не может: обменник это статика без сборки, без Tailwind и без React. Перенесены НАСТРОЕНИЕ и физика - округлость, многослойное свечение, живой блик на кнопке. ПОЧЕМУ ОТДЕЛЬНЫЙ ФАЙЛ, А НЕ ПРАВКА ЗОНЫ 14. В styles.css сейчас работают соседи, файл на 8480 строк и 15 зон от разных исполнителей. Встречная запись в один файл стоила бы кому-то работы. Этот файл подключён ПОСЛЕ styles.css, поэтому при равной специфичности выигрывает по каскаду, и ни один чужой селектор не тронут. 🔴 ЧТО ИМЕННО БЫЛО ЗАМЕРЕНО ДО ПРАВКИ (headless-Chrome, живая страница, не на глаз): кнопка 56x56 с радиусом 6px - это 0.21 от половины стороны, то есть квадрат со скруглением, а не пузырь; свечения не было НИ ОДНОГО слоя, вся тень кнопки - одна чёрная rgba(0,0,0,.42) 0 10px 30px; у маячка хвостика не существовало (::after content: none), у панели радиус 6px и backdrop-filter: none, то есть никакого стекла. Претензия заказчика подтвердилась приборно, а не «на вкус». ГРАНИЦЫ ВМЕШАТЕЛЬСТВА. Тронут ровно префикс .aai- и ничего больше. Арифметика узких экранов из зоны 14 не сломана, а пересчитана: кнопка выросла на 6px, поэтому вычитаемое в потолке панели выросло ровно на те же 6px (см. блок «УЗКИЕ ЭКРАНЫ» ниже). ========================================================================= */ /* ------------------------------------------------------------------------- 1. КНОПКА-ВЫЗОВ: КРУГ ВМЕСТО КОРОБКИ Диаметр 62px против прежних 56: эталон держит 64, но здесь кнопка стоит в одной колонке с чужой «наверх» (44px) и не должна её задавить. 62 попадает в просимый заказчиком коридор 60-64 и оставляет запас по высоте на узком экране (посчитан ниже). overflow из зоны 14 снимается намеренно: там он обрезал полосу по радиусу, здесь он обрезал бы всё свечение, ради которого правка и затеяна. ------------------------------------------------------------------------- */ .aai-fab{ width: 62px; height: 62px; border-radius: 50%; overflow: visible; /* Стекло тут больше не нужно: подложка стала непрозрачной, а backdrop-filter на каждом кадре просит у видеокарты размытие фона, которого всё равно не видно под плотной заливкой. */ -webkit-backdrop-filter: none; backdrop-filter: none; /* Три слоя краски: серебряный блик сверху слева (как inset-блик .btn-cosmic на эталоне), синий подпал снизу справа и тёмная база дома. */ background: radial-gradient(118% 118% at 32% 20%, rgba(255,255,255,.17) 0%, rgba(255,255,255,0) 56%), radial-gradient(140% 140% at 78% 106%, rgba(79,196,233,.34) 0%, rgba(79,196,233,0) 62%), linear-gradient(158deg, #1A1D24 0%, #0E1015 100%); border: 1px solid rgba(79,196,233,.55); color: #DCEEF7; box-shadow: inset 0 1px 0 rgba(255,255,255,.30), /* живой блик, физика эталона */ inset 0 -9px 18px -12px rgba(79,196,233,.60), 0 10px 26px -8px rgba(0,0,0,.62), 0 0 18px -2px rgba(79,196,233,.30); transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease, border-color 260ms ease; } .aai-fab svg{ width: 27px; height: 27px; } /* СЛОЙ 1 - широкий мягкий ореол. Он и есть ответ на «чтобы прям видно было». z-index:-1 уводит его ПОД заливку кнопки, поэтому свечение видно только снаружи круга и оно не съедает иконку. 🔴 pointer-events:none обязателен: слой шире кнопки на 18px с каждой стороны и без этого он ловил бы нажатия по чужому тексту вокруг. */ .aai-fab::before{ content: ""; position: absolute; inset: -18px; width: auto; /* перебивает width:var(--bar) из зоны 14 */ height: auto; border-radius: 50%; background: radial-gradient(closest-side, rgba(79,196,233,.44) 0%, rgba(79,196,233,.17) 46%, rgba(79,196,233,0) 78%); box-shadow: none; /* у полосы из зоны 14 была своя тень */ filter: blur(10px); opacity: .72; pointer-events: none; z-index: -1; animation: aai-halo 4.6s ease-in-out infinite; } /* СЛОЙ 2 - тот же свет, но собранный у самой кромки: без него ореол выглядит отдельным пятном, а не свечением предмета. */ .aai-fab::after{ content: ""; position: absolute; inset: -6px; border-radius: 50%; background: radial-gradient(closest-side, rgba(79,196,233,.36) 0%, rgba(79,196,233,0) 76%); filter: blur(5px); opacity: .85; pointer-events: none; z-index: -1; } /* Пульсация ТОЛЬКО по opacity. Ни transform, ни filter в кадре не меняются, поэтому браузер обходится композитингом и не пересчитывает размытие. */ @keyframes aai-halo{ 0%, 100% { opacity: .58; } 50% { opacity: .95; } } /* СЛОЙ 3 - подсветка на наведении. Отдельная пара колец в box-shadow: тень не участвует в hit-тесте вообще, значит третий слой не может перехватить ни одного нажатия по определению. */ @media (hover:hover){ .aai-fab:hover{ transform: translateY(-2px); border-color: rgba(79,196,233,.85); box-shadow: inset 0 1px 0 rgba(255,255,255,.42), 0 14px 32px -8px rgba(0,0,0,.60), 0 0 26px 2px rgba(79,196,233,.46), 0 0 64px 12px rgba(79,196,233,.18); } .aai-fab:hover::before{ opacity: 1; } } /* Нажатие описано ПОСЛЕ наведения: на мыши срабатывают оба состояния разом, и при обратном порядке палец не получал бы отклика вовсе. */ .aai-fab:active{ transform: scale(.94); } .aai-fab:focus-visible{ outline: 2px solid var(--accent); outline-offset: 4px; } /* Точка «на связи» переезжает внутрь круга. На квадрате 56x56 она стояла в 9px от углов, а у круга радиуса 31 эта точка лежит ЗА кромкой: расстояние от центра 31.6px против радиуса 31. Считано, а не подвинуто на глаз. */ .aai-fab__live{ top: 11px; right: 11px; box-shadow: 0 0 0 2px #12141A, 0 0 10px 1px rgba(99,198,162,.65); } /* ------------------------------------------------------------------------- 2. МАЯЧОК: ОБЛАЧКО С ХВОСТИКОМ На эталоне подсказка это отдельный пузырь, а не кусок панели, и хвостик у него сделан квадратом, повёрнутым на 45 градусов. Тот же приём здесь. Высота 44px из зоны 14 сохранена: она там не для красоты, а потому что внутри живёт крестик с полноразмерной целью нажатия. ------------------------------------------------------------------------- */ .aai-teaser{ position: relative; /* якорь для хвостика */ /* Скругления разные: три угла круглые, а нижний правый почти прямой - именно из него растёт хвост, и круглый угол его бы «отрезал» от облака. */ border-radius: 18px 18px 7px 18px; border: 1px solid rgba(79,196,233,.32); border-left: 1px solid rgba(79,196,233,.32); /* снимает полосу 3px зоны 14 */ padding-left: 15px; margin-right: 3px; /* хвост целится в кнопку, а не в край */ background: linear-gradient(158deg, rgba(27,30,37,.97) 0%, rgba(14,16,21,.97) 100%); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 12px 30px -10px rgba(0,0,0,.62), 0 0 26px -2px rgba(79,196,233,.28); } .aai-teaser::after{ content: ""; position: absolute; right: 20px; bottom: -6px; width: 12px; height: 12px; transform: rotate(45deg); background: linear-gradient(158deg, rgba(27,30,37,.97) 0%, rgba(14,16,21,.97) 100%); border-right: 1px solid rgba(79,196,233,.32); border-bottom: 1px solid rgba(79,196,233,.32); pointer-events: none; /* хвост декоративный, нажатия не его дело */ } /* ------------------------------------------------------------------------- 3. ПАНЕЛЬ ПЕРЕПИСКИ: СКРУГЛИТЬ И ОСТЕКЛИТЬ Зона 14 сделала подложку почти непрозрачной осознанно: панель висит над произвольным местом полотна, в том числе над холстом созвездия. Поэтому стекло тут ДОБАВЛЯЕТСЯ, а не подменяет плотность: альфа .93 плюс размытие 18px. Переписка остаётся читаемой, но панель перестаёт быть коробкой, наклеенной поверх страницы. ------------------------------------------------------------------------- */ .aai-panel{ border-radius: 20px; background: linear-gradient(163deg, rgba(25,28,35,.93) 0%, rgba(14,16,21,.95) 100%); -webkit-backdrop-filter: blur(18px) saturate(118%); backdrop-filter: blur(18px) saturate(118%); border: 1px solid rgba(255,255,255,.16); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), 0 26px 70px -18px rgba(0,0,0,.72), 0 0 36px -8px rgba(79,196,233,.22); } /* Внутренности тоже теряют углы: скруглённая коробка с прямоугольными потрохами читается как недоделанная. */ .aai-chip{ border-radius: 999px; } .aai-input{ border-radius: 16px; } .aai-head__ico{ border-radius: 50%; } /* эхо круглой кнопки-вызова */ .aai-x{ border-radius: 50%; } /* 🔴 ПРАВКА 26.08. Капсула в шапке ПОГАШЕНА, и это не отказ от акцента, а его переезд. В разделе 6 синяя линия становится освещённой кромкой по верху панели: она и отделяет панель от полотна, и остаётся носителем бренда. Две синие метки в 12px друг от друга (рейка сверху и капсула под ней) читались бы как недоделка, а правило скилла требует один сильный ход, а не два слабых рядом. Значения top/bottom/radius сохранены в истории файла на случай отката. */ .aai-head::before{ display: none; } /* Кнопка отправки берёт серебро эталона .btn-cosmic: два слоя градиента, inset-блик сверху, тень, набирающая синеву на наведении. Заказчик просил перелив на кнопках - это ровно та кнопка, что попадает в мою зону. */ .aai-send{ border-radius: 50%; border: 1px solid rgba(184,194,208,.30); background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02)), linear-gradient(135deg, #f3f6f9 0%, #cfd6df 44%, #e9edf3 118%); color: #0b1622; /* тёмный знак на серебре: контраст 14:1 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.60), 0 6px 20px -6px rgba(9,20,34,.55); transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease, filter 260ms ease, opacity 160ms ease; } @media (hover:hover){ .aai-send:hover:not(:disabled){ background-image: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.02)), linear-gradient(135deg, #f3f6f9 0%, #cfd6df 44%, #e9edf3 118%); filter: brightness(1.03); transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255,255,255,.70), 0 12px 30px -8px rgba(0,120,180,.50), 0 0 22px -4px rgba(200,205,216,.55); } } .aai-send:active:not(:disabled){ transform: scale(.94); } /* ------------------------------------------------------------------------- 4. УЗКИЕ ЭКРАНЫ: АРИФМЕТИКУ ЗОНЫ 14 НЕ ЛОМАЕМ, А ПЕРЕСЧИТЫВАЕМ 🔴 Зона 14 уже лечила случай, когда шапка панели с крестиком уезжала за верх экрана и закрыть помощника было нечем. Её потолок для узких экранов считался так: 152 низ + 66 кнопка с просветом + 12 воздуха = 230. Кнопка выросла с 56 до 62, значит «кнопка с просветом» стала 72, а всё вычитаемое - 236. Без этой строки запас сверху на 844x390 упал бы с замеренных 12px до 6px, то есть я бы своими руками начал возвращать ту же поломку. ------------------------------------------------------------------------- 🔴 НИЖНЯЯ ГРАНИЦА 641px ЗДЕСЬ НЕ ДЛЯ КРАСОТЫ, ЕЁ НАШЁЛ ЗАМЕР. Первая редакция этого блока была просто max-width:1199px и накрыла собой телефон: на 375x812 зона 14 даёт листу потолок 100vh-168 = 644px, а моё правило, идущее последним, срезало его до 560px. Панель на телефоне не висит в столбике над кнопкой, она fixed-лист со своим низом, и размер кнопки на неё не влияет вообще - значит трогать её было нечем и незачем. Замерено: было 644px, стало 560px, вернул 644px. ------------------------------------------------------------------------- */ @media (min-width: 641px) and (max-width: 1199px){ .aai-panel{ max-height: min(560px, calc(100vh - 236px - env(safe-area-inset-bottom))); } } /* ------------------------------------------------------------------------- 5. ДВИЖЕНИЕ ПО ЖЕЛАНИЮ ПОЛЬЗОВАТЕЛЯ Глобальное правило сайта ужимает transition через !important, но keyframes оно не выключает - ровно на этом зона 14 уже обжигалась с точками «печатает». Пульс ореола гасится явно, и гасится НЕ в ноль: свечение остаётся ровным, помощник не пропадает, уходит только движение. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .aai-fab::before{ animation: none; opacity: .80; /* середина между .58 и .95 из пульса */ } .aai-fab{ transition: none !important; } .aai-fab:hover, .aai-send:hover:not(:disabled){ transform: none; } .aai-fab:active, .aai-send:active:not(:disabled){ transform: none; filter: brightness(1.28); transition: filter 120ms linear !important; } } /* ========================================================================= 6. ОДИН ХОД: СВЕТ СВЕРХУ (26.08.2026) ДОСЛОВНО ОТ ВЯЧЕСЛАВА 26.08: «Бот внизу справа, допустим, который AI помощник, он едва ли заметен там. Когда открывается окошко, оно сливается с местностью. Нужно больше выделять какие-то моменты.» 🔴 ЗАМЕР ДО ПРАВКИ, ЖИВАЯ СТРАНИЦА, ПИКСЕЛИ СО СКРИНА, НЕ ВПЕЧАТЛЕНИЯ. Headless-Chrome, dpr 2, заставка на частицах снята (она перекрывает весь экран z-index 120 и первый заход мерил ЕЁ, а не сайт), прокрутка 2400px, то есть помощник висит над обычным содержимым, а не над пустым низом. ПАНЕЛЬ ПЕРЕПИСКИ, 1440x900 заливка панели rgb(21,23,29) полотно рядом rgb(26,27,33) контраст 1.04:1 <- панель ТЕМНЕЕ страницы, это не предмет над полотном, а дырка в нём кромка панели 1.49:1 при планке WCAG 1.4.11 в 3:1 для границ тень слева 1.01:1 чёрная тень на почти чёрном фоне не видна вообще, её работа равна нулю ПАНЕЛЬ, 844x390 (ландшафт телефона) заливка 1.08:1, кромка 1.64:1 КНОПКА-ВЫЗОВ, 1440x900 тело круга rgb(50,53,58) против полотна rgb(16,16,18) = 1.54:1 кольцо-кромка 4.06:1, и это единственное, чем кнопка вообще держалась Претензия подтвердилась приборно: 1.04:1 это буквально «сливается». ЧТО ВЫБРАНО И ПОЧЕМУ ИМЕННО ЭТО. Соблазн был добавить десять мелочей: ярче свечение, толще рамка, подпись, стрелка. Правило скилла прямо запрещает такой путь, боязливая правка по всем фронтам делает раздел площе, а не сильнее. Взят ОДИН ход и доведён до конца: ПОМОЩНИК СТАНОВИТСЯ ЕДИНСТВЕННЫМ ОСВЕЩЁННЫМ ПРЕДМЕТОМ НА СТРАНИЦЕ. У страницы нет источника света, весь сайт это тёмное полотно с белыми плашками малой альфы. Помощник получает свой свет сверху, и дальше физика делает работу сама: кнопка это сам источник, серебро --silver, то есть материал, который на сайте УЖЕ есть (кнопка «Обменять», кнопка отправки в этой же панели, эталонная .btn-cosmic с apolloproduction.studio); панель это освещённая сверху плита, поднятая над полотном по яркости, с белым бликом по верхней кромке и синей рейкой бренда над ним; маячок из той же семьи, чтобы три части читались одним предметом. НОВЫХ ЦВЕТОВ В СИСТЕМУ НЕ ВВЕДЕНО. Синий #4FC4E9 (--accent), светло-синий #9BE0F7 (--accent-ink), серебро --accent... серебро --silver, зелёный --up, чернильный #0B1622 из раздела 3 этого же файла. Всё уже жило здесь. 🔴 ЧЕГО ПРАВКА НЕ ТРОГАЕТ, ПОТОМУ ЧТО ЭТО ЗАКАЗ ИЛИ УЖЕ ЧИНЕНАЯ БОЛЬ: кнопка остаётся КРУГЛОЙ, border-radius 50% не переопределяется; размер кнопки остаётся 62px. Это не эстетика, а арифметика: потолок панели на узких экранах в разделе 4 считан от 62 (вычитаемое 236). Вырасти кнопка хоть на 4px, и шапка панели с крестиком снова поехала бы за верх экрана на 844x390, ровно та поломка, которую зона 14 уже лечила. Кнопка «зовёт» яркостью и пингом, а не размером; движение только transform и opacity, ни одного кадра с filter или box-shadow в анимации; макс-ширина и посадка панели не тронуты ни в одном медиазапросе. ========================================================================= */ /* ------------------------------------------------------------------------- 6.1 КНОПКА-ВЫЗОВ: ИЗ ТЁМНОГО ПУЗЫРЯ В ИСТОЧНИК СВЕТА Тело круга было rgb(50,53,58) против полотна rgb(16,16,18), это 1.54:1. Тёмный предмет на тёмном полотне не может «звать» ничем, кроме кромки, и замер это показал: держалось всё на кольце 4.06:1 толщиной в один пиксель. Заливка переводится на --silver, тот самый серебряный градиент, которым на сайте набраны главные кнопки и числа. Расчётный контраст тела круга к полотну 12.3:1 против 1.54:1. Синий ореол при этом ОСТАЁТСЯ: он теперь не единственный носитель заметности, а связь со брендом. ------------------------------------------------------------------------- */ .aai-fab{ /* Верхний слой это направленный блик, нижний это системное серебро целиком из токена. Токен подставляется в список слоёв как есть, копии градиента здесь нет намеренно: изменится канон - изменится и кнопка. */ background: linear-gradient(180deg, rgba(255,255,255,.18) 0%, rgba(255,255,255,.02) 62%), var(--silver); /* Кромка чернильная, а не белая: на серебре белая линия невидима, а тёмная отделяет круг от синего ореола и держит форму предмета. */ border: 1px solid rgba(9,20,34,.32); color: #0B1622; /* знак на серебре, около 14:1 */ box-shadow: inset 0 1px 0 rgba(255,255,255,.90), /* блик сверху, свет падает оттуда */ inset 0 -11px 20px -13px rgba(9,20,34,.50), /* тень снизу, круг получает объём */ 0 12px 30px -8px rgba(0,0,0,.72), 0 0 0 1px rgba(79,196,233,.32), /* тонкое синее кольцо: бренд у кромки */ 0 0 22px 1px rgba(79,196,233,.40), 0 0 62px 10px rgba(79,196,233,.15); /* filter дописан в список намеренно: на наведении серебро светлеет через brightness, и без него яркость менялась бы скачком, а тень плавно. */ transition: transform 180ms cubic-bezier(.22,.61,.36,1), box-shadow 260ms ease, border-color 260ms ease, filter 260ms ease; } .aai-fab svg{ width: 27px; height: 27px; } /* Ореол ярче: он теперь работает не «вместо» кнопки, а вокруг неё, и его задача развести серебро и полотно, чтобы круг не выглядел наклейкой. inset остаётся -18px, как в разделе 1: на узком экране столбик стоит в 12px от края, и раздувать слой дальше значит лезть за край экрана. */ .aai-fab::before{ background: radial-gradient(closest-side, rgba(79,196,233,.52) 0%, rgba(79,196,233,.20) 46%, rgba(79,196,233,0) 78%); opacity: .78; } /* 🔴 ::after ПЕРЕПРОФИЛИРОВАН: было плотное свечение у самой кромки, стало расходящееся кольцо, пинг. ПОЧЕМУ ПИНГ, А НЕ БОЛЕЕ СИЛЬНОЕ СВЕЧЕНИЕ ИЛИ ПОДПИСЬ РЯДОМ. свечение уже пробовали 25.08, замер показал, что оно не спасло: 1.54:1; подпись рядом на сайте УЖЕ есть, это маячок, он приходит на 25-й секунде и уходит через 7. Дублировать его постоянной плашкой значит навсегда занять угол текстом и получить ту назойливость, ради исключения которой маячок и сделан выключаемым; пульсация по прозрачности, которая тут была, это дыхание с периодом 4.6с между .58 и .95. Такое изменение глаз в периферийном зрении не ловит вообще, движения в нём ноль. Расходящееся кольцо ловится периферией, потому что это ДВИЖЕНИЕ, а не смена яркости. По Emil Kowalski такую анимацию можно себе позволить: она не привязана к действию человека и не стоит в горячем пути, где задержка раздражала бы, а частота у неё редкая. Плотное свечение у кромки не потеряно, оно переехало в box-shadow выше (кольца 22px и 62px), то есть в слой, который вообще не участвует в попадании курсора. Масштаб 1.38 у круга 62px это рост радиуса с 31 до 42.8, то есть 11.8px за габарит. На узком экране столбик стоит в 12px от края: кольцо останавливается ВНУТРИ этого зазора. Проверено замером scrollWidth против clientWidth, горизонтальной прокрутки не появляется. */ .aai-fab::after{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: none; border: 2px solid rgba(79,196,233,.60); filter: none; opacity: 0; pointer-events: none; z-index: -1; animation: aai-ping 5.2s cubic-bezier(.16,.84,.44,1) infinite; } @keyframes aai-ping{ 0% { transform: scale(1); opacity: .60; } 60% { transform: scale(1.38); opacity: 0; } 100% { transform: scale(1.38); opacity: 0; } } /* Наведение: серебро светлеет, синева набирается, круг чуть поднимается. Ровно та физика, что у эталонной .btn-cosmic и у кнопки отправки ниже. */ @media (hover:hover){ .aai-fab:hover{ transform: translateY(-2px); border-color: rgba(9,20,34,.45); filter: brightness(1.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.95), inset 0 -11px 20px -13px rgba(9,20,34,.42), 0 16px 36px -8px rgba(0,0,0,.70), 0 0 0 1px rgba(79,196,233,.55), 0 0 30px 3px rgba(79,196,233,.52), 0 0 78px 14px rgba(79,196,233,.22); } .aai-fab:hover::before{ opacity: 1; } } /* Точка «на связи». Прежнее кольцо #12141A ставилось под тёмный круг, на серебре тёмное кольцо остаётся верным решением (оно отделяет зелёный от светлого фона), но переводится на чернила кнопки, чтобы не спорить с ней по оттенку. Позиция 11px из раздела 1 не тронута, она посчитана от радиуса. */ .aai-fab__live{ box-shadow: 0 0 0 2px rgba(9,20,34,.60), 0 0 10px 1px rgba(99,198,162,.55); } /* ------------------------------------------------------------------------- 6.2 ПАНЕЛЬ: ПЛИТА, ОСВЕЩЁННАЯ СВЕРХУ Было 1.04:1 к полотну, то есть панель ТЕМНЕЕ страницы под собой. Отсюда и «сливается с местностью»: предмет, который темнее фона, на тёмном сайте не читается как лежащий сверху, он читается как провал. Три вещи разом, и все три это одна физика «свет сверху»: 1. Плита поднимается по яркости выше любой плашки сайта. Панели страницы это белый с альфой .085 по #0C0D11, то есть около rgb(33,34,38). Помощник это верхний слой интерфейса, диалог поверх всего, и он обязан быть светлее всех. Расчётная точка замера около rgb(62,66,74). 2. Кромка. Белая линия .34 даёт около 3.2:1 к полотну, то есть проходит планку WCAG 1.4.11 для границ элементов управления (было 1.49:1). 3. Контактный контур. Чёрная тень на чёрном фоне не работает, замер дал 1.01:1. Тёмное кольцо в 1px ВПЛОТНУЮ к светлой плите работает всегда: оно поднимает местный контраст на самой границе и не зависит от того, что лежит под панелью. Мягкая тень ниже остаётся для глубины. ------------------------------------------------------------------------- */ .aai-panel{ background: linear-gradient(163deg, rgba(255,255,255,.11) 0%, rgba(255,255,255,.085) 55%, rgba(255,255,255,.065) 100%), linear-gradient(163deg, #2E333D 0%, #272C35 100%); border: 1px solid rgba(255,255,255,.34); box-shadow: inset 0 1px 0 rgba(255,255,255,.55), /* блик по верхней кромке */ 0 0 0 1px rgba(0,0,0,.62), /* контактный контур */ 0 30px 80px -22px rgba(0,0,0,.88), 0 0 46px -6px rgba(79,196,233,.30); } /* 🔴 position:relative ТОЛЬКО от 641px и ни пикселем ниже. На телефоне зона 14 делает панель position:fixed листом с собственными left/right/bottom, и безусловное relative здесь снесло бы эту посадку: лист свалился бы в поток столбика у правого края. Это ровно тот класс поломки, который в разделе 4 уже стоил панели 84px высоты. Якорь для рейки на телефоне даёт сам fixed. */ @media (min-width: 641px){ .aai-panel{ position: relative; } } /* Синяя рейка по верхней кромке. Это и есть переехавший акцент из шапки: бренд теперь не метка внутри панели, а её освещённый край. Гасится к краям, чтобы не резаться о радиус 20px, и светит вниз, в панель, как источник. overflow:hidden у панели из зоны 14 обрезает рейку ровно по скруглению. */ .aai-panel::before{ content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, rgba(79,196,233,0) 0%, var(--accent) 18%, var(--accent-ink) 50%, var(--accent) 82%, rgba(79,196,233,0) 100%); box-shadow: 0 0 16px 1px rgba(79,196,233,.55), 0 8px 30px rgba(79,196,233,.20); pointer-events: none; z-index: 3; } /* Шапка подхватывает тот же свет сверху вместо ровной плёнки .028. */ .aai-head{ background: linear-gradient(180deg, rgba(255,255,255,.075) 0%, rgba(255,255,255,0) 100%); border-bottom-color: rgba(255,255,255,.14); } /* ------------------------------------------------------------------------- 6.2.1 ЧТО ПРАВКА ЗАБИРАЕТ, ЕСЛИ ЕЁ НЕ ДОВЕСТИ 🔴 Подъём плиты по яркости УМЕНЬШАЕТ контраст всего, что на ней написано. Это ровно тот случай, где надо проверять, что правка ТЕРЯЕТ, а не что она даёт. Пересчитано по каждому цвету текста внутри панели к новой подложке: .aai-msg--bot #DEE4EB 6.7:1 - проходит .aai-head__s / .aai-note --muted 5.0:1 - проходит .aai-chip --accent-ink 5.1:1 - проходит .aai-input #EDF1F5 выше 9:1 placeholder --dim (.48) 3.69:1 - НЕ ПРОХОДИТ планку 4.5:1 Поднимается только последний, и только внутри помощника: глобальный токен --dim не трогается, он держит контраст на своём тёмном фоне по всему сайту. Заодно поднимаются подложки, которые задумывались как «чуть светлее фона» и на посветлевшей плите просто исчезли бы: пузырь ответа и поле ввода. ------------------------------------------------------------------------- */ /* 🔴 Альфа .66, а не .60, и это поправка ПО ЗАМЕРУ, а не по расчёту. Считал я на подложку плиты rgb(62,66,74) и получал 4.8:1, но у поля ввода своя плёнка сверху, и живая подложка оказалась светлее: rgb(72,76,83). На ней .60 давало 4.3:1, то есть ниже планки 4.5:1 - правка бы молча забрала читаемость подсказки в поле. Замерено на открытой панели, .66 даёт 4.8:1. */ .aai-input::placeholder{ color: rgba(255,255,255,.66); } .aai-msg--bot{ background: rgba(255,255,255,.09); border-color: rgba(255,255,255,.15); } .aai-input{ background: rgba(255,255,255,.075); border-color: rgba(255,255,255,.20); } /* ------------------------------------------------------------------------- 6.3 МАЯЧОК ИЗ ТОЙ ЖЕ СЕМЬИ Маячок, кнопка и панель обязаны читаться одним предметом, иначе ход рассыпается на три разных виджета в одном углу. Плита та же, кромка та же, контактный контур тот же. Форма облачка с хвостиком из раздела 2 не тронута, меняются только материал и свет. ------------------------------------------------------------------------- */ .aai-teaser{ background: linear-gradient(158deg, rgba(60,66,77,.97) 0%, rgba(43,48,57,.97) 100%); border-color: rgba(255,255,255,.30); box-shadow: inset 0 1px 0 rgba(255,255,255,.45), 0 0 0 1px rgba(0,0,0,.58), 0 16px 38px -12px rgba(0,0,0,.80), 0 0 30px -4px rgba(79,196,233,.28); } .aai-teaser::after{ background: linear-gradient(158deg, rgba(48,54,64,.97) 0%, rgba(43,48,57,.97) 100%); border-right-color: rgba(255,255,255,.30); border-bottom-color: rgba(255,255,255,.30); } /* ------------------------------------------------------------------------- 6.4 ДВИЖЕНИЕ ПО ЖЕЛАНИЮ ПОЛЬЗОВАТЕЛЯ 🔴 Раздел 5 гасит пульс ореола, но он писался, когда ::after был статичным свечением. Теперь в ::after живёт анимация, и без этой строки человек с выключенным движением получил бы бесконечно расходящееся кольцо: глобальное правило сайта ужимает transition, но keyframes оно не выключает. На этих же граблях зона 14 уже стояла с точками «печатает». Кольцо не выключается в ноль, а замирает раскрытым и приглушённым: у помощника остаётся видимая граница света, уходит только движение. ------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce){ .aai-fab::after{ animation: none; opacity: .30; transform: scale(1.16); } .aai-fab:hover{ transform: none; } /* Раздел 5 гасил пульс ореола и ставил ему opacity .80. Раздел 6.1 идёт ниже по файлу и с тем же весом, поэтому его .78 перебивало это значение молча, даже внутри блока reduced-motion. Разница на глаз нулевая, но тихо перебитое чужое правило это ровно тот класс поломки, который потом ищут часами. Значение восстанавливается явно. */ .aai-fab::before{ opacity: .80; } } /* ========================================================================= 7. ЛАНДШАФТ ТЕЛЕФОНА: КОМПОЗЕР ОБЯЗАН ОСТАТЬСЯ ВНУТРИ ПАНЕЛИ (скептик, 26.08.2026) НАЙДЕНО ЗАМЕРОМ, НЕ НА ГЛАЗ. Живая страница, http, 844x390, панель открыта: .aai-panel max-height 154px (потолок раздела 4: 390 - 236) overflow hidden дети head 75 + log 18 + chips 105 + form 63 + note 48 = 309px То есть содержимое вдвое выше потолка, и всё, что ниже 166px, СРЕЗАЛОСЬ. Поле ввода и кнопка отправки в ландшафте телефона были не «мелкими», их не было на экране вообще: getBoundingClientRect давал форму на 211..275 при нижней кромке панели 166, а elementFromPoint в точке пересечения отдавал .aai-fab. Панель за край экрана при этом НЕ уезжала (это чинила зона 14), поэтому проверка «панель на экране» проблему не ловила. Правка узкая намеренно: медиазапрос только для низкого ландшафта, потолок панели, её ширина и посадка НЕ трогаются (зона 14 остаётся в силе, кнопка остаётся 62px). Жертвуются подсказки-чипсы и сноска: без них композер работает, с ними не работало ничего. ПРУФ ПОСЛЕ, тот же прибор, 844x390: .aai-input внутри панели: да .aai-send внутри панели: да панель целиком на экране: да пересечение формы и кнопки: 0 px² ========================================================================= */ @media (max-height: 460px) and (orientation: landscape){ /* Чипсы и сноска - единственное, что можно снять без потери функции. */ .aai-panel > .aai-chips, .aai-panel > .aai-note{ display: none !important; } /* Лента переписки отдаёт высоту композеру, а не наоборот. */ .aai-panel > .aai-log{ flex: 1 1 0 !important; min-height: 0 !important; overflow-y: auto !important; } }