/* Шрифты редизайна — лежат на нашем сервере (/static/fonts), без Google: из мобильных сетей РФ внешний запрос шрифта вешал сайт. Onest — интерфейс, Literata — текст ответов. Вариативные woff2, только кириллица и латиница. */ @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/onest-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Onest'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('/static/fonts/onest-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/static/fonts/literata-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Literata'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('/static/fonts/literata-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ============================================================ РЕДИЗАЙН 2026-09: «клинический минимализм» в духе Claude ============================================================ Слой поверх app.css. Функции и разметку не меняет — только внешний вид. Откат: убрать строку с redesign.css из index.html. Инфузия и аптека сознательно остаются в прежнем оформлении: на их страницах app.js ставит , и ни одно правило ниже там не срабатывает. Специфичность: все компонентные правила обёрнуты в :where(), то есть весят ровно как исходные селекторы app.css и побеждают только за счёт того, что этот файл подключён позже. Токены — наоборот, с явной специфичностью: им надо перебить тёмную тему app.css (:root:not([data-theme="light"])). Принципы: — два цвета на экране: текст и фон; изумрудный акцент только точечно (ссылки, фокус, активное состояние), никаких заливок им; — основная кнопка — цвета текста (тёмная в светлой теме, светлая в тёмной); — ответ ассистента — текст документа шрифтом с засечками, без рамки; «пузырь» только у вопроса пользователя; — поле ввода — единый блок, кнопки внутри него; — разделение — фоном и воздухом, а не рамками и тенями. */ /* ---------------------------------------------------------------- токены */ /* Нейтральные — не серые, а с лёгким мятным отливом (пожелание владельца): фон, панели, рамки и «пузырь» вопроса чуть зеленоватые, текст и основная кнопка — глубокий зелёно-чернильный вместо чистого чёрного. */ :root:not(.ui-legacy) { --c-bg: #f3f8f6; --c-surface: #ffffff; --c-sidebar: #e9f2ee; --c-header: #f3f8f6; --c-header-2: #e1ede8; --c-border: #d6e4de; --c-border-soft: #e2ece8; --c-text: #17241f; --c-muted: #5d6e68; --c-faint: #8a9b95; --c-hover: rgba(20, 90, 70, .06); --c-hover-2: rgba(20, 90, 70, .10); --c-user-bubble: #e3efea; --c-primary: #173a31; --c-on-primary: #ffffff; --c-accent: #0f766e; --c-accent-h: #0b5f59; --c-accent-soft: rgba(15, 118, 110, .12); --c-amber: #9a6320; --c-amber-bg: #f7efe3; --c-danger: #b42318; --c-warn: #b45309; --c-ok: #15803d; --c-ok-bg: #eef6f0; --c-warn-bg: #fbf3e6; --c-danger-bg: #fbeeec; --c-nodata-bg: #f1f0ed; --r: 8px; --r-lg: 14px; --shadow: 0 1px 2px rgba(31, 31, 29, .05); --shadow-lg: 0 12px 40px rgba(31, 31, 29, .10); --shadow-composer: 0 1px 2px rgba(31, 31, 29, .04), 0 6px 24px rgba(31, 31, 29, .05); --font-sans: 'Onest', 'IBM Plex Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --font-serif: 'Literata', 'Source Serif 4', Georgia, 'Times New Roman', serif; --fs-xs: 12px; --fs-sm: 13.5px; --fs-base: 15px; } @media (prefers-color-scheme: dark) { :root:not(.ui-legacy):not([data-theme="light"]) { --c-bg: #161d1b; --c-surface: #1f2825; --c-sidebar: #19211f; --c-header: #161d1b; --c-header-2: #25302c; --c-border: #32403b; --c-border-soft: #28332f; --c-text: #e6efeb; --c-muted: #9db0a9; --c-faint: #71847d; --c-hover: rgba(190, 235, 215, .06); --c-hover-2: rgba(190, 235, 215, .10); --c-user-bubble: #24302c; --c-primary: #d9eee5; --c-on-primary: #12201b; --c-accent: #5ec4b0; --c-accent-h: #7dd3c2; --c-accent-soft: rgba(94, 196, 176, .14); --c-amber: #d9a35f; --c-amber-bg: #2d261c; --c-danger: #f09a90; --c-warn: #e0a458; --c-ok: #7cc796; --c-ok-bg: #1c2a21; --c-warn-bg: #2d261a; --c-danger-bg: #2e1f1d; --c-nodata-bg: #262624; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45); --shadow-composer: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 24px rgba(0, 0, 0, .25); } } :root:not(.ui-legacy)[data-theme="dark"] { --c-bg: #161d1b; --c-surface: #1f2825; --c-sidebar: #19211f; --c-header: #161d1b; --c-header-2: #25302c; --c-border: #32403b; --c-border-soft: #28332f; --c-text: #e6efeb; --c-muted: #9db0a9; --c-faint: #71847d; --c-hover: rgba(190, 235, 215, .06); --c-hover-2: rgba(190, 235, 215, .10); --c-user-bubble: #24302c; --c-primary: #d9eee5; --c-on-primary: #12201b; --c-accent: #5ec4b0; --c-accent-h: #7dd3c2; --c-accent-soft: rgba(94, 196, 176, .14); --c-amber: #d9a35f; --c-amber-bg: #2d261c; --c-danger: #f09a90; --c-warn: #e0a458; --c-ok: #7cc796; --c-ok-bg: #1c2a21; --c-warn-bg: #2d261a; --c-danger-bg: #2e1f1d; --c-nodata-bg: #262624; --shadow: 0 1px 2px rgba(0, 0, 0, .3); --shadow-lg: 0 12px 40px rgba(0, 0, 0, .45); --shadow-composer: 0 1px 2px rgba(0, 0, 0, .25), 0 6px 24px rgba(0, 0, 0, .25); } /* ---------------------------------------------------------------- основа */ :where(html:not(.ui-legacy)) body { font-family: var(--font-sans); font-size: var(--fs-base); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(html:not(.ui-legacy)) ::selection { background: var(--c-accent-soft); } :where(html:not(.ui-legacy)) :where(a, button, [role="button"], input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; } :where(html:not(.ui-legacy)) .header :where(a, button):focus-visible, :where(html:not(.ui-legacy)) .hb-header :where(a, button):focus-visible { outline-color: var(--c-accent); } /* ---------------------------------------------------------------- шапка */ :where(html:not(.ui-legacy)) .header { background: var(--c-bg); color: var(--c-text); border-bottom: 1px solid var(--c-border-soft); gap: 6px; } :where(html:not(.ui-legacy)) .header-logo, :where(html:not(.ui-legacy)) .admin-nav-logo, :where(html:not(.ui-legacy)) .auth-logo { font-family: var(--font-serif); font-weight: 600; color: var(--c-text); letter-spacing: -.01em; } :where(html:not(.ui-legacy)) .header-logo { font-size: 19px; margin: 0 6px 0 2px; } :where(html:not(.ui-legacy)) .btn-icon { color: var(--c-muted); border-radius: 10px; transition: background .15s ease, color .15s ease; } :where(html:not(.ui-legacy)) .btn-icon:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .btn-icon .icon { width: 19px; height: 19px; } /* Переключатель режимов — сегментированный, как в системных настройках */ :where(html:not(.ui-legacy)) .mode-tabs { background: var(--c-hover); border-radius: 10px; padding: 3px; gap: 2px; } :where(html:not(.ui-legacy)) .mode-tab { color: var(--c-muted); border-radius: 7px; font-size: 13px; font-weight: 500; padding: 5px 12px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; } :where(html:not(.ui-legacy)) .mode-tab:hover { color: var(--c-text); } :where(html:not(.ui-legacy)) .mode-tab.active { background: var(--c-surface); color: var(--c-text); box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 .5px rgba(0, 0, 0, .04); } :where(html:not(.ui-legacy)) .header-hb { color: var(--c-muted); border: none; border-radius: 10px; padding: 6px 10px; font-size: 13.5px; } :where(html:not(.ui-legacy)) .header-hb:hover { background: var(--c-hover); color: var(--c-text); border: none; } :where(html:not(.ui-legacy)) #assistantModelBtn { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); border-radius: 999px; } :where(html:not(.ui-legacy)) #assistantModelBtn:hover { background: var(--c-hover); border-color: var(--c-border); } :where(html:not(.ui-legacy)) #assistantModelBtn::before, :where(html:not(.ui-legacy)) #assistantModelBtnMobile::before { background: var(--c-accent); } /* ---------------------------------------------------------------- боковая панель */ :where(html:not(.ui-legacy)) .sidebar { background: var(--c-sidebar); border-right: 1px solid var(--c-border-soft); padding: 8px 0; } :where(html:not(.ui-legacy)) .sidebar-nav { border-bottom: none; padding: 4px 8px 8px; } :where(html:not(.ui-legacy)) .sidebar-nav-btn { border-radius: 9px; font-size: 14px; color: var(--c-text); padding: 8px 10px; } :where(html:not(.ui-legacy)) .sidebar-nav-btn:hover { background: var(--c-hover); } :where(html:not(.ui-legacy)) .new-chat-btn { display: flex; align-items: center; gap: 10px; margin: 2px 8px 10px; padding: 8px 10px; background: transparent; color: var(--c-text); border-radius: 9px; font-size: 14px; font-weight: 500; text-align: left; } :where(html:not(.ui-legacy)) .new-chat-btn .icon { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--c-primary); color: var(--c-on-primary); stroke-width: 2.2; } :where(html:not(.ui-legacy)) .new-chat-btn:hover { background: var(--c-hover); } /* «История диалогов» — тихая подпись над списком, а не заголовок капсом. Кнопка «Новый диалог» в разметке идёт после подписи — меняем порядок, чтобы действие стояло над списком, как принято. */ :where(html:not(.ui-legacy)) .sidebar { display: flex; flex-direction: column; } :where(html:not(.ui-legacy)) .sidebar .new-chat-btn { order: -1; } :where(html:not(.ui-legacy)) .sidebar .sidebar-nav { order: -2; } :where(html:not(.ui-legacy)) .sidebar .sidebar-spec-mobile { order: -3; } :where(html:not(.ui-legacy)) .sidebar-header { border-bottom: none; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--c-faint); padding: 10px 18px 4px; } :where(html:not(.ui-legacy)) .sidebar-list { padding: 0 0 8px; } :where(html:not(.ui-legacy)) .sidebar-item { margin: 0 8px 1px; padding: 7px 10px; border-radius: 9px; font-size: 14px; color: var(--c-text); line-height: 1.35; } :where(html:not(.ui-legacy)) .sidebar-item > span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; } :where(html:not(.ui-legacy)) .sidebar-item:hover { background: var(--c-hover); } :where(html:not(.ui-legacy)) .sidebar-item.active { background: var(--c-hover-2); color: var(--c-text); font-weight: 500; } :where(html:not(.ui-legacy)) .sidebar-item-date { font-size: 11.5px; color: var(--c-faint); flex: none; } :where(html:not(.ui-legacy)) .sidebar-checks-btn { margin: 6px 8px 0; padding: 8px 10px; background: transparent; color: var(--c-muted); border: none; border-radius: 9px; font-size: 13.5px; } :where(html:not(.ui-legacy)) .sidebar-checks-btn:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .sidebar-spec-mobile { border-bottom: none; } :where(html:not(.ui-legacy)) .sidebar-spec-mobile label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--c-faint); } :where(html:not(.ui-legacy)) .sidebar-spec-mobile select, :where(html:not(.ui-legacy)) #assistantModelBtnMobile { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 10px; } /* ---------------------------------------------------------------- лента */ :where(html:not(.ui-legacy)) .messages { padding: 28px 0 12px; } :where(html:not(.ui-legacy)) .message-wrap { max-width: 760px; margin-bottom: 26px; } :where(html:not(.ui-legacy)) .message.user .bubble { background: var(--c-user-bubble); color: var(--c-text); border-radius: 18px; padding: 10px 16px; font-size: 15px; line-height: 1.55; } /* Ответ — текст документа, а не карточка */ :where(html:not(.ui-legacy)) .message.assistant .bubble { background: transparent; border: none; box-shadow: none; border-radius: 0; padding: 0 2px; font-family: var(--font-serif); font-size: 16.5px; line-height: 1.72; color: var(--c-text); font-optical-sizing: auto; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(h1, h2, h3, h4) { font-family: var(--font-sans); font-weight: 600; letter-spacing: -.01em; line-height: 1.3; margin: 1.2em 0 .45em; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(p) { margin: 0 0 .8em; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(p:last-child) { margin-bottom: 0; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(ul, ol) { padding-left: 1.3em; margin: .4em 0 .9em; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(li) { margin: .25em 0; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(a) { color: var(--c-accent); text-decoration: underline; text-decoration-color: var(--c-accent-soft); text-underline-offset: 3px; } :where(html:not(.ui-legacy)) .message.assistant .bubble :where(code) { font-size: .86em; background: var(--c-hover); border-radius: 5px; padding: .1em .35em; } /* Служебные блоки внутри ответа — в шрифте интерфейса, не документа */ :where(html:not(.ui-legacy)) .message.assistant .bubble :where(.rate-row, .img-actions, .img-dl-row, .think-box, .edit-status, .download-btn, .img-prompt-label, .img-prompt-text, .answer-table), :where(html:not(.ui-legacy)) .bubble.check-report { font-family: var(--font-sans); } :where(html:not(.ui-legacy)) .bubble.check-report { font-size: 14.5px; line-height: 1.55; } /* Номер источника — маленький круглый маркер в цвет текста */ :where(html:not(.ui-legacy)) .cite { background: var(--c-hover-2); color: var(--c-muted); border: none; border-radius: 999px; font-family: var(--font-sans); font-size: 10.5px; font-weight: 600; min-width: 18px; height: 18px; padding: 0 5px; vertical-align: .15em; margin: 0 1px; transition: background .15s ease, color .15s ease; } :where(html:not(.ui-legacy)) .cite:hover, :where(html:not(.ui-legacy)) .cite.active { background: var(--c-accent); color: var(--c-on-primary); border-color: transparent; } :where(html:not(.ui-legacy)) .answer-table { background: transparent; font-size: 14px; } :where(html:not(.ui-legacy)) .answer-table th, :where(html:not(.ui-legacy)) .answer-table td { border-color: var(--c-border); padding: 8px 12px; } :where(html:not(.ui-legacy)) .answer-table th { background: var(--c-hover); font-weight: 600; } :where(html:not(.ui-legacy)) .rate-row { gap: 2px; margin-top: 10px; } :where(html:not(.ui-legacy)) .rate-btn { border: none; border-radius: 8px; padding: 5px 8px; color: var(--c-faint); background: transparent; } :where(html:not(.ui-legacy)) .rate-btn:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .rate-btn.up.active { background: var(--c-ok-bg); color: var(--c-ok); } :where(html:not(.ui-legacy)) .rate-btn.dn.active { background: var(--c-danger-bg); color: var(--c-danger); } :where(html:not(.ui-legacy)) .think-block { background: transparent; border: 1px solid var(--c-border); border-radius: 12px; } :where(html:not(.ui-legacy)) .typing-dot { background: var(--c-faint); } :where(html:not(.ui-legacy)) .img-prompt-text { background: var(--c-hover); border: none; border-radius: 12px; padding: 12px 14px; } :where(html:not(.ui-legacy)) .gen-image { box-shadow: none; border-radius: 14px; } :where(html:not(.ui-legacy)) .download-btn, :where(html:not(.ui-legacy)) .mobile-sources-btn, :where(html:not(.ui-legacy)) .check-upload-btn { background: var(--c-primary); color: var(--c-on-primary); border-radius: 10px; filter: none; } :where(html:not(.ui-legacy)) .download-btn:hover, :where(html:not(.ui-legacy)) .check-upload-btn:hover { background: var(--c-primary); opacity: .88; filter: none; } :where(html:not(.ui-legacy)) .mobile-sources-btn { border-radius: 999px; box-shadow: var(--shadow-lg); } /* ---------------------------------------------------------------- стартовый экран */ :where(html:not(.ui-legacy)) .welcome { text-align: center; padding-top: min(14vh, 120px); max-width: 600px; } :where(html:not(.ui-legacy)) .welcome-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(26px, 3.4vw, 34px); letter-spacing: -.015em; line-height: 1.2; margin-bottom: 12px; } :where(html:not(.ui-legacy)) .welcome-sub { color: var(--c-muted); font-size: 15.5px; margin: 0 auto 28px; max-width: 46ch; } :where(html:not(.ui-legacy)) .welcome-examples { align-items: center; } :where(html:not(.ui-legacy)) .welcome-example { background: transparent; border: 1px solid var(--c-border); border-radius: 12px; color: var(--c-text); text-align: left; } :where(html:not(.ui-legacy)) .welcome-example:hover { background: var(--c-hover); border-color: var(--c-border); } /* ---------------------------------------------------------------- поле ввода */ :where(html:not(.ui-legacy)) .input-area { background: var(--c-bg); border-top: none; padding-top: 6px; } :where(html:not(.ui-legacy)) .input-area > .input-wrap { align-items: flex-end; gap: 4px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 22px; padding: 6px; box-shadow: var(--shadow-composer); transition: border-color .15s ease, box-shadow .15s ease; } :where(html:not(.ui-legacy)) .input-area > .input-wrap:focus-within { border-color: color-mix(in srgb, var(--c-text) 22%, var(--c-border)); } :where(html:not(.ui-legacy)) .input-box, :where(html:not(.ui-legacy)) .input-box:focus { background: transparent; border: none; box-shadow: none; padding: 9px 8px; font-size: 15.5px; line-height: 1.5; font-family: var(--font-sans); } :where(html:not(.ui-legacy)) .input-box::placeholder { color: var(--c-faint); } :where(html:not(.ui-legacy)) .attach-btn { width: 38px; height: 38px; border-radius: 50%; background: transparent; border: none; color: var(--c-muted); } :where(html:not(.ui-legacy)) .attach-btn:hover { background: var(--c-hover); color: var(--c-text); border: none; } /* Кнопка отправки — круглая, стрелка нарисована маской (символ «↑» в разметке скрыт нулевым кеглем, чтобы не трогать JS, который его подставляет) */ :where(html:not(.ui-legacy)) .send-btn { width: 38px; height: 38px; padding: 0; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--c-primary); color: var(--c-on-primary); font-size: 0; line-height: 0; transition: opacity .15s ease, transform .1s ease, background .15s ease; } :where(html:not(.ui-legacy)) .send-btn:not(.streaming)::before { content: ''; width: 18px; height: 18px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5M5.8 11.7 12 5.5l6.2 6.2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 19V5.5M5.8 11.7 12 5.5l6.2 6.2'/%3E%3C/svg%3E") center / contain no-repeat; } :where(html:not(.ui-legacy)) .send-btn:hover { background: var(--c-primary); opacity: .86; } :where(html:not(.ui-legacy)) .send-btn:active { transform: scale(.94); } :where(html:not(.ui-legacy)) .send-btn:disabled { background: var(--c-hover-2); color: var(--c-faint); opacity: 1; } :where(html:not(.ui-legacy)) .send-btn.streaming { background: var(--c-primary); } :where(html:not(.ui-legacy)) .send-btn.streaming:hover { background: var(--c-primary); opacity: .86; } :where(html:not(.ui-legacy)) .send-btn .stop-square { background: var(--c-on-primary); width: 11px; height: 11px; border-radius: 2.5px; } /* Специальность / модель слева от поля — тихие «таблетки» */ :where(html:not(.ui-legacy)) .input-area > .context-bar { padding-bottom: 8px; } :where(html:not(.ui-legacy)) .input-area > .context-bar label { text-transform: none; letter-spacing: 0; font-size: 12.5px; color: var(--c-faint); } :where(html:not(.ui-legacy)) .input-area > .context-bar select, :where(html:not(.ui-legacy)) .input-area > .context-bar .btn-sm { background: transparent; color: var(--c-text); border: 1px solid var(--c-border); border-radius: 999px; font-size: 13px; padding: 5px 10px; height: 32px; } :where(html:not(.ui-legacy)) .input-area > .context-bar select:hover, :where(html:not(.ui-legacy)) .input-area > .context-bar .btn-sm:hover { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border); } :where(html:not(.ui-legacy)) .attach-chip { background: var(--c-surface); border-color: var(--c-border); border-radius: 10px; } :where(html:not(.ui-legacy)) .check-upload-hint { color: var(--c-faint); } /* ---------------------------------------------------------------- источники */ :where(html:not(.ui-legacy)) .sources-panel { background: var(--c-sidebar); border-left: 1px solid var(--c-border-soft); } :where(html:not(.ui-legacy)) .sources-header { border-bottom: none; text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 600; color: var(--c-text); padding: 16px 16px 8px; } :where(html:not(.ui-legacy)) .source-card { background: var(--c-surface); border: 1px solid var(--c-border-soft); border-radius: 12px; padding: 14px; } :where(html:not(.ui-legacy)) .source-card:hover, :where(html:not(.ui-legacy)) .source-card.active { border-color: var(--c-border); box-shadow: 0 0 0 3px var(--c-accent-soft); } :where(html:not(.ui-legacy)) .source-num { background: var(--c-hover-2); color: var(--c-muted); border-radius: 999px; font-family: var(--font-sans); font-weight: 600; padding: 1px 7px; } :where(html:not(.ui-legacy)) .source-title { font-size: 13.5px; } :where(html:not(.ui-legacy)) .source-page { font-family: var(--font-sans); color: var(--c-faint); } :where(html:not(.ui-legacy)) .source-quote { font-size: 13.5px; line-height: 1.6; color: var(--c-muted); } :where(html:not(.ui-legacy)) .source-page-img { border-radius: 8px; border-color: var(--c-border-soft); } /* ---------------------------------------------------------------- вход, регистрация, специальность */ :where(html:not(.ui-legacy)) .auth-wrap, :where(html:not(.ui-legacy)) .specialty-wrap { background: var(--c-bg); } :where(html:not(.ui-legacy)) .auth-card, :where(html:not(.ui-legacy)) .specialty-card { background: transparent; box-shadow: none; border-radius: 0; max-width: 380px; padding: 0; } :where(html:not(.ui-legacy)) .specialty-card { max-width: 460px; } :where(html:not(.ui-legacy)) .auth-logo { font-size: 34px; font-weight: 500; text-align: center; margin-bottom: 8px; letter-spacing: -.02em; } :where(html:not(.ui-legacy)) .auth-subtitle { text-align: center; font-size: 15px; color: var(--c-muted); margin-bottom: 32px; line-height: 1.5; } :where(html:not(.ui-legacy)) .form-group { margin-bottom: 14px; } :where(html:not(.ui-legacy)) .form-label { font-size: 13.5px; font-weight: 500; color: var(--c-text); margin-bottom: 6px; } :where(html:not(.ui-legacy)) .form-input { background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 12px; padding: 11px 14px; font-size: 15px; font-family: var(--font-sans); transition: border-color .15s ease, box-shadow .15s ease; } :where(html:not(.ui-legacy)) .form-input::placeholder { color: var(--c-faint); } :where(html:not(.ui-legacy)) .form-input:focus { border-color: var(--c-accent); box-shadow: 0 0 0 3px var(--c-accent-soft); } :where(html:not(.ui-legacy)) .btn-primary { background: var(--c-primary); color: var(--c-on-primary); border-radius: 12px; padding: 12px 16px; font-size: 15px; font-weight: 500; margin-top: 10px; transition: opacity .15s ease, transform .1s ease; } :where(html:not(.ui-legacy)) .btn-primary:hover { background: var(--c-primary); opacity: .88; } :where(html:not(.ui-legacy)) .btn-primary:active { transform: scale(.99); } :where(html:not(.ui-legacy)) .btn-primary:disabled { background: var(--c-hover-2); color: var(--c-faint); opacity: 1; } :where(html:not(.ui-legacy)) .auth-link { font-size: 14px; color: var(--c-muted); margin-top: 18px; } :where(html:not(.ui-legacy)) .auth-link a { color: var(--c-text); font-weight: 500; text-decoration: underline; text-decoration-color: var(--c-border); text-underline-offset: 3px; } :where(html:not(.ui-legacy)) .auth-link a:hover { text-decoration-color: currentColor; } :where(html:not(.ui-legacy)) .auth-link-hb { border-top: 1px solid var(--c-border-soft); margin-top: 28px; padding-top: 18px; } :where(html:not(.ui-legacy)) .alert { border-radius: 12px; font-size: 14px; } :where(html:not(.ui-legacy)) .alert.error { border-color: color-mix(in srgb, var(--c-danger) 25%, transparent); } :where(html:not(.ui-legacy)) .alert.success { border-color: color-mix(in srgb, var(--c-ok) 25%, transparent); } :where(html:not(.ui-legacy)) .alert.info { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border); } :where(html:not(.ui-legacy)) .specialty-grid { gap: 8px; } :where(html:not(.ui-legacy)) .spec-btn { border: 1px solid var(--c-border); border-radius: 12px; background: var(--c-surface); font-size: 14px; padding: 13px 12px; } :where(html:not(.ui-legacy)) .spec-btn:hover { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border); } :where(html:not(.ui-legacy)) .spec-btn.active { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); } /* ---------------------------------------------------------------- справочник */ :where(html:not(.ui-legacy)) #app.hb-app { background: var(--c-bg); } :where(html:not(.ui-legacy)) .hb-app .header { background: color-mix(in srgb, var(--c-bg) 86%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(12px); backdrop-filter: saturate(1.4) blur(12px); } :where(html:not(.ui-legacy)) .hb-tab { color: var(--c-muted); border-radius: 10px; font-size: 14.5px; padding: 6px 12px; } :where(html:not(.ui-legacy)) .hb-tab:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .hb-tab.active { background: var(--c-hover-2); color: var(--c-text); font-weight: 500; } :where(html:not(.ui-legacy)) .hb-lock { color: var(--c-faint); border: 1px solid var(--c-border); font-size: 11px; } :where(html:not(.ui-legacy)) .hb-main { max-width: 820px; padding-top: 40px; } :where(html:not(.ui-legacy)) .hb-search { gap: 6px; margin-bottom: 28px; padding: 6px; background: var(--c-surface); border: 1px solid var(--c-border); border-radius: 18px; box-shadow: var(--shadow-composer); transition: border-color .15s ease; } :where(html:not(.ui-legacy)) .hb-search:focus-within { border-color: color-mix(in srgb, var(--c-text) 22%, var(--c-border)); } :where(html:not(.ui-legacy)) .hb-search-input, :where(html:not(.ui-legacy)) .hb-search-input:focus { background: transparent; border: none; box-shadow: none; border-radius: 12px; padding: 10px 12px; font-size: 16px; } :where(html:not(.ui-legacy)) .hb-search-input::placeholder { color: var(--c-faint); } :where(html:not(.ui-legacy)) .hb-search-btn { margin-top: 0; border-radius: 13px; padding: 9px 20px; } :where(html:not(.ui-legacy)) .hb-search .btn-sm { border-radius: 13px; } /* Разделы — список с разделителями вместо сетки одинаковых плиток */ :where(html:not(.ui-legacy)) .hb-cards { display: flex; flex-direction: column; gap: 0; margin-top: 0; border-top: 1px solid var(--c-border-soft); } :where(html:not(.ui-legacy)) .hb-card { flex-direction: row; align-items: center; gap: 14px; padding: 15px 10px; margin: 0 -10px; background: transparent; border: none; border-bottom: 1px solid var(--c-border-soft); border-radius: 0; box-shadow: none; animation: none; transition: background .15s ease; } :where(html:not(.ui-legacy)) .hb-card:hover { background: var(--c-hover); transform: none; box-shadow: none; border-color: var(--c-border-soft); } :where(html:not(.ui-legacy)) .hb-card:active { transform: none; } :where(html:not(.ui-legacy)) .hb-card-icon { width: 22px; height: 22px; background: transparent; color: var(--c-muted); border-radius: 0; margin: 0; flex: none; } :where(html:not(.ui-legacy)) .hb-card-icon svg { width: 21px; height: 21px; stroke-width: 1.6; } :where(html:not(.ui-legacy)) .hb-card-title { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; letter-spacing: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } :where(html:not(.ui-legacy)) .hb-card-count { flex: none; font-size: 13.5px; font-weight: 400; color: var(--c-faint); font-variant-numeric: tabular-nums; } :where(html:not(.ui-legacy)) .hb-card .hb-tools { margin-top: 0; } :where(html:not(.ui-legacy)) .hb-h1 { font-family: var(--font-serif); font-weight: 500; font-size: 28px; letter-spacing: -.015em; } :where(html:not(.ui-legacy)) .hb-back, :where(html:not(.ui-legacy)) .hb-crumbs a { color: var(--c-muted); } :where(html:not(.ui-legacy)) .hb-back:hover, :where(html:not(.ui-legacy)) .hb-crumbs a:hover { color: var(--c-text); } :where(html:not(.ui-legacy)) .hb-intro, :where(html:not(.ui-legacy)) .hb-found { color: var(--c-muted); } :where(html:not(.ui-legacy)) .hb-letter { color: var(--c-faint); font-family: var(--font-serif); font-weight: 500; } :where(html:not(.ui-legacy)) .hb-file { border-bottom-color: var(--c-border-soft); } :where(html:not(.ui-legacy)) .hb-file-name:hover { color: var(--c-text); text-decoration-color: var(--c-border); text-underline-offset: 3px; } :where(html:not(.ui-legacy)) .hb-file-meta { color: var(--c-faint); } :where(html:not(.ui-legacy)) .hb-file-dl { border: none; border-radius: 9px; color: var(--c-muted); } :where(html:not(.ui-legacy)) .hb-file-dl:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .hb-hit { border-bottom-color: var(--c-border-soft); } :where(html:not(.ui-legacy)) .hb-hit-title:hover { color: var(--c-text); text-underline-offset: 3px; } :where(html:not(.ui-legacy)) .hb-hit-snippet { color: var(--c-muted); font-size: 15px; } :where(html:not(.ui-legacy)) .hb-hit-snippet mark { background: var(--c-amber-bg); color: var(--c-text); } :where(html:not(.ui-legacy)) .hb-note, :where(html:not(.ui-legacy)) .hb-editbar { border-radius: 12px; border-color: color-mix(in srgb, var(--c-amber) 30%, transparent); } :where(html:not(.ui-legacy)) .hb-tool { border-radius: 8px; border-color: var(--c-border); } :where(html:not(.ui-legacy)) .hb-upload { border-radius: 12px; } :where(html:not(.ui-legacy)) .hb-viewer-close, :where(html:not(.ui-legacy)) .page-lightbox-close { color: #1f1f1d; } :where(html:not(.ui-legacy)) .hb-viewer-retry { background: rgba(28, 28, 27, .94); } :where(html:not(.ui-legacy)) .hb-viewer-retry button { background: #ecebe7; color: #1c1c1b; } /* ---------------------------------------------------------------- проверка эпикризов */ :where(html:not(.ui-legacy)) .check-title { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: -.015em; } :where(html:not(.ui-legacy)) .check-report-head { font-family: var(--font-serif); font-weight: 500; font-size: 20px; } :where(html:not(.ui-legacy)) .summary-chip { font-size: 13px; } :where(html:not(.ui-legacy)) .diagnosis-name { background: var(--c-hover-2); color: var(--c-text); border-radius: 12px 12px 0 0; } :where(html:not(.ui-legacy)) .diag-kind { background: var(--c-surface); } :where(html:not(.ui-legacy)) .criterion-row { border-color: var(--c-border-soft); } :where(html:not(.ui-legacy)) .criterion-row:last-child { border-radius: 0 0 12px 12px; } /* Цвет статуса — значком и подписью, без цветной полосы по краю */ :where(html:not(.ui-legacy)) .check-item { border: 1px solid var(--c-border-soft); border-radius: 12px; background: var(--c-surface); } :where(html:not(.ui-legacy)) .check-item.non_compliant, :where(html:not(.ui-legacy)) .check-item.compliant, :where(html:not(.ui-legacy)) .check-item.needs_review { border-left: 1px solid var(--c-border-soft); } :where(html:not(.ui-legacy)) .check-group-title { border-bottom-color: var(--c-border-soft); } :where(html:not(.ui-legacy)) .check-empty, :where(html:not(.ui-legacy)) .check-nokr-hint { border-radius: 10px; } :where(html:not(.ui-legacy)) .status-badge.needs_review, :where(html:not(.ui-legacy)) .check-group-title.needs_review, :where(html:not(.ui-legacy)) .check-item.needs_review .check-item-status { color: var(--c-accent); } :where(html:not(.ui-legacy)) .status-badge.needs_review { background: var(--c-accent-soft); } :where(html:not(.ui-legacy)) .checks-history-overlay { background: rgba(20, 20, 19, .45); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); } :where(html:not(.ui-legacy)) .checks-history-modal { background: var(--c-surface); border-radius: 18px; box-shadow: var(--shadow-lg); } :where(html:not(.ui-legacy)) .checks-history-head { border-bottom-color: var(--c-border-soft); font-weight: 600; } :where(html:not(.ui-legacy)) .checks-history-item.clickable:hover { background: var(--c-hover); border-color: transparent; } /* ---------------------------------------------------------------- помощь */ :where(html:not(.ui-legacy)) .help-wrap { padding-top: 40px; } :where(html:not(.ui-legacy)) .help-title { font-family: var(--font-serif); font-weight: 500; font-size: 30px; letter-spacing: -.015em; } :where(html:not(.ui-legacy)) .faq-item { background: transparent; border: none; border-bottom: 1px solid var(--c-border-soft); border-radius: 0; margin: 0; } :where(html:not(.ui-legacy)) .faq-q { padding: 16px 2px; font-size: 15.5px; } :where(html:not(.ui-legacy)) .faq-a { padding: 0 2px; font-size: 15px; } :where(html:not(.ui-legacy)) .faq-item.open .faq-a { padding: 0 2px 16px; } :where(html:not(.ui-legacy)) .ios-step::before { background: var(--c-hover-2); color: var(--c-text); } /* ---------------------------------------------------------------- админка */ :where(html:not(.ui-legacy)) .admin-nav { background: var(--c-sidebar); color: var(--c-text); border-right: 1px solid var(--c-border-soft); /* Отступ под часы/«чёлку» iPhone обязателен: у админки нет обычной шапки, и без него кнопки меню уходили под строку состояния — нажать их было нельзя. */ padding: calc(8px + env(safe-area-inset-top, 0px)) 0 8px; } /* Контейнер разделов на компьютере не участвует в раскладке — кнопки идут столбцом, как раньше. На телефоне он становится прокручиваемой полосой. */ .admin-nav-sections { display: contents; } /* Стрелка и надпись «Назад к чату» — отдельными элементами (на телефоне надпись сворачивается); на компьютере между ними обычный пробел. */ .admin-back-text { margin-left: 6px; } :where(html:not(.ui-legacy)) .admin-nav-logo { border-bottom: none; font-size: 20px; padding: 14px 18px 16px; } :where(html:not(.ui-legacy)) .admin-nav-item { width: auto; margin: 0 8px 1px; padding: 8px 10px; border: none; border-radius: 9px; color: var(--c-muted); font-size: 14px; } :where(html:not(.ui-legacy)) .admin-nav-item:hover { background: var(--c-hover); color: var(--c-text); } :where(html:not(.ui-legacy)) .admin-nav-item.active { background: var(--c-hover-2); color: var(--c-text); font-weight: 500; border: none; } :where(html:not(.ui-legacy)) .admin-content { background: var(--c-bg); padding: 32px 36px; } :where(html:not(.ui-legacy)) .admin-title { font-family: var(--font-serif); font-weight: 500; font-size: 26px; letter-spacing: -.015em; } :where(html:not(.ui-legacy)) .table { background: var(--c-surface); box-shadow: none; border: 1px solid var(--c-border-soft); border-radius: 14px; border-collapse: separate; border-spacing: 0; } :where(html:not(.ui-legacy)) .table th { background: transparent; text-transform: none; letter-spacing: 0; font-size: 12.5px; font-weight: 500; color: var(--c-faint); border-bottom: 1px solid var(--c-border-soft); } :where(html:not(.ui-legacy)) .table td { font-size: 14px; border-bottom: 1px solid var(--c-border-soft); } :where(html:not(.ui-legacy)) .table tr:hover td { background: var(--c-hover); } :where(html:not(.ui-legacy)) .badge { border-radius: 999px; font-weight: 500; padding: 2px 9px; } :where(html:not(.ui-legacy)) .badge.admin { background: var(--c-hover-2); color: var(--c-text); } :where(html:not(.ui-legacy)) .btn-sm { border-radius: 8px; border-color: var(--c-border); background: var(--c-surface); font-size: 13px; padding: 5px 11px; transition: background .15s ease, border-color .15s ease, color .15s ease; } :where(html:not(.ui-legacy)) .btn-sm:hover { background: var(--c-hover); color: var(--c-text); border-color: var(--c-border); } :where(html:not(.ui-legacy)) .btn-sm.danger:hover { color: var(--c-danger); border-color: color-mix(in srgb, var(--c-danger) 40%, transparent); background: var(--c-danger-bg); } :where(html:not(.ui-legacy)) .btn-sm.primary { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); } :where(html:not(.ui-legacy)) .btn-sm.primary:hover { background: var(--c-primary); opacity: .86; } :where(html:not(.ui-legacy)) .stat-card { background: var(--c-surface); box-shadow: none; border: 1px solid var(--c-border-soft); border-radius: 14px; padding: 18px; } :where(html:not(.ui-legacy)) .stat-val { color: var(--c-text); font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; } :where(html:not(.ui-legacy)) .stat-label { color: var(--c-faint); font-size: 13px; } :where(html:not(.ui-legacy)) .upload-zone { border: 1.5px dashed var(--c-border); border-radius: 16px; } :where(html:not(.ui-legacy)) .upload-zone:hover, :where(html:not(.ui-legacy)) .upload-zone.drag { background: var(--c-hover); border-color: var(--c-faint); color: var(--c-text); } :where(html:not(.ui-legacy)) .upload-settings .input { border-radius: 10px; } :where(html:not(.ui-legacy)) .upload-queue-row { border-color: var(--c-border-soft); border-radius: 10px; } /* ---------------------------------------------------------------- телефон */ @media (max-width: 768px) { :where(html:not(.ui-legacy)) .header { border-bottom: none; } :where(html:not(.ui-legacy)) .sidebar { padding-top: 4px; } :where(html:not(.ui-legacy)) .message.assistant .bubble { font-size: 16px; } :where(html:not(.ui-legacy)) .message.user .bubble { max-width: 88%; } :where(html:not(.ui-legacy)) .welcome { padding-top: 9vh; } :where(html:not(.ui-legacy)) .input-area { padding: 4px 10px calc(10px + env(safe-area-inset-bottom, 0px)); } :where(html:not(.ui-legacy)) .input-area > .context-bar { padding: 0 2px 6px; } :where(html:not(.ui-legacy)) #adminBack { background: var(--c-sidebar); color: var(--c-text); } :where(html:not(.ui-legacy)) .admin-content { padding: 16px; } } /* Админка на телефоне: меню разделов всегда на экране. Прокручивается только содержимое; сама страница не двигается, поэтому меню не может «уехать» наверх — ни при прокрутке длинной таблицы, ни при упругом оттягивании в Safari. Сверху — отступ под часы и «чёлку». */ @media (max-width: 860px) { :where(html:not(.ui-legacy)) .admin-layout { height: 100vh; height: 100dvh; overflow: hidden; } :where(html:not(.ui-legacy)) .admin-nav { position: sticky; top: 0; z-index: 30; flex: none; padding: calc(8px + env(safe-area-inset-top, 0px)) calc(10px + env(safe-area-inset-right, 0px)) 8px calc(10px + env(safe-area-inset-left, 0px)); border-right: none; border-bottom: 1px solid var(--c-border-soft); scrollbar-width: none; } :where(html:not(.ui-legacy)) .admin-nav::-webkit-scrollbar { display: none; } :where(html:not(.ui-legacy)) .admin-nav-item { margin: 0; flex: none; } /* Одна строка: слева «Назад к чату», справа листаемая вбок полоса разделов. Полоса — отдельный блок, поэтому разделы никогда не заходят под кнопку. Как только полосу сдвинули, app.js ставит кнопке класс .collapsed — надпись плавно сворачивается до стрелки «←»; вернули полосу в начало — кнопка снова полная. */ :where(html:not(.ui-legacy)) .admin-nav { flex-wrap: nowrap; overflow: hidden; align-items: center; gap: 6px; } :where(html:not(.ui-legacy)) #adminBack { order: -1; position: static; flex: none; display: inline-flex; align-items: center; gap: 0; background: var(--c-hover); color: var(--c-text); border: none; border-radius: 999px; padding: 6px 12px; font-size: 13.5px; white-space: nowrap; transition: padding .22s ease; } :where(html:not(.ui-legacy)) #adminBack .admin-back-arrow { font-size: 15px; line-height: 1; } :where(html:not(.ui-legacy)) #adminBack .admin-back-text { display: inline-block; overflow: hidden; vertical-align: middle; max-width: 120px; margin-left: 6px; opacity: 1; transition: max-width .22s ease, margin-left .22s ease, opacity .15s ease; } :where(html:not(.ui-legacy)) #adminBack.collapsed { padding: 6px 11px; } :where(html:not(.ui-legacy)) #adminBack.collapsed .admin-back-text { max-width: 0; margin-left: 0; opacity: 0; } :where(html:not(.ui-legacy)) .admin-nav-sections { display: flex; flex: 1 1 auto; min-width: 0; flex-wrap: nowrap; gap: 4px; overflow-x: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 0 18px 0 0; /* затухание только у правого края — намёк, что дальше есть ещё разделы */ -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); mask-image: linear-gradient(90deg, #000 calc(100% - 22px), transparent 100%); } :where(html:not(.ui-legacy)) .admin-nav-sections::-webkit-scrollbar { display: none; } :where(html:not(.ui-legacy)) .admin-nav-sections .admin-nav-item { padding: 6px 10px; font-size: 13.5px; border: 1px solid var(--c-border-soft); border-radius: 999px; } :where(html:not(.ui-legacy)) .admin-nav-sections .admin-nav-item.active { background: var(--c-primary); color: var(--c-on-primary); border-color: var(--c-primary); } :where(html:not(.ui-legacy)) .admin-content { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding-bottom: calc(16px + env(safe-area-inset-bottom, 0px)); } } @media (max-width: 640px) { :where(html:not(.ui-legacy)) .hb-main { padding-top: 20px; } :where(html:not(.ui-legacy)) .hb-search { flex-wrap: nowrap; } :where(html:not(.ui-legacy)) .hb-search-btn { flex: none; padding: 9px 14px; } :where(html:not(.ui-legacy)) .hb-card { padding: 14px 8px; margin: 0 -8px; } } @media (max-width: 600px) { :where(html:not(.ui-legacy)) .hb-card { gap: 12px; border-radius: 0; } :where(html:not(.ui-legacy)) .hb-card-title { font-size: 15.5px; } } @media (prefers-reduced-motion: reduce) { :where(html:not(.ui-legacy)) * { transition-duration: .01ms !important; animation-duration: .01ms !important; } }