/* ============================================================ Vedora — дизайн-система «Чернила и киноварь» Токены: холодная бумага, чернильный нави (действия), киноварь (бренд/буквицы/override), semantic-цвета отдельно. Тема: [data-theme="dark"] на — «ночная читальня». ============================================================ */ :root { --bg: #F6F7F4; --surface: #FFFFFF; --border: #DCDFE8; --text: #1D2130; --muted: #5E6577; --primary: #34418D; --primary-fg: #FFFFFF; --accent: #C64530; /* киноварь */ --danger: #A63226; --ok: #2E7D4F; --warn: #9A6A00; --radius: 6px; --shadow: 0 1px 2px rgba(29, 33, 48, 0.06), 0 2px 8px rgba(29, 33, 48, 0.04); --serif: Georgia, "Times New Roman", serif; --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } [data-theme="dark"] { --bg: #14161D; --surface: #1C1F28; --border: #2C3040; --text: #E9E8E2; --muted: #9AA0AE; --primary: #98A4EE; --primary-fg: #14161D; --accent: #E2724F; --danger: #E07B6C; --ok: #6CBE8E; --warn: #D9A94A; --shadow: 0 1px 2px rgba(0, 0, 0, 0.4); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--sans); background: var(--bg); color: var(--text); line-height: 1.55; transition: background 0.2s ease, color 0.2s ease; } a { color: var(--primary); text-decoration: none; } a:hover { text-decoration: underline; } code { font-family: var(--mono); font-size: 0.9em; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } /* Исключение: кружок активной стадии обработки — функциональный индикатор «процесс жив», не декорация (ОС включает reduce сама в энергосбережении, и индикатор «замирал»). Мягкое медленное мигание яркостью, без ореола — vestibular-safe: меняется только opacity, без движения и масштаба. */ .mini-steps i.a { animation: pulse-gentle 3s ease-in-out infinite !important; animation-delay: var(--pulse-phase, 0ms) !important; } } @keyframes pulse-gentle { 50% { opacity: 0.35; } } h1, h2 { font-family: var(--serif); font-weight: 500; letter-spacing: 0.005em; } h1 { font-size: 1.7rem; } h2 { font-size: 1.25rem; } /* ---------- Топбар и бренд ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; padding: 0.6rem 1.5rem; background: var(--surface); border-bottom: 1px solid var(--border); } .brand a { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text); font-family: var(--serif); font-weight: 400; font-size: 1.2rem; } .brand a:hover { text-decoration: none; } .brand .cap { color: var(--accent); } .brand svg { display: block; } .topbar nav { display: flex; gap: 1rem; align-items: center; } .topbar .user { font-size: 0.85rem; color: var(--muted); } .topbar .role { color: var(--primary); } .theme-toggle { background: none; border: 1px solid var(--border); border-radius: 999px; color: var(--muted); cursor: pointer; font: inherit; font-size: 0.85rem; padding: 0.2rem 0.7rem; } .theme-toggle:hover { border-color: var(--primary); color: var(--text); } .container { max-width: 1100px; margin: 1.5rem auto; padding: 0 1.5rem; } /* ---------- Карточки / строки ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 1.2rem 1.4rem; margin: 1rem 0; } .card.narrow { max-width: 480px; margin: 2rem auto; } .card.subtle { background: color-mix(in srgb, var(--surface) 55%, var(--bg)); padding: 0.7rem 1rem; } .row { display: flex; gap: 1rem; align-items: center; } .row.spread { justify-content: space-between; } /* ---------- Формы ---------- */ label { display: block; margin: 0.7rem 0; font-weight: 500; } input[type=text], input[type=email], input[type=password], input[type=number], textarea, select { display: block; width: 100%; padding: 0.5rem 0.7rem; border: 1px solid var(--border); border-radius: var(--radius); font: inherit; background: var(--surface); color: var(--text); } input:focus, textarea:focus, select:focus { border-color: var(--primary); outline: none; } input[type=file] { padding: 0.4rem 0; color: var(--muted); } textarea { resize: vertical; } .btn { display: inline-block; padding: 0.5rem 1rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); color: var(--text); cursor: pointer; font: inherit; text-decoration: none; } .btn:hover { border-color: var(--primary); text-decoration: none; } .btn.primary { background: var(--primary); color: var(--primary-fg); border-color: var(--primary); } .btn.primary:hover { filter: brightness(1.08); } .btn.small { padding: 0.25rem 0.6rem; font-size: 0.85rem; } .link-btn { background: none; border: none; padding: 0; color: var(--primary); cursor: pointer; font: inherit; } .link-btn.danger { color: var(--danger); } .inline { display: inline; } .muted { color: var(--muted); } .hint { font-size: 0.85rem; color: var(--muted); } .hint.error { color: var(--danger); } /* Флеши — тосты: фиксированы справа внизу, авто-скрытие через JS. */ .flashes { list-style: none; padding: 0; margin: 0; position: fixed; right: 1rem; bottom: 1rem; z-index: 60; display: flex; flex-direction: column; gap: 0.4rem; max-width: 340px; } .flash { padding: 0.6rem 0.9rem; border-radius: var(--radius); border: 1px solid transparent; box-shadow: var(--shadow); background: var(--surface); transition: opacity 0.3s ease; animation: toast-in 0.25s ease; } @keyframes toast-in { from { transform: translateY(8px); opacity: 0; } } .flash-success, .flash-info { background: color-mix(in srgb, var(--ok) 12%, var(--surface)); border-color: color-mix(in srgb, var(--ok) 35%, transparent); color: var(--ok); } .flash-error { background: color-mix(in srgb, var(--danger) 12%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 35%, transparent); color: var(--danger); } .flash-warning { background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border-color: color-mix(in srgb, var(--warn) 35%, transparent); color: var(--warn); } /* ---------- Таблицы ---------- */ table.grid { width: 100%; border-collapse: collapse; margin-top: 0.5rem; } .grid th, .grid td { padding: 0.55rem 0.7rem; text-align: left; border-bottom: 1px solid var(--border); } .grid th { font-size: 0.78rem; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } .grid td { font-variant-numeric: tabular-nums; } tr.dim { opacity: 0.55; } /* ---------- Статусы документов ---------- */ .status { padding: 0.1rem 0.5rem; border-radius: 4px; font-size: 0.8rem; font-weight: 600; font-family: var(--mono); } .status-queued { background: color-mix(in srgb, var(--muted) 14%, transparent); color: var(--muted); } .status-parsing { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .status-extracting { background: color-mix(in srgb, var(--primary) 14%, transparent); color: var(--primary); } .status-processed { background: color-mix(in srgb, var(--ok) 14%, transparent); color: var(--ok); } .status-failed { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); } .status-cancelling { background: color-mix(in srgb, var(--danger) 10%, transparent); color: var(--muted); } /* ---------- Чат ---------- */ .chat-pane { display: flex; flex-direction: column; gap: 1rem; } .chat-messages { display: flex; flex-direction: column; gap: 0.9rem; min-height: 200px; } .chat-message { display: grid; gap: 0.7rem; } .chat-message.error { background: color-mix(in srgb, var(--danger) 10%, var(--surface)); color: var(--danger); border: 1px solid color-mix(in srgb, var(--danger) 30%, transparent); border-radius: var(--radius); padding: 0.7rem 1rem; } .chat-q { justify-self: end; max-width: 75%; background: color-mix(in srgb, var(--primary) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 22%, var(--border)); border-radius: 12px 12px 3px 12px; padding: 0.6rem 0.9rem; } .chat-a { max-width: 94%; border-left: 3px solid var(--accent); padding: 0.1rem 0 0.1rem 1rem; } .chat-a-label { color: var(--muted); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 0.3rem; } .chat-params { font-weight: 500; letter-spacing: 0; text-transform: none; opacity: 0.8; font-family: var(--mono); } /* Панель действий под ответом (copy + оценка) — приглушённо-серая, проявляется ярче при наведении на сообщение. Все иконки монохромные (по токенам). */ .chat-actions { display: flex; align-items: center; gap: 0.15rem; margin: 0.4rem 0 0.2rem; opacity: 0.55; transition: opacity 0.15s ease; } .chat-a:hover .chat-actions, .chat-actions:focus-within { opacity: 1; } .act-btn { display: inline-flex; align-items: center; justify-content: center; background: none; border: 1px solid transparent; border-radius: var(--radius); color: var(--muted); cursor: pointer; font: inherit; font-size: 0.95rem; line-height: 1; padding: 0.25rem 0.4rem; } .act-btn:hover { border-color: var(--border); color: var(--text); background: color-mix(in srgb, var(--text) 5%, transparent); } .act-btn:disabled { opacity: 0.4; cursor: default; } .act-btn .ic { display: block; } .fb-flip .ic { transform: rotate(180deg); } .act-btn.copied { color: var(--ok); } /* краткая ✓-вспышка копирования */ /* Активная оценка — не цветная, просто чуть темнее серого + лёгкий фон. */ .fb-btn.on { color: var(--text); border-color: var(--border); background: color-mix(in srgb, var(--text) 8%, transparent); } .act-sep { width: 1px; height: 1rem; background: var(--border); margin: 0 0.2rem; } .chat-a .answer { line-height: 1.55; } .chat-a .answer h1, .chat-a .answer h2, .chat-a .answer h3 { margin: 0.6em 0 0.3em; line-height: 1.2; font-family: var(--serif); } .chat-a .answer h1 { font-size: 1.15rem; } .chat-a .answer h2 { font-size: 1.05rem; } .chat-a .answer h3 { font-size: 1rem; color: var(--text); } .chat-a .answer p { margin: 0.4em 0; } .chat-a .answer ul, .chat-a .answer ol { margin: 0.4em 0; padding-left: 1.4em; } .chat-a .answer li { margin: 0.15em 0; } .chat-a .answer hr { margin: 0.8em 0; border: 0; border-top: 1px solid var(--border); } .chat-a .answer code { background: color-mix(in srgb, var(--muted) 12%, transparent); padding: 0.05em 0.35em; border-radius: 3px; } .chat-a .answer pre { background: #21232B; color: #EDEDE6; padding: 0.8em; border-radius: var(--radius); overflow-x: auto; } .chat-a .answer pre code { background: transparent; padding: 0; color: inherit; } .chat-a .answer table { border-collapse: collapse; margin: 0.5em 0; } .chat-a .answer table th, .chat-a .answer table td { border: 1px solid var(--border); padding: 0.3em 0.6em; } .chat-a .answer blockquote { border-left: 3px solid var(--border); margin: 0.5em 0; padding: 0.1em 0.8em; color: var(--muted); } .chat-controls { display: flex; gap: 0.8rem; align-items: end; margin-top: 0.5rem; flex-wrap: wrap; } .chat-controls label { margin: 0; font-weight: normal; } /* Описание режима справа от top_k: занимает свободное место до кнопки, при нехватке ширины переносит кнопку на след. строку (chat-controls wrap). */ .chat-hint { flex: 1 1 14rem; min-width: 12rem; font-size: 0.85rem; line-height: 1.35; align-self: center; } /* Цитаты */ .citations { margin-top: 0.8rem; padding-top: 0.6rem; border-top: 1px solid var(--border); font-size: 0.9rem; } .citations > summary.citations-label { cursor: pointer; user-select: none; width: fit-content; margin-bottom: 0.3rem; } .citations > summary.citations-label:hover { color: var(--primary); } .citations-label { color: var(--muted); font-weight: 600; } .citations ul { margin: 0.3rem 0 0; padding-left: 1.2em; } .citations li { margin: 0.2em 0; } .cite-file { background: color-mix(in srgb, var(--muted) 12%, transparent); padding: 0.05em 0.35em; border-radius: 3px; } .snippet { font-style: italic; margin-left: 0.3em; } /* Второй уровень источников: раскрывающийся список retrieval-фрагментов */ .fragments { margin-top: 0.5rem; font-size: 0.9rem; } .fragments > summary { cursor: pointer; color: var(--muted); font-weight: 600; padding: 0.15em 0; user-select: none; width: fit-content; } .fragments > summary:hover { color: var(--primary); } .fragments-list { margin: 0.3rem 0 0; padding-left: 1.6em; } .fragments-list li { margin: 0.35em 0; padding-left: 0.2em; } .fragments-list li::marker { color: var(--muted); font-variant-numeric: tabular-nums; } .frag-head { display: inline-flex; flex-wrap: wrap; gap: 0.45em; align-items: baseline; } .frag-kind { font-size: 0.78em; letter-spacing: 0.03em; border-radius: 999px; padding: 0.1em 0.55em; border: 1px solid var(--border); color: var(--muted); } .frag-kind-table, .frag-kind-equation { border-color: color-mix(in srgb, var(--primary) 45%, transparent); color: var(--primary); } .frag-kind-image, .frag-kind-chart { border-color: color-mix(in srgb, var(--accent) 45%, transparent); color: var(--accent); } .fragments-list .snippet { margin-left: 0; margin-top: 0.1em; } .fragments-list .snippet.full { font-style: normal; white-space: pre-wrap; } .frag-more { background: none; border: none; padding: 0; margin-top: 0.15em; font: inherit; font-size: 0.85em; color: var(--primary); cursor: pointer; text-decoration: underline dotted; display: block; } .frag-more:hover { color: var(--accent); } .frag-more:disabled { color: var(--muted); cursor: wait; text-decoration: none; } /* Кнопка «показать на графе» под источниками ответа */ .answer-graph { margin-top: 0.55rem; } .graph-focus-btn { background: none; border: 1px solid var(--border); border-radius: 999px; padding: 0.22em 0.85em; font: inherit; font-size: 0.85em; color: var(--primary); cursor: pointer; } .graph-focus-btn:hover { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); } /* ============================================================ Граф знаний: тулбар, полотно, легенда, карточки ============================================================ */ .graphpage { display: flex; flex-direction: column; flex: 1; min-height: 0; } .g-toolbar { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; padding: 0.55rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface); } .g-toolbar input[type="search"] { width: 20rem; max-width: 40vw; padding: 0.35rem 0.6rem; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg); color: var(--text); font: inherit; } .g-toolbar input[type="search"]:focus { outline: 2px solid color-mix(in srgb, var(--primary) 40%, transparent); } .g-ctl { display: inline-flex; align-items: center; gap: 0.45em; color: var(--muted); font-size: 0.9rem; } .g-ctl input[type="range"] { width: 8rem; accent-color: var(--primary); } .g-ctl input[type="checkbox"] { accent-color: var(--accent); } .g-ctl select { font: inherit; font-size: 0.9rem; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.2em 0.4em; } .g-ctl .mono { font-family: var(--mono); font-size: 0.85em; min-width: 2.5em; } .g-hint { font-size: 0.82rem; } .g-body { display: flex; flex: 1; min-height: 0; } #g-canvas { flex: 1; min-width: 0; background: var(--bg); position: relative; } #g-canvas.busy::after { content: "загрузка…"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: color-mix(in srgb, var(--bg) 65%, transparent); color: var(--muted); font-size: 0.95rem; z-index: 5; } .g-panel { width: 310px; flex: none; overflow-y: auto; border-left: 1px solid var(--border); background: var(--surface); padding: 0.9rem 1rem; display: flex; flex-direction: column; gap: 1.1rem; } .g-block-label { font-size: 0.78rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.5rem; } .g-legend { display: flex; flex-wrap: wrap; gap: 0.35rem; } .g-chip { display: inline-flex; align-items: center; gap: 0.4em; border: 1px solid var(--border); border-radius: 999px; background: none; color: var(--text); font: inherit; font-size: 0.82rem; padding: 0.18em 0.7em; cursor: pointer; } .g-chip:hover { border-color: var(--primary); } .g-chip.off { opacity: 0.38; text-decoration: line-through; } .g-chip .dot { width: 0.62em; height: 0.62em; border-radius: 50%; flex: none; } .g-chip .n { color: var(--muted); font-size: 0.9em; } .g-legend-rest { font-size: 0.8rem; align-self: center; } .g-card-community { font-size: 0.85rem; margin-bottom: 0.4rem; } .g-card-name { font-family: var(--serif); font-size: 1.12rem; margin-bottom: 0.35rem; text-wrap: balance; } .g-card-name.small { font-size: 0.95rem; font-family: var(--sans); } .g-card-meta { display: flex; align-items: center; gap: 0.6em; margin-bottom: 0.4rem; } .g-card-files { font-size: 0.82rem; margin-bottom: 0.4rem; overflow-wrap: anywhere; } .g-card-descr { margin: 0 0 0.7rem; font-size: 0.9rem; line-height: 1.45; max-height: 14rem; overflow-y: auto; white-space: pre-wrap; } .g-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; } @media (max-width: 900px) { .g-panel { display: none; } } /* Инлайн-чип цитаты [n] в тексте ответа */ .cite { display: inline-flex; align-items: center; position: relative; font: 600 0.72rem var(--mono); color: var(--primary); background: color-mix(in srgb, var(--primary) 11%, transparent); border-radius: 4px; padding: 0.05em 0.4em; margin: 0 0.15em; cursor: default; vertical-align: 0.12em; } .cite .pop { /* position: fixed — поповер выходит из скролл-контейнеров чата; координаты ставит JS (placeCitePopover), зажимая по вьюпорту, чтобы не было скролла. */ display: none; position: fixed; top: 0; left: 0; z-index: 30; width: max-content; max-width: min(340px, calc(100vw - 1.5rem)); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 0.6rem 0.8rem; font: 400 0.8rem var(--sans); color: var(--text); white-space: normal; overflow-wrap: anywhere; } .cite:hover .pop, .cite:focus-within .pop { display: block; } .cite .pop .src { font: 600 0.78rem var(--mono); color: var(--primary); margin-bottom: 0.25rem; overflow-wrap: anywhere; } .cite .pop .sn { color: var(--muted); font-style: italic; } /* ---------- Спиннеры / индикаторы ---------- */ .spinner { display: inline-block; width: 1em; height: 1em; border: 2px solid var(--border); border-top-color: var(--primary); border-radius: 50%; vertical-align: -2px; animation: spin 0.8s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* Мигание и яркостью самого кружка, и ореолом: box-shadow-ореол в тёмной теме и фоновых вкладках почти неразличим — opacity видна всегда. */ @keyframes pulse { 50% { opacity: 0.3; box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary) 25%, transparent); } } .htmx-indicator { opacity: 0; transition: opacity 200ms ease-in; display: inline-flex; align-items: center; gap: 0.4em; margin-left: 0.6em; color: var(--muted); font-size: 0.9rem; } .htmx-request .htmx-indicator, .htmx-request.htmx-indicator { opacity: 1; } .htmx-request[disabled], .htmx-request[disabled] textarea, .htmx-request [disabled] { opacity: 0.6; cursor: progress; } form.htmx-request { opacity: 0.7; } .upload-spinner { display: inline-flex; align-items: center; gap: 0.4em; margin-left: 0.6em; color: var(--muted); font-size: 0.9rem; } .up-progress { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.3rem; } .up-track { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .up-bar { height: 100%; width: 0; background: var(--primary); transition: width 0.2s ease; } .up-txt { font-size: 0.78rem; } /* ---------- Формы (доп.) ---------- */ .form-row { margin: 0.6rem 0; } .form-row.two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .form-row.two-col label { margin: 0; } .form-row label.grow { display: block; } .form-row legend { font-weight: 600; margin-bottom: 0.4rem; padding: 0 0.4em; } fieldset.form-row { border: 1px solid var(--border); border-radius: var(--radius); padding: 0.7rem 0.9rem; margin: 0.7rem 0; } .checkbox-inline { display: inline-flex; align-items: center; gap: 0.3em; margin-right: 0.9em; font-weight: normal; } .checkbox-inline input { width: auto; } details.settings { margin: 1rem 0; padding: 0.6rem 0.8rem; border: 1px dashed var(--border); border-radius: var(--radius); } details.settings summary { cursor: pointer; padding: 0.2rem 0; } .form-actions { display: flex; gap: 0.5rem; margin-top: 1rem; } /* ---------- Бейджи настроек ---------- */ .actions { display: flex; gap: 0.5rem; } .settings-summary { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.4rem; } .badge { display: inline-flex; align-items: center; gap: 0.35em; background: color-mix(in srgb, var(--muted) 10%, transparent); color: var(--text); padding: 0.15em 0.6em; border-radius: 12px; font-size: 0.85rem; } .badge.override { background: transparent; border: 1px solid var(--border); font-weight: 600; } .badge.pub { background: transparent; padding: 0 0.2em; font-size: 0.75rem; opacity: 0.75; } .badge.override::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .badge.default { background: transparent; border: 1px dashed var(--border); color: var(--muted); } .badge.locked { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge.kind-llm { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); } .badge.kind-embedding { background: color-mix(in srgb, var(--ok) 13%, transparent); color: var(--ok); } .badge.kind-vision { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); } .badge.inactive { background: color-mix(in srgb, var(--muted) 12%, transparent); color: var(--muted); } .badge.keyset { background: color-mix(in srgb, var(--warn) 20%, transparent); } .alert { padding: 0.7rem 1rem; border-radius: var(--radius); margin: 0.6rem 0; border-left: 4px solid var(--primary); } .alert-info { background: color-mix(in srgb, var(--primary) 8%, var(--surface)); } /* ---------- Админ ---------- */ .card-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .admin-card { text-decoration: none; color: var(--text); padding: 1.4rem 1.6rem; } .admin-card:hover { border-color: var(--primary); text-decoration: none; } .admin-card h2 { margin-top: 0; } .admin-link { background: var(--primary); color: var(--primary-fg); padding: 0.25em 0.7em; border-radius: 4px; font-weight: 600; } .admin-link:hover { text-decoration: none; filter: brightness(1.08); } /* ---------- Чат-сессии (сайдбар истории) ---------- */ .chat-sessions { list-style: none; margin: 0.5rem 0 0; padding: 0; } .chat-sessions li { display: flex; align-items: center; gap: 0.3rem; padding: 0.25rem 0.4rem; border-radius: var(--radius); font-size: 0.9rem; } .chat-sessions li.active { background: color-mix(in srgb, var(--primary) 12%, transparent); font-weight: 600; } .chat-sessions li a { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); } .chat-sessions li form button { border: none; background: none; color: var(--muted); cursor: pointer; padding: 0 0.3rem; } .chat-sessions li form button:hover { color: var(--danger); } .grow { flex: 1; } /* ============================================================ Этап 2 — каркас: сайдбар, рабочая область, быстрый переход ============================================================ */ html, body { height: 100%; } .shell { display: grid; grid-template-columns: 240px 1fr; height: 100vh; } .shell.shell-plain { grid-template-columns: 1fr; } .main-zone { overflow-y: auto; min-width: 0; display: flex; flex-direction: column; } .main-zone > .container { width: 100%; } .sidebar { display: flex; flex-direction: column; gap: 0.2rem; background: var(--surface); border-right: 1px solid var(--border); padding: 0.9rem 0.7rem; overflow-y: auto; } .sb-brand a { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--serif); font-size: 1.15rem; color: var(--text); padding: 0 0.4rem 0.6rem; } .sb-brand a:hover { text-decoration: none; } .sb-brand .cap { color: var(--accent); } .sb-label { font: 600 0.68rem var(--sans); letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); padding: 0.7rem 0.5rem 0.25rem; } .sb-group { display: flex; flex-direction: column; gap: 1px; } .sb-item { display: flex; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border-radius: var(--radius); color: var(--text); font-size: 0.92rem; } a.sb-item:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); text-decoration: none; } .sb-item.on { background: color-mix(in srgb, var(--primary) 13%, transparent); font-weight: 600; } .sb-item .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-item.chat { font-size: 0.85rem; color: var(--muted); padding-left: 0.9rem; font-weight: 400; } .sb-item.chat.on { color: var(--text); font-weight: 600; } .sb-item.chat a { color: inherit; } .sb-item.chat a:hover { text-decoration: none; color: var(--text); } .sb-item.chat form button { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.2rem; visibility: hidden; } .sb-item.chat:hover form button { visibility: visible; } .sb-item.chat form button:hover { color: var(--danger); } .sb-new { display: block; padding: 0.3rem 0.5rem; font-size: 0.85rem; color: var(--primary); border-radius: var(--radius); } .sb-new:hover { background: color-mix(in srgb, var(--primary) 7%, transparent); text-decoration: none; } .sb-foot { margin-top: auto; border-top: 1px solid var(--border); padding: 0.7rem 0.4rem 0.2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; } .sb-user { display: flex; align-items: center; gap: 0.4rem; color: var(--muted); } .sb-user .n { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sb-admin { color: var(--text); } .kbd { border: 1px solid var(--border); border-bottom-width: 2px; border-radius: 4px; padding: 0 0.35em; font: 0.75rem var(--mono); background: var(--surface); } /* Рабочая область */ .workspace { display: grid; grid-template-columns: minmax(0, 1fr) 300px; flex: 1; min-height: 0; } @media (max-width: 900px) { .workspace { grid-template-columns: 1fr; } .ws-src { display: none; } } .ws-chat { display: flex; flex-direction: column; min-width: 0; min-height: 0; } .ws-head { display: flex; align-items: center; gap: 0.7rem; padding: 0.7rem 1.2rem; border-bottom: 1px solid var(--border); background: var(--surface); } .ws-head .t { font-family: var(--serif); font-size: 1.1rem; } .ws-head .m { font: 0.78rem var(--mono); color: var(--muted); } .ws-scroll { flex: 1; overflow-y: auto; padding: 1.1rem 1.4rem; } .ws-input { border-top: 1px solid var(--border); background: var(--surface); padding: 0.7rem 1.2rem; } .ws-input textarea { margin: 0; } .empty-state { text-align: center; color: var(--muted); margin: 14vh auto 0; max-width: 34rem; } .empty-state .es-mark { font-family: var(--serif); font-size: 3rem; color: var(--accent); opacity: 0.5; } .ws-src { border-left: 1px solid var(--border); background: var(--bg); overflow-y: auto; padding: 0.9rem; min-height: 0; } .src-list { display: flex; flex-direction: column; gap: 0.5rem; margin-top: 0.6rem; } .src-doc { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0.5rem 0.65rem; } .src-doc .fn { font: 0.8rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; color: var(--text); } .src-doc .fn:hover { color: var(--primary); text-decoration: none; } .src-doc .st { display: flex; align-items: center; gap: 0.45rem; margin-top: 0.35rem; font-size: 0.75rem; color: var(--muted); } .src-doc .st-txt.ok { color: var(--ok); } .src-doc .sub { font-size: 0.72rem; margin-top: 0.25rem; } .src-del { background: none; border: none; color: var(--muted); cursor: pointer; padding: 0 0.2rem; } .src-del:hover { color: var(--danger); } .mini-steps { display: inline-flex; gap: 3px; } .mini-steps i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); } .mini-steps i.d { background: var(--ok); } /* Периоды пульса кратны периоду htmx-опроса source_item (3с): элемент пересоздаётся свапом и анимация стартует заново — некратный период обрывал затухание на середине (заметный скачок). */ .mini-steps i.a { background: var(--primary); animation: pulse 1.5s ease-in-out infinite; /* фаза задаётся inline-переменной из source_item.html (см. pulse_phase) */ animation-delay: var(--pulse-phase, 0ms); } .dropzone { border: 1.5px dashed var(--border); border-radius: var(--radius); padding: 0.7rem; font-size: 0.8rem; color: var(--muted); display: flex; flex-direction: column; gap: 0.5rem; } .dropzone.drag { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, transparent); } .dropzone input[type=file] { font-size: 0.75rem; width: 100%; } .dropzone .btn { align-self: start; } .welcome { text-align: center; margin-top: 16vh; } .welcome .cap-accent { color: var(--accent); } /* Быстрый переход (Ctrl K) */ dialog.qs { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); width: min(480px, 90vw); padding: 0; } dialog.qs::backdrop { background: rgba(20, 22, 29, 0.45); } .qs input { border: none; border-bottom: 1px solid var(--border); border-radius: 0; padding: 0.8rem 1rem; font-size: 1rem; } .qs input:focus { outline: none; border-color: var(--primary); } .qs-list { max-height: 300px; overflow-y: auto; padding: 0.4rem; } .qs-item { display: block; padding: 0.45rem 0.7rem; border-radius: var(--radius); color: var(--text); font-size: 0.92rem; } .qs-item:hover, .qs-item.sel { background: color-mix(in srgb, var(--primary) 10%, transparent); text-decoration: none; } .qs-empty { padding: 0.7rem 1rem; color: var(--muted); font-size: 0.9rem; } /* ============================================================ Этап 4 — группировка настроек, тосты, dnd ============================================================ */ .cfg-groups { display: grid; gap: 0.6rem; } .cfg-row { display: grid; grid-template-columns: 92px 1fr; gap: 0.8rem; align-items: baseline; } .cfg-row .g { font: 600 0.68rem var(--sans); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); } .chips { display: flex; flex-wrap: wrap; gap: 0.4rem; } .chip2 { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.8rem; border: 1px solid var(--border); border-radius: 999px; padding: 0.15em 0.65em; background: var(--bg); color: var(--text); } .chip2 code { font-size: 0.78rem; } .chip2.ov { font-weight: 600; } .chip2.ov::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); flex: none; } .dot-ov { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); } .legend { font-size: 0.78rem; color: var(--muted); margin-top: 0.6rem; display: flex; align-items: center; gap: 0.4em; } /* ---------- Стриминг ответа ---------- */ .stream-stage { display: flex; align-items: center; gap: 0.4em; font-size: 0.85rem; margin-bottom: 0.4rem; } .stream-answer { white-space: pre-wrap; } .stream-answer:empty { display: none; } /* ---------- Danger zone ---------- */ .card.danger-zone { border-color: color-mix(in srgb, var(--danger) 40%, var(--border)); } .card.danger-zone h2 { color: var(--danger); } .danger-btn { border-color: var(--danger); color: var(--danger); } .danger-btn:hover { background: var(--danger); color: var(--surface); border-color: var(--danger); } /* ---------- Превью картинок-источников в цитатах ---------- */ .cite-thumb { display: block; max-height: 140px; max-width: 100%; margin-top: 0.35rem; border: 1px solid var(--border); border-radius: 4px; background: #fff; } .cite-thumb:hover { border-color: var(--primary); } /* ============================================================ Страница документа (document_detail.html): таймлайн обработки, RAG-статистика, паспорт. Токены «Чернил и киновари». ============================================================ */ .doc-h1 { max-width: 60vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .doc-detail { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; align-items: start; } .doc-detail .card { margin: 0; } .doc-detail .card:last-child { grid-column: 1 / -1; } @media (max-width: 900px) { .doc-detail { grid-template-columns: 1fr; } } .doc-detail .mono { font-family: var(--mono); font-size: 0.85em; } .doc-detail .wrap { word-break: break-all; } /* Таймлайн фаз: точка — имя — старт — длительность */ .tl { margin: 0.5rem 0; } .tl-row { display: grid; grid-template-columns: 1.2rem 8rem 6rem 1fr; gap: 0.4rem; align-items: baseline; padding: 0.28rem 0; } .tl-row.off { opacity: 0.45; } .tl-row.total { border-top: 1px solid var(--border); margin-top: 0.3rem; padding-top: 0.5rem; font-weight: 600; } .tl-name { color: var(--text); } .tl-start { color: var(--muted); } .tl-dur { font-variant-numeric: tabular-nums; } .tl-dot i { display: inline-block; width: 0.55rem; height: 0.55rem; border-radius: 50%; border: 1.5px solid var(--border); vertical-align: baseline; } .tl-dot i.d { background: var(--ok); border-color: var(--ok); } .tl-dot i.a { background: var(--accent); border-color: var(--accent); animation: pulse-gentle 2s ease-in-out infinite; } .doc-status-line { display: flex; align-items: center; gap: 0.5rem; margin-top: 0.4rem; flex-wrap: wrap; } /* Крупные цифры графа — серифная антиква, как буквицы бренда */ .stat-grid { display: flex; gap: 2rem; padding: 0.5rem 0.2rem; flex-wrap: wrap; } .stat { display: flex; flex-direction: column; } .stat .n { font: 600 1.9rem var(--serif); color: var(--accent); font-variant-numeric: tabular-nums; line-height: 1.1; } .stat .l { font-size: 0.78rem; color: var(--muted); letter-spacing: 0.04em; } /* Паспорт: dt/dd сетка */ .doc-props { display: grid; grid-template-columns: 7rem 1fr; gap: 0.25rem 0.8rem; margin: 0.5rem 0; } .doc-props dt { color: var(--muted); font-size: 0.85rem; } .doc-props dd { margin: 0; } /* Чат в полёте: «Спросить» → «■ Стоп» (контур киноварью — осознанное действие, не главный CTA) + пометка отменённого ответа. */ #chat-form .btn.stop { background: transparent; color: var(--accent); border-color: var(--accent); } #chat-form .btn.stop:hover { background: color-mix(in srgb, var(--accent) 12%, transparent); filter: none; } .stream-cancelled { font-size: 0.85rem; color: var(--muted); font-style: italic; margin: 0.2rem 0 0.4rem; } /* Сайдбар: «+» у заголовка секции + вложенные чаты активного пространства. */ .sb-label-row { display: flex; align-items: center; } .sb-label-row .sb-label { flex: 1; } .sb-add { color: var(--muted); font-size: 1rem; line-height: 1; padding: 0.15rem 0.45rem; border-radius: var(--radius); margin-right: 0.2rem; } .sb-add:hover { color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); text-decoration: none; } .sb-item .tri { font-size: 0.6rem; color: var(--muted); width: 0.8em; flex: none; } .sb-item.on .tri { color: var(--accent); } /* Вложение: отступ + тонкая направляющая — граница списка видна без надписи */ .sb-nest { margin-left: 0.85rem; padding-left: 0.45rem; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 1px; margin-bottom: 0.3rem; } .sb-nest .sb-item.chat { padding-left: 0.4rem; } /* Справочный блок «Окно ответа» в настройках пространства */ .answer-window { border-left: 2px solid var(--border); padding-left: 0.8rem; } .answer-window summary { cursor: pointer; } .aw-table { margin: 0.5rem 0 0.25rem; border-collapse: collapse; } .aw-table td { padding: 0.15rem 1rem 0.15rem 0; color: var(--fg); font-size: 0.92em; } .aw-table td:last-child { text-align: right; white-space: nowrap; }