/* * Гермес использует две палитры: ночная мастерская (по умолчанию) и дневная. * Тема выбирается атрибутом data-hermes-theme на ; все цвета интерфейса * обязаны браться из токенов ниже, иначе вторая тема их не увидит. */ :root, :root[data-hermes-theme="dark"] { color-scheme: dark; /* поверхности */ --hermes-bg: #171718; --hermes-bg-2: #1d1d1f; --hermes-panel: #222225; --hermes-panel-soft: #252427; --hermes-panel-strong: #29282b; --hermes-panel-raised: #2e2d32; --hermes-panel-hi: #35343a; --hermes-panel-deep: #1f1a29; --hermes-bubble-user: #2b292d; --hermes-bg-2-rgb: 29 29 31; --hermes-panel-rgb: 34 34 38; --hermes-panel-raised-rgb: 41 41 45; /* поверхности мобильной раскладки — намеренно нейтрально-серые */ --hermes-m-bg: #0d0d0d; --hermes-m-rail: #111111; --hermes-m-raise: #202020; --hermes-m-active: #242424; --hermes-m-hover: #2c2c2c; --hermes-inverse-bg: #f1f1f1; --hermes-inverse-bg-hi: #ffffff; --hermes-inverse-ink: #111111; --hermes-disabled-bg: #454545; --hermes-disabled-ink: #9d9d9d; /* текст */ --hermes-text: #f4f1f3; --hermes-muted: #c7c2c6; --hermes-dim: #a29ca5; --hermes-soft: #999398; --hermes-ink-rgb: 244 241 243; /* акцент */ --hermes-accent: #908498; --hermes-accent-2: #c2b9c5; --hermes-accent-hi: #a294ad; --hermes-accent-ink: #171718; --hermes-accent-rgb: 144 132 152; --hermes-warm: #908498; /* линии; альфа множится на --hermes-line-a, потому что на светлых поверхностях та же прозрачность даёт заметно меньший контраст */ --hermes-line-a: 1; --hermes-line: rgb(var(--hermes-ink-rgb) / calc(0.1 * var(--hermes-line-a))); --hermes-line-strong: rgb(var(--hermes-accent-rgb) / 0.38); /* статусы */ --hermes-success: #9caf82; --hermes-success-ink: #cfddb7; --hermes-success-bg: #1c2118; --hermes-success-rgb: 183 216 137; --hermes-online: #75c59f; --hermes-online-rgb: 117 197 159; --hermes-danger: #d7847d; --hermes-danger-ink: #e8aaa5; --hermes-danger-ink-hi: #ffb8b8; --hermes-danger-bg: #251716; --hermes-danger-rgb: 255 107 107; --hermes-warn: #df987d; --hermes-warn-ink: #e7a994; --hermes-warn-rgb: 223 152 125; --hermes-amber-rgb: 232 188 125; --hermes-rec-bg-rgb: 154 72 68; --hermes-rec-ink: #ffd0ca; --hermes-rec-ink-hi: #ffe5df; --hermes-dot-idle: #766d81; --hermes-dot-idle-rgb: 112 104 96; /* элементы управления */ --hermes-switch-track: #2d2d31; --hermes-switch-track-on: #756b7d; --hermes-switch-knob: #aaa5ad; --hermes-switch-knob-on: #f4f1f3; /* тени и подложки */ --hermes-shadow-rgb: 0 0 0; --hermes-shadow-a: 1; --hermes-scrim: rgb(0 0 0 / 0.68); --hermes-scrim-strong: rgb(8 7 6 / 0.76); --hermes-image-bg: rgb(0 0 0 / 0.2); font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; font-synthesis: none; } :root[data-hermes-theme="light"] { color-scheme: light; --hermes-bg: #f3f2f6; --hermes-bg-2: #eae8ef; --hermes-panel: #ffffff; --hermes-panel-soft: #f7f6fa; --hermes-panel-strong: #f0eef5; --hermes-panel-raised: #e7e4ee; --hermes-panel-hi: #ded9ea; --hermes-panel-deep: #efecf6; --hermes-bubble-user: #e8e3f3; --hermes-bg-2-rgb: 234 232 239; --hermes-panel-rgb: 255 255 255; --hermes-panel-raised-rgb: 231 228 238; --hermes-m-bg: #f4f4f7; --hermes-m-rail: #ffffff; --hermes-m-raise: #eceaf1; --hermes-m-active: #e3e0ea; --hermes-m-hover: #e6e3ec; --hermes-inverse-bg: #221f2b; --hermes-inverse-bg-hi: #322d40; --hermes-inverse-ink: #ffffff; --hermes-disabled-bg: #dcd9e3; --hermes-disabled-ink: #726d80; --hermes-text: #1a1820; --hermes-muted: #3d3947; --hermes-dim: #5a5568; --hermes-soft: #645f70; --hermes-ink-rgb: 32 26 48; --hermes-line-a: 1.75; --hermes-accent: #6a5f80; --hermes-accent-2: #574c6d; --hermes-accent-hi: #564b6e; --hermes-accent-ink: #ffffff; --hermes-accent-rgb: 106 95 128; --hermes-warm: #6a5f80; --hermes-success: #4f7a35; --hermes-success-ink: #3c5c1f; --hermes-success-bg: #edf4e3; --hermes-success-rgb: 106 143 60; --hermes-online: #1c8b60; --hermes-online-rgb: 28 139 96; --hermes-danger: #b1453c; --hermes-danger-ink: #9a2a21; --hermes-danger-ink-hi: #a8302a; --hermes-danger-bg: #fdeceb; --hermes-danger-rgb: 192 66 56; --hermes-warn: #a75a29; --hermes-warn-ink: #93481d; --hermes-warn-rgb: 186 108 56; --hermes-amber-rgb: 190 138 52; --hermes-rec-bg-rgb: 208 76 64; --hermes-rec-ink: #8f241c; --hermes-rec-ink-hi: #7a1a13; --hermes-dot-idle: #7d7490; --hermes-dot-idle-rgb: 125 116 144; --hermes-switch-track: #e6e3ee; --hermes-switch-track-on: #6a5f80; --hermes-switch-knob: #7e7989; --hermes-switch-knob-on: #ffffff; --hermes-shadow-rgb: 40 30 70; --hermes-shadow-a: 0.4; --hermes-scrim: rgb(30 24 46 / 0.38); --hermes-scrim-strong: rgb(30 24 46 / 0.44); --hermes-image-bg: rgb(26 22 40 / 0.06); } html { min-height: 100%; background: var(--hermes-bg); scroll-behavior: smooth; } body { min-height: 100%; margin: 0; color: var(--hermes-text); background: var(--hermes-bg); font-family: "Segoe UI Variable", "Segoe UI", system-ui, sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } *, *::before, *::after { box-sizing: border-box; } button, input, select, textarea { font: inherit; } a, .btn-link { color: var(--hermes-accent-2); } ::selection { color: var(--hermes-accent-ink); background: var(--hermes-accent); } :focus-visible { outline: 2px solid var(--hermes-accent); outline-offset: 3px; } .btn-primary { color: var(--hermes-accent-ink); border-color: var(--hermes-accent); background-color: var(--hermes-accent); } .content { padding-top: 1rem; } .valid.modified:not([type="checkbox"]) { outline: 1px solid var(--hermes-success); } .invalid { outline: 1px solid var(--hermes-danger); } .validation-message { color: var(--hermes-danger-ink); } #blazor-error-ui { position: fixed; right: 1rem; bottom: 1rem; left: 1rem; z-index: 20; display: none; width: min(36rem, calc(100% - 2rem)); margin-inline: auto; padding: 0.85rem 3rem 0.85rem 1rem; color: var(--hermes-text); border: 1px solid var(--hermes-line); border-radius: 12px; background: var(--hermes-panel-strong); box-shadow: 0 20px 48px rgb(var(--hermes-shadow-rgb) / calc(0.28 * var(--hermes-shadow-a))); font-size: 0.88rem; } #blazor-error-ui .reload { margin-left: 0.35rem; font-weight: 700; } #blazor-error-ui .dismiss { position: absolute; top: 50%; right: 0.85rem; display: grid; width: 1.7rem; height: 1.7rem; place-items: center; padding: 0; border: 0; border-radius: 8px; color: var(--hermes-muted); background: transparent; cursor: pointer; transform: translateY(-50%); } .blazor-error-boundary { padding: 1rem 1rem 1rem 1.2rem; color: var(--hermes-danger-ink); border: 1px solid rgb(var(--hermes-danger-rgb) / 0.34); border-left: 3px solid var(--hermes-danger); border-radius: 12px; background: var(--hermes-danger-bg); } .blazor-error-boundary::after { content: "Не удалось отобразить этот раздел."; } #app { min-height: 100dvh; } .loading-shell { position: fixed; inset: 0; display: grid; grid-template-columns: minmax(0, 20rem); place-content: center; justify-items: center; padding: 2rem; text-align: center; background: var(--hermes-bg); } .loading-brandmark { display: grid; width: 3.25rem; height: 3.25rem; margin-bottom: 0.8rem; place-items: center; color: var(--hermes-accent-ink); border-radius: 12px; background: var(--hermes-accent); box-shadow: 0 14px 34px rgb(var(--hermes-shadow-rgb) / calc(0.24 * var(--hermes-shadow-a))); font-size: 1.15rem; font-weight: 800; } .loading-kicker, .loading-label { margin: 0; } .loading-kicker { color: var(--hermes-text); font-size: 1.05rem; font-weight: 750; letter-spacing: -0.02em; } .loading-label { margin-top: 0.22rem; color: var(--hermes-muted); font-size: 0.78rem; } .loading-progress { grid-row: 4; grid-column: 1; display: block; width: 3.4rem; height: 3.4rem; margin-top: 1.2rem; } .loading-progress circle { fill: none; stroke: rgb(var(--hermes-ink-rgb) / calc(0.1 * var(--hermes-line-a))); stroke-width: 0.38rem; transform: rotate(-90deg); transform-origin: 50% 50%; } .loading-progress circle:last-child { stroke: var(--hermes-accent); stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; } .loading-progress-text { grid-row: 4; grid-column: 1; align-self: center; justify-self: center; margin-top: 1.2rem; color: var(--hermes-muted); font-size: 0.58rem; font-variant-numeric: tabular-nums; font-weight: 700; } .loading-progress-text::after { content: var(--blazor-load-percentage-text, "Загрузка"); } code { color: var(--hermes-accent-2); } /* * Ответ агента приходит Markdown-ом и превращается в HTML уже в компоненте, поэтому scope-атрибута * изоляции у этих узлов нет — правила обязаны жить в глобальном файле, иначе не применятся. */ .message-markdown { /* min-width:0 обязателен: без него таблица или длинный код растягивают пузырь и весь диалог */ min-width: 0; color: inherit; font-size: 0.9375rem; line-height: 1.65; overflow-wrap: anywhere; } .message-markdown > :first-child { margin-top: 0; } .message-markdown > :last-child { margin-bottom: 0; } .message-markdown p { margin: 0.55em 0; } .message-markdown h1, .message-markdown h2, .message-markdown h3, .message-markdown h4, .message-markdown h5, .message-markdown h6 { margin: 0.95em 0 0.4em; color: var(--hermes-text); font-weight: 730; letter-spacing: -0.01em; line-height: 1.3; } .message-markdown h1 { font-size: 1.18rem; } .message-markdown h2 { font-size: 1.09rem; } .message-markdown h3 { font-size: 1.01rem; } .message-markdown h4, .message-markdown h5, .message-markdown h6 { font-size: 0.95rem; } .message-markdown ul, .message-markdown ol { margin: 0.55em 0; padding-left: 1.3rem; } .message-markdown li { margin: 0.24em 0; } .message-markdown li > p { margin: 0.2em 0; } .message-markdown li::marker { color: var(--hermes-soft); } .message-markdown ul.contains-task-list { padding-left: 0.15rem; list-style: none; } .message-markdown .task-list-item input { margin-right: 0.45rem; accent-color: var(--hermes-accent); } .message-markdown a { color: var(--hermes-accent-2); text-decoration: underline; text-underline-offset: 0.16em; } /* Ссылку с посторонней схемой рендерер обезвредил — она не должна выглядеть кликабельной. */ .message-markdown a:not([href]), .message-markdown a[href=""] { color: inherit; text-decoration: none; } .message-markdown strong { color: var(--hermes-text); font-weight: 730; } .message-markdown code { padding: 0.08em 0.32em; color: var(--hermes-accent-2); border-radius: 5px; background: rgb(var(--hermes-accent-rgb) / 0.16); font-family: "JetBrains Mono", "Cascadia Code", ui-monospace, monospace; font-size: 0.86em; } .message-markdown pre { margin: 0.65em 0; padding: 0.7rem 0.8rem; overflow-x: auto; border: 1px solid var(--hermes-line); border-radius: 9px; background: var(--hermes-panel-soft); } .message-markdown pre code { padding: 0; color: var(--hermes-text); background: transparent; font-size: 0.82rem; line-height: 1.5; white-space: pre; } .message-markdown blockquote { margin: 0.65em 0; padding: 0.1em 0 0.1em 0.75rem; color: var(--hermes-dim); border-left: 2px solid rgb(var(--hermes-accent-rgb) / 0.5); } .message-markdown hr { margin: 0.95em 0; border: 0; border-top: 1px solid var(--hermes-line); } /* display:block даёт таблице собственную прокрутку — широкая таблица не растягивает диалог. */ .message-markdown table { display: block; width: max-content; max-width: 100%; margin: 0.65em 0; overflow-x: auto; border-spacing: 0; font-size: 0.875rem; } .message-markdown th, .message-markdown td { padding: 0.36rem 0.6rem; border-bottom: 1px solid var(--hermes-line); text-align: left; } .message-markdown thead th { color: var(--hermes-text); border-bottom: 1px solid rgb(var(--hermes-ink-rgb) / calc(0.22 * var(--hermes-line-a))); font-weight: 720; } .message-markdown tbody tr:last-child th, .message-markdown tbody tr:last-child td { border-bottom: 0; } .message-markdown img { max-width: 100%; height: auto; border-radius: 9px; } /* Внутри свёрнутого хода мысли текст тише: это рабочие заметки, а не ответ. */ .message-thinking__step .message-markdown { color: var(--hermes-soft); font-size: 0.84rem; line-height: 1.55; } .message-thinking__step .message-markdown p { margin: 0.35em 0; } .message-thinking__step .message-markdown strong, .message-thinking__step .message-markdown h1, .message-thinking__step .message-markdown h2, .message-thinking__step .message-markdown h3, .message-thinking__step .message-markdown h4, .message-thinking__step .message-markdown h5, .message-thinking__step .message-markdown h6 { color: var(--hermes-dim); font-size: 0.86rem; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }