/* Четыре именованные темы -- classic-light/classic-dark (исходная тёплая палитра в духе anthropic.com, без изменений) и neon-light/neon-dark (киберпанк-скин редизайна, тот же макет). Тема выбирается кнопкой в сайдбаре (frontend/shared.js, mountThemeSwitcher) и хранится в localStorage; без явного выбора работает "авто" -- светлый/тёмный вариант ТЕКУЩЕГО стиля переключается по времени суток (см. themeIsDay в shared.js). Инлайн-скрипт в каждой страницы выставляет [data-theme] синхронно до отрисовки -- иначе между CSS по умолчанию и применением сохранённой темы виден "мигающий" неверный цвет. Компоненты ниже ссылаются только на переменные, а не на голые цвета. */ :root { --font-sans: -apple-system, "Segoe UI", Arial, sans-serif; --font-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace; /* запасной вариант на случай, если инлайн-скрипт не отработал -- совпадает с classic-light (исходная тема, см. блок ниже) */ --bg: #f7f3ec; --bg-card: #fffdf9; --sidebar-bg: #efe6d6; --border: #e5dccc; --border-strong: #d8cbb4; --text: #2b241c; --text-muted: #786e5e; --accent: #c96442; --accent-hover: #b35636; --accent-contrast: #fffdf9; --accent-soft: rgba(201, 100, 66, 0.12); --accent-glow: transparent; --accent2: var(--accent); --accent2-soft: var(--accent-soft); --secondary-btn: #8a8175; --secondary-btn-hover: #766e63; --danger: #b3432f; --danger-hover: #99392a; --error-bg: #fbe6df; --error-border: #c9614a; --error-text: #8a3221; --success-bg: #e3ecdb; --success-text: #3f5f2f; --warning-bg: #f7ecd3; --warning-text: #7a5417; --danger-soft-bg: #f6e0da; --danger-soft-text: #8a3221; --chat-user-bg: #ecdcc9; --chat-assistant-bg: #f1ece1; --citation-bg: #f9f4ea; --citation-border: var(--accent); --citation-unverified-bg: #fbeae5; --citation-unverified-border: var(--danger); --citation-paraphrase-bg: #f7ecd3; --citation-paraphrase-border: #b98a2e; --grid-line: transparent; --shadow-sm: 0 1px 2px rgba(43, 36, 28, 0.06); --shadow-md: 0 6px 20px rgba(43, 36, 28, 0.08); } @media (prefers-color-scheme: dark) { :root { --bg: #1e1a15; --bg-card: #29241d; --sidebar-bg: #17130f; --border: #3d362b; --border-strong: #4a4235; --text: #ece4d6; --text-muted: #a89b85; --accent: #e08a63; --accent-hover: #ec9c78; --accent-contrast: #1e1a15; --accent-soft: rgba(224, 138, 99, 0.14); --secondary-btn: #6b6355; --secondary-btn-hover: #7d7465; --danger: #d47a63; --danger-hover: #e08a73; --error-bg: #3a241c; --error-border: #d47a63; --error-text: #f2c3b2; --success-bg: #2c3624; --success-text: #b9d1a4; --warning-bg: #3a3020; --warning-text: #e3c583; --danger-soft-bg: #3a241c; --danger-soft-text: #f2c3b2; --chat-user-bg: #423527; --chat-assistant-bg: #322c23; --citation-bg: #29241d; --citation-unverified-bg: #3a241c; --citation-paraphrase-bg: #3a3020; --citation-paraphrase-border: #d9ad5c; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); } } /* classic-light -- совпадает с запасным вариантом выше, отдельный блок нужен, чтобы явный выбор темы в переключателе и режим "авто" работали через один и тот же атрибут [data-theme], а не полагались на системную настройку. */ :root[data-theme="classic-light"] { --bg: #f7f3ec; --bg-card: #fffdf9; --sidebar-bg: #efe6d6; --border: #e5dccc; --border-strong: #d8cbb4; --text: #2b241c; --text-muted: #786e5e; --accent: #c96442; --accent-hover: #b35636; --accent-contrast: #fffdf9; --accent-soft: rgba(201, 100, 66, 0.12); --accent-glow: transparent; --accent2: var(--accent); --accent2-soft: var(--accent-soft); --secondary-btn: #8a8175; --secondary-btn-hover: #766e63; --danger: #b3432f; --danger-hover: #99392a; --error-bg: #fbe6df; --error-border: #c9614a; --error-text: #8a3221; --success-bg: #e3ecdb; --success-text: #3f5f2f; --warning-bg: #f7ecd3; --warning-text: #7a5417; --danger-soft-bg: #f6e0da; --danger-soft-text: #8a3221; --chat-user-bg: #ecdcc9; --chat-assistant-bg: #f1ece1; --citation-bg: #f9f4ea; --citation-border: var(--accent); --citation-unverified-bg: #fbeae5; --citation-unverified-border: var(--danger); --citation-paraphrase-bg: #f7ecd3; --citation-paraphrase-border: #b98a2e; --grid-line: transparent; --shadow-sm: 0 1px 2px rgba(43, 36, 28, 0.06); --shadow-md: 0 6px 20px rgba(43, 36, 28, 0.08); } /* classic-dark -- исходный тёмный вариант (был раньше под prefers-color-scheme), без изменений. */ :root[data-theme="classic-dark"] { --bg: #1e1a15; --bg-card: #29241d; --sidebar-bg: #17130f; --border: #3d362b; --border-strong: #4a4235; --text: #ece4d6; --text-muted: #a89b85; --accent: #e08a63; --accent-hover: #ec9c78; --accent-contrast: #1e1a15; --accent-soft: rgba(224, 138, 99, 0.14); --accent-glow: transparent; --accent2: var(--accent); --accent2-soft: var(--accent-soft); --secondary-btn: #6b6355; --secondary-btn-hover: #7d7465; --danger: #d47a63; --danger-hover: #e08a73; --error-bg: #3a241c; --error-border: #d47a63; --error-text: #f2c3b2; --success-bg: #2c3624; --success-text: #b9d1a4; --warning-bg: #3a3020; --warning-text: #e3c583; --danger-soft-bg: #3a241c; --danger-soft-text: #f2c3b2; --chat-user-bg: #423527; --chat-assistant-bg: #322c23; --citation-bg: #29241d; --citation-border: var(--accent); --citation-unverified-bg: #3a241c; --citation-unverified-border: var(--danger); --citation-paraphrase-bg: #3a3020; --citation-paraphrase-border: #d9ad5c; --grid-line: transparent; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); } /* neon-light / neon-dark -- киберпанк-скин редизайна: холодная гамма, неоновый акцент (циан) + вторичный (маджента, только на бейдже "3000" и в переключателе тем), лёгкое свечение через --accent-glow. */ :root[data-theme="neon-light"] { --bg: #eef1f7; --bg-card: #ffffff; --sidebar-bg: #e2e7f0; --border: #d7dce6; --border-strong: #b9c1d1; --text: #10121a; --text-muted: #5b6478; --accent: #0891a8; --accent-hover: #0a7690; --accent-contrast: #ffffff; --accent-soft: rgba(8, 145, 168, 0.10); --accent-glow: rgba(8, 145, 168, 0.35); --accent2: #c81e93; --accent2-soft: rgba(200, 30, 147, 0.12); --secondary-btn: #5b6478; --secondary-btn-hover: #454d5e; --danger: #c8324a; --danger-hover: #a82740; --error-bg: #fbe1e1; --error-border: #c8324a; --error-text: #8a1f30; --success-bg: #dff3e6; --success-text: #1f7a45; --warning-bg: #fbeecb; --warning-text: #8a5a06; --danger-soft-bg: #fbe1e1; --danger-soft-text: #a3262a; --chat-user-bg: rgba(8, 145, 168, 0.08); --chat-assistant-bg: #f3f5f9; --citation-bg: #f3f5f9; --citation-border: var(--accent); --citation-unverified-bg: #fbe1e1; --citation-unverified-border: var(--danger); --citation-paraphrase-bg: #fbeecb; --citation-paraphrase-border: #a3720a; --grid-line: rgba(20, 30, 60, 0.05); --shadow-sm: 0 1px 2px rgba(16, 18, 26, 0.08); --shadow-md: 0 6px 20px rgba(16, 18, 26, 0.08); } :root[data-theme="neon-dark"] { --bg: #090b11; --bg-card: #12151f; --sidebar-bg: #05060a; --border: #232a3d; --border-strong: #323b54; --text: #e8ecf5; --text-muted: #838da6; --accent: #2de2ff; --accent-hover: #7aeeff; --accent-contrast: #031217; --accent-soft: rgba(45, 226, 255, 0.10); --accent-glow: rgba(45, 226, 255, 0.55); --accent2: #ff3ec8; --accent2-soft: rgba(255, 62, 200, 0.14); --secondary-btn: #46506b; --secondary-btn-hover: #576280; --danger: #ff5c5c; --danger-hover: #ff7a7a; --error-bg: rgba(255, 90, 90, 0.12); --error-border: #ff5c5c; --error-text: #ff8080; --success-bg: rgba(70, 220, 140, 0.12); --success-text: #6df2a0; --warning-bg: rgba(255, 204, 102, 0.12); --warning-text: #ffcc66; --danger-soft-bg: rgba(255, 90, 90, 0.12); --danger-soft-text: #ff8080; --chat-user-bg: rgba(45, 226, 255, 0.10); --chat-assistant-bg: #171b28; --citation-bg: #171b28; --citation-border: var(--accent); --citation-unverified-bg: rgba(255, 90, 90, 0.12); --citation-unverified-border: var(--danger); --citation-paraphrase-bg: rgba(255, 204, 102, 0.12); --citation-paraphrase-border: #ffcc66; --grid-line: rgba(45, 226, 255, 0.05); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.4); --shadow-md: 0 8px 28px rgba(0, 0, 0, 0.5); } /* corporate-light / corporate-dark -- фирменный стиль ОКБ №1 (по мотивам presentation.pdf больницы): глубокий красный + тёмно-синий, белый/светлый холст, без неонового свечения и техно-сетки -- сдержанный официальный медицинский вид. accent = красный (кнопки, активные состояния), accent2 = синий (плашки-заголовки, бейдж "3000", лента внизу сайдбара -- см. [data-theme^="corporate"] правила в конце файла). */ :root[data-theme="corporate-light"] { --bg: #eef1f5; --bg-card: #ffffff; --sidebar-bg: #e3e9f1; --border: #dbe1ea; --border-strong: #c1cad8; --text: #16233a; --text-muted: #5b6a80; --accent: #b3202e; --accent-hover: #94192a; --accent-contrast: #ffffff; --accent-soft: rgba(179, 32, 46, 0.10); --accent-glow: transparent; --accent2: #2569a8; --accent2-soft: rgba(37, 105, 168, 0.12); --secondary-btn: #5b6a80; --secondary-btn-hover: #46536a; --danger: #b3202e; --danger-hover: #94192a; --error-bg: #fbe4e6; --error-border: #b3202e; --error-text: #7a1620; --success-bg: #e1f0e6; --success-text: #1f6b3a; --warning-bg: #fdf0d8; --warning-text: #8a5a06; --danger-soft-bg: #fbe4e6; --danger-soft-text: #7a1620; --chat-user-bg: rgba(37, 105, 168, 0.08); --chat-assistant-bg: #f1f4f8; --citation-bg: #f1f4f8; --citation-border: var(--accent2); --citation-unverified-bg: #fbe4e6; --citation-unverified-border: var(--danger); --citation-paraphrase-bg: #fdf0d8; --citation-paraphrase-border: #a3720a; --grid-line: transparent; --shadow-sm: 0 1px 2px rgba(20, 30, 50, 0.08); --shadow-md: 0 6px 20px rgba(20, 30, 50, 0.10); } :root[data-theme="corporate-dark"] { --bg: #0f2340; --bg-card: #16304f; --sidebar-bg: #0a1a30; --border: #24456e; --border-strong: #2f567f; --text: #eef2f7; --text-muted: #a9b8cc; --accent: #e0495a; --accent-hover: #ea6272; --accent-contrast: #ffffff; --accent-soft: rgba(224, 73, 90, 0.14); --accent-glow: transparent; --accent2: #5b9bd5; --accent2-soft: rgba(91, 155, 213, 0.16); --secondary-btn: #4a6b8f; --secondary-btn-hover: #5c80a8; --danger: #ff6b6b; --danger-hover: #ff8585; --error-bg: rgba(224, 73, 90, 0.14); --error-border: #e0495a; --error-text: #ffb3ba; --success-bg: rgba(70, 180, 120, 0.15); --success-text: #8fe0b0; --warning-bg: rgba(230, 180, 80, 0.16); --warning-text: #f0cd7a; --danger-soft-bg: rgba(224, 73, 90, 0.14); --danger-soft-text: #ffb3ba; --chat-user-bg: rgba(91, 155, 213, 0.14); --chat-assistant-bg: #1c3a5c; --citation-bg: #1c3a5c; --citation-border: var(--accent2); --citation-unverified-bg: rgba(224, 73, 90, 0.14); --citation-unverified-border: var(--danger); --citation-paraphrase-bg: rgba(230, 180, 80, 0.16); --citation-paraphrase-border: #f0cd7a; --grid-line: transparent; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } body { font-family: var(--font-sans); max-width: 900px; margin: 0 auto; padding: 24px; background: var(--bg); color: var(--text); position: relative; transition: background-color 0.2s ease, color 0.2s ease; } /* Страницы с сайдбаром (frontend/user.html) идут во всю ширину вместо центрированной колонки в 900px -- сайдбару нужна полная высота вьюпорта. */ body.has-shell { max-width: none; margin: 0; padding: 0; } /* Едва заметная сетка на фоне -- часть неонового скина (--grid-line прозрачная в classic-*, см. токены выше), в classic ничего не рисует. */ body::before { content: ""; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(var(--grid-line) 1px, transparent 1px), linear-gradient(90deg, var(--grid-line) 1px, transparent 1px); background-size: 42px 42px; } h1, h2, h3 { margin-top: 1.4em; position: relative; z-index: 1; } label { display: block; font-size: 12px; font-weight: 700; color: var(--text-muted); margin-top: 10px; } .topbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 24px; padding-bottom: 12px; border-bottom: 1px solid var(--border); position: relative; z-index: 1; } nav a { margin-right: 16px; color: var(--text-muted); text-decoration: none; font-weight: 600; } nav a.active { color: var(--accent); } button { cursor: pointer; background: var(--accent); color: var(--accent-contrast); border: none; border-radius: 8px; padding: 8px 16px; font-size: 14px; font-weight: 600; font-family: inherit; transition: background-color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease; } button:hover { background: var(--accent-hover); box-shadow: 0 0 0 1px var(--accent), 0 0 18px var(--accent-glow); } button:active { transform: translateY(1px) scale(0.99); } button.secondary { background: var(--secondary-btn); } button.secondary:hover { background: var(--secondary-btn-hover); box-shadow: none; } button.danger { background: var(--danger); } button.danger:hover { background: var(--danger-hover); box-shadow: none; } button:disabled { background: var(--border-strong); color: var(--text-muted); cursor: not-allowed; transform: none; box-shadow: none; } /* Прозрачная кнопка для сайдбара/панелей (переключатель темы, выход, сворачивание) -- визуально тише обычной и secondary. */ button.ghost { background: transparent; color: var(--text-muted); padding: 8px 10px; display: inline-flex; align-items: center; gap: 6px; box-shadow: none; } button.ghost:hover { background: var(--border); color: var(--text); box-shadow: none; } button.icon-only { padding: 8px; border-radius: 8px; } input, textarea, select { width: 100%; padding: 8px 10px; margin: 4px 0 12px 0; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 14px; font-family: inherit; background: var(--bg-card); color: var(--text); transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } textarea { min-height: 120px; } .card { background: var(--bg-card); border: 1px solid var(--border); border-radius: 10px; padding: 16px 18px; margin-bottom: 16px; box-shadow: var(--shadow-sm); position: relative; z-index: 1; transition: box-shadow 0.2s ease, border-color 0.2s ease; } .error-box { background: var(--error-bg); border: 1px solid var(--error-border); color: var(--error-text); padding: 10px; border-radius: 4px; margin-bottom: 12px; } .pii-candidate { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .pii-candidate input[type="checkbox"] { width: auto; margin: 0; } .pii-type { font-weight: 600; color: var(--accent); min-width: 130px; } .chat-message { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; max-width: 85%; } .chat-message.user { background: var(--chat-user-bg); margin-left: auto; } .chat-message.assistant { background: var(--chat-assistant-bg); } .verdict-badge { display: inline-block; padding: 2px 10px; border-radius: 12px; font-weight: 600; font-size: 13px; } .verdict-winnable { background: var(--success-bg); color: var(--success-text); } .verdict-disputable { background: var(--warning-bg); color: var(--warning-text); } .verdict-legitimate { background: var(--danger-soft-bg); color: var(--danger-soft-text); } /* verdict_support (см. DefectConclusion в backend/generation/schemas.py) -- understated пометка НЕ меняет вердикт (просто есть пробел, не фатальный для вывода), баннер понижения -- когда backend реально сменил verdict. */ .verdict-downgraded-banner { background: var(--danger-soft-bg); color: var(--danger-soft-text); border: 1px solid var(--citation-unverified-border); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-weight: 600; font-size: 14px; } .verdict-weakened-note { color: var(--text-muted); font-size: 13px; font-style: italic; margin: 0 0 10px; } /* Предупреждение о качестве ПОИСКА НОРМЫ (см. frontend/user.js, retrieval_warning) -- янтарный, а не красный как verdict-downgraded-banner: там вердикт реально понижен системой, здесь же вывод в силе, но нормативное основание стоит перепроверить глазами. Разный цвет, чтобы врач различал "система сама себя поправила" и "система просит проверить за ней". */ .retrieval-warning-banner { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-text); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 14px; } .citation { border-left: 3px solid var(--citation-border); padding: 6px 10px; margin: 6px 0; background: var(--citation-bg); font-size: 14px; } .citation.unverified { border-left-color: var(--citation-unverified-border); background: var(--citation-unverified-bg); } .citation.paraphrase { border-left-color: var(--citation-paraphrase-border); background: var(--citation-paraphrase-bg); } .citation .badge { font-size: 11px; text-transform: uppercase; font-weight: 700; } .citation.unverified .badge { color: var(--danger); } .citation:not(.unverified) .badge { color: var(--success-text); } /* После :not(.unverified) -- та же специфичность (3 классовых селектора), побеждает порядок в файле -- .paraphrase не должна остаться зелёной. */ .citation.paraphrase .badge { color: var(--citation-paraphrase-border); } .citation .source-link-btn { display: block; margin-top: 8px; width: auto; padding: 4px 10px; font-size: 12px; } /* Переключатель "показать как распознано OCR" (см. frontend/user.js, renderCitations) -- раскрывает Citation.raw_quoted_text, когда backend причесал OCR-опечатки в цитате кейса. Ссылка-summary приглушённая, как inline-citation-link ниже -- прозрачность о правке, а не акцент на ней. */ .citation-raw-ocr { margin-top: 6px; } .citation-raw-ocr summary { cursor: pointer; color: var(--accent); font-size: 12px; } .citation-raw-ocr .muted { margin-top: 4px; } /* Встроенная ссылка на источник внутри "reasoning" (см. frontend/shared.js, buildInlineCitationLink) -- надстрочный порядковый номер, как ссылка на литературу в медицинской научной статье: тот же номер стоит у источника в "Списке источников" под заключением. Намеренно НЕ похожа на кнопку "Открыть источник" в карточке источника -- маленькая и приглушённая, заметна при чтении, но не перетягивает внимание с текста. */ .inline-citation-link { font-size: 0.72em; vertical-align: super; color: var(--accent); text-decoration: none; margin-left: 1px; opacity: 0.85; font-variant-numeric: tabular-nums; } .inline-citation-link:hover { opacity: 1; text-decoration: underline; } /* Обычная текстовая ссылка внутри контента. Нужен ЯВНЫЙ класс: голого правила для `a` в этом файле нет (почти все ссылки страниц — либо `nav a`, либо надстрочные .inline-citation-link выше), поэтому немаркированный получает браузерный дефолт #0000EE и на тёмной теме практически нечитаем. */ .text-link { color: var(--accent); text-decoration: underline; cursor: pointer; } .text-link:hover { color: var(--accent-hover); } .defect-conclusion { border: 1px solid var(--border); border-radius: 6px; padding: 12px 14px; margin-bottom: 14px; } .defect-conclusion h3 { margin-top: 0; } .defect-conclusion h4 { margin-bottom: 4px; font-size: 14px; color: var(--text-muted); } /* Obosnovanie -- см. renderMarkdownLite в shared.js: заголовки уровня LLM (## и глубже) вложены под h3/h4 карточки дефекта, поэтому им нужны заметно меньшие отступы, чем у глобальных h1-h3. */ .reasoning-markdown h4, .reasoning-markdown h5, .reasoning-markdown h6 { margin: 10px 0 4px 0; font-size: 14px; } .reasoning-markdown p { margin: 6px 0; } .reasoning-markdown ul, .reasoning-markdown ol { margin: 6px 0; padding-left: 22px; } .reasoning-markdown li { margin: 2px 0; } /* Страница-источник (frontend/source.html) -- полный текст нормативного документа (рендерится как markdown через renderMarkdownLite, см. frontend/source.js) с подсветкой процитированного фрагмента. */ .source-text { font-size: 14px; line-height: 1.6; max-height: 75vh; overflow-y: auto; padding: 4px; } .source-text h4, .source-text h5, .source-text h6 { margin: 18px 0 6px 0; } .source-text p { margin: 10px 0; } .source-text ul, .source-text ol { margin: 10px 0; padding-left: 22px; } .source-text li { margin: 4px 0; } .source-text mark, .reasoning-markdown mark { background: var(--accent); color: var(--accent-contrast); border-radius: 2px; padding: 0 2px; } table { width: 100%; border-collapse: collapse; margin: 12px 0; } th, td { text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-size: 14px; } .status-active { color: var(--success-text); } .status-superseded { color: var(--danger-soft-text); text-decoration: line-through; } .muted { color: var(--text-muted); font-size: 13px; } /* Круговой индикатор прогресса OCR-распознавания (страница X из Y -> процент). --progress выставляется из JS (frontend/user.js, pollUploadStatus), conic-gradient рисует дугу без canvas/SVG. */ .progress-circle { --progress: 0; position: relative; width: 56px; height: 56px; border-radius: 50%; margin: 12px 0; background: conic-gradient(var(--accent) calc(var(--progress) * 1%), var(--border) 0); transition: background 0.3s ease; } .progress-circle-hole { position: absolute; inset: 6px; border-radius: 50%; background: var(--bg-card); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text); } /* "Думающий" индикатор (frontend/user.js::startThinkingIndicator) -- вращающийся значок + сменяющиеся фразы + секунды, для этапов без промежуточного статуса от backend (LLM-вызов, обработка после отправки файлов). Честного % там взять неоткуда, поэтому не число, а живая анимация. */ .thinking-indicator { display: inline-flex; align-items: center; gap: 6px; } .thinking-glyph { display: inline-block; color: var(--accent); animation: thinking-spin 1.1s linear infinite; } @keyframes thinking-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .thinking-glyph { animation: none; } } /* Нумерованный "Список источников" (см. frontend/user.js, renderCitations) -- оформление как у списка литературы в статье: номер отдельной колонкой слева, содержимое источника справа. Одна запись = один нормативный фрагмент; если из него в обосновании процитировано несколько мест, они идут внутри одной записи под общим номером, а не размножают номера. */ .source-list { display: flex; flex-direction: column; gap: 10px; } .source-entry { display: grid; grid-template-columns: 2.2em 1fr; gap: 8px; align-items: start; } .source-number { font-variant-numeric: tabular-nums; color: var(--text-muted); font-size: 14px; padding-top: 7px; text-align: right; } .source-body { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* ---------- Клинрек-поиск (frontend/clinrec.html/.js) -- диалоговое окно поверх той же карточки-цитаты вёрстки, что и заключение оспаривания (.citation/.source-entry выше), но реплика ассистента шире 85% обычного .chat-message: внутри неё markdown-ответ + список источников, а не короткая фраза. ---------- */ .chat-conversation { display: flex; flex-direction: column; gap: 4px; } .chat-message.wide { max-width: 100%; } .chat-message.assistant.wide .reasoning-markdown > :first-child { margin-top: 0; } .chat-message.assistant.wide h4 { margin: 14px 0 6px; font-size: 13px; color: var(--text-muted); } .composer { margin-top: 14px; } .composer textarea { resize: vertical; } /* Этот режим НЕ анонимизирует вопрос (в отличие от /user.html, где есть отдельный шаг подтверждения PII) -- предупреждение всегда на виду, а не спрятано в подсказке поля. */ .composer-warning { margin: 6px 0 0; font-size: 12px; color: var(--warning-text); } /* "В корпусе нет ответа" -- ЯНТАРНЫЙ (--warning-*, тот же тон, что у .retrieval-warning-banner выше), НЕ красный: это честная граница узкого корпуса, а не ошибка системы. */ .clinrec-empty { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-text); border-radius: 6px; padding: 10px 12px; } /* degraded=True (см. backend/clinrec/schemas.py) -- модель не удержала JSON- формат даже со structured output, ответ восстановлен из голого markdown. Цитаты по-прежнему верифицированы дословно (см. докстринг llm_plumbing.salvage_bare_markdown_answer) -- это не ошибка результата, а честная пометка "какое именно предложение чанка считать цитатой выбрала не сама модель", тот же тон, что у .clinrec-empty, не красный .error-box. */ .degraded-notice { background: var(--warning-bg); color: var(--warning-text); border: 1px solid var(--warning-text); border-radius: 6px; padding: 8px 12px; margin-bottom: 10px; font-size: 13px; } .corpus-card summary { cursor: pointer; font-weight: 600; } .corpus-count { font-family: var(--font-mono); font-size: 11px; color: var(--text-muted); background: var(--border); border-radius: 999px; padding: 2px 7px; margin-left: 6px; } .corpus-group-title { font-size: 12px; font-weight: 700; color: var(--text-muted); text-transform: uppercase; margin: 10px 0 4px; } .corpus-doc-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .corpus-doc-list .doc-number { font-family: var(--font-mono); color: var(--accent); margin-right: 6px; } /* ================= Каркас приложения: сворачиваемый сайдбар с сервисами (frontend/user.html) + верхний индикатор шагов линейного процесса. Только frontend/user.html использует .app-shell -- у admin/source/login своя более простая .topbar, см. выше. ================= */ .app-shell { --sidebar-w: 272px; position: relative; z-index: 1; display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-height: 100vh; transition: grid-template-columns 0.25s ease; } .app-shell.is-collapsed { --sidebar-w: 60px; } .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 16px 12px; gap: 20px; overflow: hidden; } .brand-row { display: flex; align-items: center; gap: 8px; padding: 2px 2px 14px; border-bottom: 1px solid var(--border); } .brand { display: flex; align-items: center; gap: 10px; flex: 1; min-width: 0; } .brand-mark { flex: none; width: 32px; height: 32px; border-radius: 8px; background: var(--bg-card); border: 1.5px solid var(--accent); display: flex; align-items: center; justify-content: center; color: var(--accent); } .brand-mark svg { filter: drop-shadow(0 0 4px var(--accent-glow)); } .brand-word { font-family: var(--font-sans); font-size: 13px; font-weight: 700; line-height: 1.3; color: var(--text); display: flex; align-items: center; flex-wrap: wrap; gap: 6px 7px; } .brand-badge { font-family: var(--font-mono); font-size: 10.5px; font-weight: 700; color: var(--accent-contrast); background: var(--accent2); box-shadow: 0 0 10px var(--accent2-soft); border-radius: 999px; padding: 1px 8px; letter-spacing: 0.02em; transform: rotate(-2deg); display: inline-block; white-space: nowrap; } .brand-badge.lg { font-size: 13px; padding: 3px 11px; } .sidebar-toggle { flex: none; width: 26px; height: 26px; padding: 0 !important; display: flex; align-items: center; justify-content: center; } .sidebar-toggle svg { transition: transform 0.25s ease; } .side-nav { display: flex; flex-direction: column; gap: 3px; } .side-link { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 8px; text-decoration: none; font-size: 13.5px; font-weight: 600; color: var(--text-muted); transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease; white-space: nowrap; } .side-link svg { flex: none; opacity: 0.8; } .side-link:hover { background: var(--border); color: var(--text); } .side-link.active { background: var(--accent-soft); color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent-soft), 0 0 16px var(--accent-glow); } .side-link.active svg { opacity: 1; } .side-link.is-soon { cursor: default; } .side-link.is-soon:hover { background: transparent; color: var(--text-muted); } .soon-chip { margin-left: auto; font-size: 9.5px; font-weight: 700; color: var(--text-muted); background: var(--border); border-radius: 999px; padding: 2px 7px; } .side-footer { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 14px; border-top: 1px solid var(--border); } .user-chip { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-muted); min-width: 0; } .user-dot { flex: none; width: 26px; height: 26px; border-radius: 50%; background: var(--border-strong); color: var(--text); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; font-family: var(--font-mono); } .user-chip span.name { color: var(--text); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .side-footer-actions { display: flex; align-items: center; gap: 2px; flex: none; position: relative; } .sidebar.is-collapsed .brand-word, .sidebar.is-collapsed .side-link .label, .sidebar.is-collapsed .soon-chip, .sidebar.is-collapsed .user-chip .name, .sidebar.is-collapsed button.ghost .label { display: none; } .sidebar.is-collapsed .brand-row, .sidebar.is-collapsed .brand, .sidebar.is-collapsed .side-link { justify-content: center; } .sidebar.is-collapsed .side-footer { flex-direction: column; gap: 10px; } .sidebar.is-collapsed .side-footer-actions { flex-direction: column; } .sidebar.is-collapsed .theme-menu { left: 4px; bottom: 0; } .sidebar.is-collapsed .sidebar-toggle svg { transform: rotate(180deg); } .main { padding: 40px 32px 64px; overflow-x: hidden; position: relative; z-index: 1; } .main-inner { max-width: 720px; margin: 0 auto; } .page-head h1 { margin: 0 0 10px; font-size: 22px; display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .lede { margin: 0 0 30px; color: var(--text-muted); max-width: 62ch; } @media (max-width: 780px) { .app-shell { grid-template-columns: 1fr; } .sidebar { flex-direction: row; align-items: center; overflow-x: auto; } .side-nav { flex-direction: row; } .stepper-node .label { display: none; } } /* ---------- Индикатор шагов (см. frontend/user.js, setActiveStep в shared.js) -- только визуальный прогресс. Карточки самих шагов друг за другом НЕ прячутся (процесс аддитивный, врач видит всё на одной странице), стрелка лишь показывает, докуда дошли. ---------- */ .stepper-wrap { position: relative; margin: 0 0 32px; } .stepper { list-style: none; display: flex; margin: 0; padding: 0; } .stepper-track { position: absolute; top: 15px; left: 15px; right: 15px; height: 2px; background: var(--border); z-index: 0; } .stepper-fill { position: absolute; top: 15px; left: 15px; height: 2px; background: var(--accent); box-shadow: 0 0 8px var(--accent-glow); z-index: 1; transition: width 0.4s ease; width: 0%; } .stepper-node { position: relative; z-index: 2; flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; color: var(--text-muted); } .stepper-node .dot { width: 30px; height: 30px; border-radius: 50%; background: var(--bg-card); border: 2px solid var(--border-strong); display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; color: var(--text-muted); transition: all 0.2s ease; } .stepper-node .label { font-size: 11.5px; font-weight: 600; max-width: 110px; } .stepper-node.is-done .dot { background: var(--accent); border-color: var(--accent); color: var(--accent-contrast); } .stepper-node.is-current .dot { border-color: var(--accent); color: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft), 0 0 14px var(--accent-glow); } .stepper-node.is-current .label { color: var(--text); } /* ---------- Зона вставки файлов (см. frontend/user.html, #upload-files) -- нативный визуально спрятан внутри