/* Новый стиль платформы — тема «бумага и чернила» с терракотовым микроакцентом. Включается атрибутом data-theme="new" на (ставит /ui/theme.js по localStorage). Работает поверх токенов «Дизайн-системы V3»: и tokens.css оболочки, и локальные :root-копии в фронтах агентов перекрываются селектором html[data-theme="new"] — он специфичнее :root. Правки классов ниже — только для классов, общих между фронтами. */ html[data-theme="new"] { /* Нейтральные: тёплая бумага вместо нейтрального серого */ --bg: #fcfbf8; --surface: #ffffff; --sidebar-bg: #f6f5ef; --border: #e9e7dd; --border-strong: #d9d6c9; --hover: rgba(31, 30, 27, 0.04); --selected: rgba(31, 30, 27, 0.07); --accent-soft: #f6e5de; --text: #1f1e1b; --text-secondary: #6b6a63; --text-muted: #97958b; --placeholder: #b3b1a6; /* Акцентные: терракота вместо чёрного, ссылки — тёмный тон акцента */ --accent: #c6613f; --accent-deep: #a34e2d; --link: #a34e2d; --link-bg: #f6e5de; --danger: #b0432f; --danger-bg: #f6e0dc; /* Статусы: те же смыслы, чуть теплее фоны */ --ok: #2f7a4d; --ok-bg: #e3efe7; --warn: #a8632a; --warn-bg: #f6e9d6; /* Грудинг — в тоне акцента вместо фиолетово-оранжевого */ --highlight: rgba(198, 97, 63, 0.10); --highlight-border: #c6613f; --ground-badge: #a34e2d; /* Геометрия и тени: мягче */ --radius: 10px; --radius-lg: 14px; --sh-card: 0 1px 3px rgba(30, 25, 15, 0.05); --dur-1: 0.12s; --dur-2: 0.2s; --dur-3: 0.32s; --ease: cubic-bezier(0.2, 0.7, 0.3, 1); --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --sh-menu: 0 8px 26px rgba(30, 25, 15, 0.13); --sh-pop: 0 12px 34px rgba(30, 25, 15, 0.15); } /* Первичные кнопки: мягкая заливка тона акцента вместо сплошной тёмной. Классы .btn-primary используются оболочкой и фронтами агентов. */ html[data-theme="new"] .btn-primary { background: var(--accent-soft); color: var(--accent-deep, #a34e2d); font-weight: 600; } html[data-theme="new"] .btn-primary:hover { opacity: 1; filter: brightness(0.96); } /* Мягкие переходы состояний у типовых интерактивных элементов */ html[data-theme="new"] .btn-primary, html[data-theme="new"] .btn-ghost, html[data-theme="new"] .nav-item, html[data-theme="new"] .agent-card, html[data-theme="new"] .session-row { transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, color 0.15s ease, filter 0.15s ease; } /* Серые теги-пилюли с зашитым цветом (оболочка: «Прототип интерфейса») */ html[data-theme="new"] .tag.proto { color: #78766c; background: #edebe3; } /* Серифные заголовки страниц — характер нового стиля */ html[data-theme="new"] h1 { font-family: "Lora", "PT Serif", Georgia, "Times New Roman", serif; letter-spacing: -0.01em; } /* Карточки агентов оболочки: перелив-обложка в тоне агента (утверждённый вариант A). Цвет приходит через --agent-c из разметки; без поддержки color-mix обложка тихо не рисуется, карточка остаётся обычной. */ html[data-theme="new"] .agent-card { position: relative; overflow: hidden; padding-top: 72px; } html[data-theme="new"] .agent-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px; background: linear-gradient(128deg, color-mix(in srgb, var(--agent-c, #c6613f) 52%, #ffffff), color-mix(in srgb, var(--agent-c, #c6613f) 24%, #ffffff) 55%, color-mix(in srgb, var(--agent-c, #c6613f) 10%, #fbf3e7)); } html[data-theme="new"] .agent-card::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 56px; background: radial-gradient(ellipse at 18% 32%, rgba(255, 255, 255, 0.65), transparent 58%); } html[data-theme="new"] .agent-card .dot { width: 13px; height: 13px; } /* ── Полнота покрытия: значения, зашитые во фронтах мимо токенов ── */ /* Фокус полей ввода — единый тёплый (было #b9b9be в трёх фронтах) */ html[data-theme="new"] input:focus, html[data-theme="new"] textarea:focus, html[data-theme="new"] select:focus, html[data-theme="new"] .chat-box:focus-within { border-color: var(--border-strong); } /* Ховер-границы #c8c8cd → токен */ html[data-theme="new"] .agent-card:hover, html[data-theme="new"] .rule-row:hover, html[data-theme="new"] .iss:hover, html[data-theme="new"] .tchip:hover, html[data-theme="new"] .ex-item:hover, html[data-theme="new"] .q-chip:hover, html[data-theme="new"] .epre-b:hover, html[data-theme="new"] .em:hover, html[data-theme="new"] .padd:hover { border-color: var(--border-strong); } /* Ховеры строк и серые подложки (#fafafa, #ececee, #f2f2f4) → тёплые */ html[data-theme="new"] tr:hover td, html[data-theme="new"] .kb-item:hover, html[data-theme="new"] .an-row-head:hover { background: var(--hover); } html[data-theme="new"] .note, html[data-theme="new"] .du.row { background: #faf9f4; } html[data-theme="new"] .drop, html[data-theme="new"] .dp-diff { background: #fdfcf9; } html[data-theme="new"] .doc-col { background: #f1efe8; } html[data-theme="new"] .cand th, html[data-theme="new"] .th-head { background: #f4f2ea; } /* Вкладки матрицы (кнопки без класса .tab); вкладки ОРД не трогаем — у них по макету только цвет текста и тонкое подчёркивание, без плашки */ html[data-theme="new"] .tabs button.active:not(.tab) { background: var(--selected); } html[data-theme="new"] .cell-empty { color: var(--border-strong); } /* Нейтральные серые пилюли и аватары → тёплый серый */ html[data-theme="new"] .who.u { background: #78766c; } html[data-theme="new"] .st-n, html[data-theme="new"] .c-del { background: #edebe3; color: #78766c; } /* Первичные кнопки других имён: админка (.btn) и отчётность (.btn.primary) */ html[data-theme="new"] .admin .btn:not(.ghost):not(.danger), html[data-theme="new"] .btn.primary { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-deep, #a34e2d); font-weight: 600; } /* Активные чипы со сплошным акцентом → мягкая заливка */ html[data-theme="new"] .chip.active, html[data-theme="new"] .fb-chip.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-deep, #a34e2d); font-weight: 600; } /* Тосты: тёмная капсула → светлая, по новому стилю */ html[data-theme="new"] .toast, html[data-theme="new"] .mk-toast { background: var(--surface); color: var(--text); border: 1px solid var(--border); box-shadow: var(--sh-pop); } /* Тултип: чернильный, не терракотовый */ html[data-theme="new"] .icon-btn[data-tip]::after { background: #2a2925; } /* ══ Сцена макета: структурный слой нового стиля ══ */ /* Тёплый фон с мягкими цветными пятнами — как в макетах прототипа. Градиенты лежат прямо в фоне body: псевдоэлемент с z-index -1 в Safari уходит под непрозрачный фон страницы. Размеры — от вьюпорта, чтобы пятна не терялись на широких мониторах. */ html[data-theme="new"] body { background: radial-gradient(46vw 42vh at 6% 0%, rgba(240, 201, 178, 0.55), transparent 62%), radial-gradient(52vw 50vh at 100% 40%, rgba(207, 221, 227, 0.6), transparent 64%), radial-gradient(44vw 38vh at 32% 106%, rgba(230, 223, 200, 0.65), transparent 62%), var(--bg); background-attachment: fixed; } /* Сайдбар — плавающая стеклянная панель (оболочка и фронты агентов) */ html[data-theme="new"] .sidebar { background: linear-gradient(135deg, rgba(255, 255, 255, 0.52), rgba(255, 255, 255, 0.16) 60%, rgba(255, 255, 255, 0.52)); -webkit-backdrop-filter: blur(16px) saturate(1.45); backdrop-filter: blur(16px) saturate(1.45); border: 1px solid rgba(255, 255, 255, 0.62); border-radius: 16px; margin: 14px; box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.8), 0 10px 28px rgba(30, 25, 15, 0.1); } @media (max-width: 760px) { /* в узком режиме сайдбар лежит поверх контента — без отступов и скруглений */ html[data-theme="new"] .sidebar { margin: 0; border-radius: 0; } } /* Внутри стекла состояния — белыми слоями, не серыми */ html[data-theme="new"] .sidebar .nav-item:hover, html[data-theme="new"] .sidebar .agent-row:hover, html[data-theme="new"] .sidebar .session-row:hover, html[data-theme="new"] .sidebar .side-user-btn:hover, html[data-theme="new"] .sidebar .ws-collapse:hover { background: rgba(255, 255, 255, 0.5); } html[data-theme="new"] .sidebar .nav-item.active, html[data-theme="new"] .sidebar .agent-row.active { background: rgba(255, 255, 255, 0.68); box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.85); } /* Знак «строки» вместо квадрата «АД» */ html[data-theme="new"] .ws-logo, html[data-theme="new"] .workspace-logo { background: transparent; color: transparent; border-radius: 0; background-image: url('data:image/svg+xml;utf8,'); background-size: 22px 22px; background-position: center; background-repeat: no-repeat; } /* Карточки каталога приподнимаются */ html[data-theme="new"] .agent-card { transition: transform 0.18s cubic-bezier(0.2, 0.7, 0.3, 1), box-shadow 0.18s ease, border-color 0.15s ease, background-color 0.15s ease; } html[data-theme="new"] .agent-card:hover { transform: translateY(-2px); box-shadow: 0 8px 22px rgba(30, 25, 15, 0.12); border-color: var(--border); } /* Появление меню и поповеров — мягкое, вместо мгновенного display */ @keyframes mkMenuIn { from { opacity: 0; transform: translateY(4px) scale(0.98); } } html[data-theme="new"] .row-menu.open, html[data-theme="new"] .user-menu.open, html[data-theme="new"] .export-menu.on { animation: mkMenuIn 0.18s cubic-bezier(0.2, 0.7, 0.3, 1); } /* Композер чата (РАГ): карточка с бо́льшим радиусом, как в макете */ html[data-theme="new"] .chat-box { border-radius: 16px; box-shadow: var(--sh-card); } /* Шапки сессий лежат на сцене без сплошной линии — граница мешала стеклу */ html[data-theme="new"] .session-head { border-bottom-color: transparent; } /* Агент в iframe — продолжение сцены оболочки: свой фон не рисуем, сцена просвечивает насквозь, шва на границе iframe нет */ html[data-theme="new"].mk-in-frame, html[data-theme="new"].mk-in-frame body { background: transparent; } /* Пузырь сообщения пользователя — светлый, как поле ввода */ html[data-theme="new"] .msg.user, html[data-theme="new"] .msg-user { background: var(--surface); border: 1px solid var(--border); box-shadow: var(--sh-card); } /* Строки сессий не прыгают на ховере: дата гаснет по месту, кнопка «⋯» ложится поверх неё, раскладка не сдвигается */ html[data-theme="new"] .session-row .meta { transition: opacity 0.12s ease; } html[data-theme="new"] .session-row:hover .meta { display: inline; opacity: 0; } html[data-theme="new"] .session-row .row-kebab { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); display: flex; opacity: 0; pointer-events: none; } html[data-theme="new"] .session-row:hover .row-kebab { opacity: 1; pointer-events: auto; } /* ══ Движение по агентам (карта внедрения «Анимации — спецификация V1») ══ */ @keyframes mkIn { from { opacity: 0; transform: translateY(8px); } } @keyframes mkDrawerIn { from { opacity: 0; transform: translateX(40px); } } @keyframes mkFade { from { opacity: 0; } } /* РАГ: сообщения и панель источника */ html[data-theme="new"] .msg.user, html[data-theme="new"] .msg.agent { animation: mkIn 0.3s var(--ease-out); } html[data-theme="new"] .source-panel.open { animation: mkDrawerIn var(--dur-3) var(--ease); } /* word: оверлей прогресса и карточки замечаний */ html[data-theme="new"] .overlay.on { animation: mkFade var(--dur-3) ease; } html[data-theme="new"] .overlay.on .prog-card { animation: mkIn var(--dur-3) var(--ease-out); } html[data-theme="new"] .iss { animation: mkIn 0.25s var(--ease-out); } /* НМЦ: экраны степпера и шторка копии страницы */ html[data-theme="new"] .step-screen.on { animation: mkIn var(--dur-3) var(--ease-out); } html[data-theme="new"] .src-panel.open { animation: mkDrawerIn var(--dur-3) var(--ease); } /* Отчётность: модалки и плавная перекраска ячеек */ html[data-theme="new"] .overlay.open { animation: mkFade var(--dur-3) ease; } html[data-theme="new"] .overlay.open .modal { animation: mkIn var(--dur-3) var(--ease-out); } html[data-theme="new"] .cell { transition: background-color var(--dur-2) ease; } /* Матрица: тайминги шторки к токенам, подложка с fade */ html[data-theme="new"] .drawer { transition-duration: var(--dur-3); } html[data-theme="new"] .drawer-backdrop { display: block; opacity: 0; pointer-events: none; transition: opacity var(--dur-3) ease; } html[data-theme="new"] .drawer-backdrop.open { opacity: 1; pointer-events: auto; } /* ══ Верхняя линия: воркспейс, шапка чата и шапка источника — на одном уровне ══ */ html[data-theme="new"] .sidebar { padding-top: 8px; } html[data-theme="new"] .workspace { padding-top: 2px; padding-bottom: 8px; } html[data-theme="new"] .session-head { padding-top: 22px; } html[data-theme="new"] .sp-head { padding-top: 18px; } /* ══ Слой A: геометрия и типографика по прототипу ══ */ /* Типографика ролей: сериф — только крупным героям; мелкие заголовки — Inter */ html[data-theme="new"] .session-head h1 { font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-weight: 600; } /* Воздух и радиусы: списки и карточки фронтов */ html[data-theme="new"] .kb-item { padding: 12px 14px; } html[data-theme="new"] .hit { border-radius: 12px; } html[data-theme="new"] .hint-chip { padding: 6px 13px; } html[data-theme="new"] .iss { padding: 13px 15px; border-radius: 12px; } html[data-theme="new"] .rule-row { padding: 10px 12px; border-radius: 10px; } html[data-theme="new"] .drop { border-radius: 14px; padding: 22px; } html[data-theme="new"] .cand th, html[data-theme="new"] .cand td { padding: 8px 11px; } html[data-theme="new"] .step { padding: 10px 0; } /* Контролы: высоты и радиусы прототипа */ html[data-theme="new"] .btn-primary, html[data-theme="new"] .btn-ghost, html[data-theme="new"] .btn, html[data-theme="new"] .btn-sec { padding: 9px 16px; border-radius: 10px; } html[data-theme="new"] .btn.sm { padding: 6px 12px; } html[data-theme="new"] .inp, html[data-theme="new"] input.inp, html[data-theme="new"] .sel, html[data-theme="new"] .tinput, html[data-theme="new"] .tselect { padding: 9px 12px; border-radius: 10px; } html[data-theme="new"] .chat-box { padding: 14px 14px 10px; } html[data-theme="new"] .chat-send { width: 34px; height: 34px; opacity: 1; } /* Материал панелей источника — стекло; содержимое остаётся бумагой */ html[data-theme="new"] .source-panel, html[data-theme="new"] .src-panel { background: linear-gradient(135deg, rgba(255, 255, 255, 0.62), rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.62)); -webkit-backdrop-filter: blur(16px) saturate(1.45); backdrop-filter: blur(16px) saturate(1.45); border-left: 1px solid rgba(255, 255, 255, 0.62); box-shadow: inset 0 1.5px 1px rgba(255, 255, 255, 0.8), -10px 0 28px rgba(30, 25, 15, 0.08); } html[data-theme="new"] .sp-head { border-bottom-color: transparent; } html[data-theme="new"] .source-panel img { border-radius: 8px; box-shadow: 0 3px 14px rgba(20, 16, 8, 0.16); } /* Стеклянный сайдбар агентов: внутренности без белых плашек */ html[data-theme="new"] .sidebar .workspace { background: transparent; } /* Админка: таблица как карточка на сцене */ html[data-theme="new"] .admin table { border-collapse: separate; border-spacing: 0; background: var(--surface); border: 1px solid var(--border); border-radius: 14px; margin-top: 14px; overflow: hidden; } html[data-theme="new"] .admin th { font-size: 11.5px; color: var(--text-muted); text-align: left; padding: 11px 14px; border-bottom: 1px solid var(--border); } html[data-theme="new"] .admin td { padding: 11px 14px; border-bottom: 1px solid var(--border); } html[data-theme="new"] .admin tr:last-child td { border-bottom: none; } /* ══ Слой B1: РАГ — панель источника и карточки по прототипу ══ */ /* Тело панели источника: серая подложка убивала стекло — сцена просвечивает, листы документа лежат «бумагой» на стекле */ html[data-theme="new"] .sp-body { background: transparent; } /* Карточки форм в ответе — геометрия прототипа */ html[data-theme="new"] .form-card { border-radius: 12px; padding: 12px 14px; } /* Карточки источников: бумага на стекле, воздух прототипа */ html[data-theme="new"] .hit { padding: 10px 12px; margin-bottom: 8px; } /* Матовое стекло внутри iframe: backdrop-filter не видит сцену родительской страницы, поэтому панели и сайдбары агентов рисуют пятна сцены сами — background-attachment: fixed совмещает их со сценой оболочки, и при скролле контента фон неподвижен, как у настоящего стекла */ html[data-theme="new"].mk-in-frame .source-panel, html[data-theme="new"].mk-in-frame .src-panel, html[data-theme="new"].mk-in-frame .sidebar { background: linear-gradient(135deg, rgba(255, 255, 255, 0.58), rgba(255, 255, 255, 0.38) 60%, rgba(255, 255, 255, 0.58)), radial-gradient(46vw 42vh at 6% 0%, rgba(240, 201, 178, 0.55), transparent 62%), radial-gradient(52vw 50vh at 100% 40%, rgba(207, 221, 227, 0.6), transparent 64%), radial-gradient(44vw 38vh at 32% 106%, rgba(230, 223, 200, 0.65), transparent 62%), var(--bg); background-attachment: fixed; } /* ══ Слои B2–B6: доводка фронтов до прототипа (CSS-часть) ══ */ /* word: карточки замечаний и чипы */ html[data-theme="new"] .iss { box-shadow: var(--sh-card); } html[data-theme="new"] .du.row { border-radius: 8px; } html[data-theme="new"] .fchip { padding: 5px 12px; } /* НМЦ: степпер — карточки прототипа с тёплыми номерами */ html[data-theme="new"] .stp { background: var(--surface); border-radius: 12px; box-shadow: var(--sh-card); } html[data-theme="new"] .stp .n { background: var(--hover); color: var(--text-secondary); } html[data-theme="new"] .stp.cur { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } html[data-theme="new"] .stp.cur .n { background: var(--accent); color: #fff; } html[data-theme="new"] .stp.done .n { background: var(--ok-bg); color: var(--ok); } /* Отчётность: плитки-метрики как карточки */ html[data-theme="new"] .stat { background: var(--surface); box-shadow: var(--sh-card); padding: 11px 14px; min-width: 118px; } html[data-theme="new"] .stat .v { font-size: 19px; } /* ОРД: лист документа — бумага на сцене */ html[data-theme="new"] .doc { border-radius: 12px; box-shadow: 0 3px 16px rgba(20, 16, 8, 0.14); } /* Матрица: шторка в тайминги токенов, тёплая тень */ html[data-theme="new"] .drawer { transition-duration: var(--dur-3, 0.32s); box-shadow: -10px 0 28px rgba(30, 25, 15, 0.14); }