/* Source Serif 4 (Adobe, SIL Open Font License 1.1, текст лицензии — fonts/SourceSerif4-LICENSE.md).
Шрифт ответов: латиница и кириллица, три начертания. */
@font-face {
font-family: "Source Serif 4";
src: url("/static/ai/fonts/SourceSerif4-Regular.a82c1833867a.woff2") format('woff2');
font-weight: 400;
font-style: normal;
font-display: swap;
}
@font-face {
font-family: "Source Serif 4";
src: url("/static/ai/fonts/SourceSerif4-It.1d809c22e189.woff2") format('woff2');
font-weight: 400;
font-style: italic;
font-display: swap;
}
@font-face {
font-family: "Source Serif 4";
src: url("/static/ai/fonts/SourceSerif4-Semibold.e4098d9c4171.woff2") format('woff2');
font-weight: 600 700;
font-style: normal;
font-display: swap;
}
/* ===== Тема: тёмная, спокойная, читаемая =====
Все цвета и шрифты сайта берутся отсюда: меняйте значения тут, а не в правилах ниже. */
:root {
--bg: #1b1a19;
--surface: #262523;
--surface-2: #302f2c;
--border: rgba(var(--wash), 0.08);
--border-strong: rgba(var(--wash), 0.16);
--text: #ece9e3;
--text-2: #a9a59d;
--accent: #7fb2ff;
--accent-rgb: 127, 178, 255;
--font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-read: "Source Serif 4", "Iowan Old Style", Charter, Georgia, "Noto Serif", "Times New Roman", serif;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: var(--font-ui);
}
body {
background-color: var(--bg);
background-image: url("/static/ai/bg-image-1.45997a6a5c1b.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
background-attachment: fixed;
position: relative;
min-height: 100vh;
display: flex;
flex-direction: column;
}
@media (max-width: 768px) {
body {
background-image: url("/static/ai/bg-image-mobile-1.341a404c2104.png");
}
body::before {
background-image: url("/static/ai/bg-image-mobile-2.ea74667cd070.png");
}
}
body::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100vh;
background-image: url("/static/ai/bg-image-2.a83518e72afd.png");
background-repeat: no-repeat;
background-size: 100% auto;
background-position: top center;
background-attachment: fixed;
opacity: 0.5;
z-index: 0;
}
.navbar {
background: var(--surface);
padding: 1rem 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
width: 100%;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 20px;
}
.navbar-brand img {
height: 32px;
width: auto;
}
.navbar .navbar-brand a {
text-decoration: none;
transition: color 0.3s ease;
white-space: nowrap;
color: var(--ink);
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.navbar .navbar-brand a:hover {
color: var(--ink-1);
}
.navbar-menu {
display: flex;
align-items: center;
gap: 40px;
}
.navbar-menu a:not(.purchase-btn) {
text-decoration: none;
transition: color 0.3s ease;
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.navbar-menu a:not(.purchase-btn):hover {
color: var(--ink-1);
}
.navbar-menu a.purchase-btn {
font-family: var(--font-ui);
display: inline-block;
padding: 10px 32px;
color: #000000;
font-weight: 700;
font-size: 18px;
text-decoration: none;
line-height: 21px;
transition: transform 0.1s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 4px 15px rgba(146, 188, 250, 0.3);
margin-left: 10px;
height: 40px;
flex-shrink: 0;
border-radius: 24px;
background: linear-gradient(180deg, #BDE3FB 0%, #92BCFA 100%);
}
.navbar-menu a.purchase-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(146, 188, 250, 0.4);
opacity: 0.9;
color: #000000;
text-decoration: none !important;
}
.navbar-menu a.purchase-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(146, 188, 250, 0.2);
opacity: 0.8;
}
.navbar-toggle {
display: none;
font-size: 1.25rem;
background: none;
border: none;
cursor: pointer;
color: var(--ink-hi);
padding: 0;
width: 32px;
height: 32px;
line-height: 32px;
text-align: center;
-webkit-tap-highlight-color: transparent;
outline: none;
}
.navbar-toggle:active, .navbar-toggle:focus {
background: none;
color: var(--ink-1);
}
@media (max-width: 768px) {
.navbar-menu a:not(.purchase-btn) {
font-family: var(--font-ui);
font-size: 24px;
padding-top: 1rem;
}
.navbar-menu a:not(.purchase-btn):hover {
color: var(--ink-1);
}
.navbar-menu a.purchase-btn {
font-family: var(--font-ui);
font-size: 24px;
margin-top: 1rem;
margin-bottom: 1rem;
}
.navbar-menu a.purchase-btn {
margin-left: 0;
max-width: 50%;
}
}
.content-wrapper {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex-grow: 1;
width: 100%;
}
.container {
width: 100%;
max-width: 1024px;
box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
padding: 2rem;
position: relative;
z-index: 1;
margin: 20px 0;
border-radius: 32px;
border: 4px solid var(--border-strong);
background: var(--surface);
}
#ai-form-container {
background: none; /* Убираем фон */
border-radius: 0; /* Убираем скругление */
box-shadow: none; /* Убираем тень */
border: none; /* Убираем границу */
text-align: center;
position: sticky;
top: 20px; /* Отступ от верха при прокрутке */
z-index: 10;
padding: 10px;
}
.compact-container {
max-width: 600px;
padding: 50px;
}
@media (max-width: 768px) {
#ai-form-container {
width: 100%;
max-width: none; /* Убираем ограничение max-width */
margin: 0; /* Убираем внешние отступы */
padding: 0; /* Уменьшаем внутренние отступы для мобильных */
box-sizing: border-box; /* Учитываем padding в ширине */
}
/* Убираем влияние content-wrapper на ширину */
.content-wrapper {
padding: 0; /* Убираем возможные отступы */
width: 100%; /* Убеждаемся, что родитель тоже на всю ширину */
}
.compact-container {
max-width: 600px;
padding: 40px;
}
}
.login-container {
width: 542px;
height: auto;
flex-shrink: 0;
border-radius: 32px;
border: 4px solid var(--border-strong);
background: var(--surface);
display: flex; /* Включаем Flexbox */
flex-direction: column; /* Располагаем содержимое вертикально */
justify-content: center; /* Центрируем по вертикали */
align-items: center; /* Центрируем по горизонтали */
color: var(--ink);
}
h1 {
color: var(--ink);
text-align: center;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: #000;
font-family: var(--font-ui);
font-size: 56px;
font-style: normal;
font-weight: 900;
line-height: normal;
margin-bottom: 60px;
}
@media (max-width: 768px) {
h1 {
font-size: 36px;
}
}
h2 {
color: var(--ink);
text-align: center;
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.left-text {
text-align: left;
padding-left: 0;
}
.info-text {
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 125% */
}
.info-button {
text-align: center;
margin-top: 50px;
margin-bottom: 50px;
width: 100%;
}
.contacts-separator {
padding-bottom: 45px;
padding-top: 10px;
}
.input-form {
display: flex;
flex-direction: column;
}
/* Добавляем более специфичный стиль для формы с кнопкой */
form.input-form button {
margin-top: 60px; /* Явно задаём расстояние сверху для кнопки */
}
.input-form textarea,
.input-form input {
width: 70%;
height: 70px;
padding-left: 32px;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 16px;
border-radius: 32px;
border: 3px solid var(--border-strong);
background: var(--surface);
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
resize: none;
min-height: 40px;
overflow: hidden;
box-sizing: border-box;
}
.input-form textarea:focus,
.input-form input:focus {
box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.35);
color: var(--ink);
}
/* Отдельный стиль для формы логина */
.login-form {
display: flex;
flex-direction: column;
}
.login-form textarea,
.login-form input {
width: 100%;
height: 56px;
padding: 12px 16px;
border-radius: 32px;
border: 3px solid var(--border-strong);
background: var(--surface);
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
resize: none;
min-height: 40px;
overflow: hidden;
margin-top: 1rem;
margin-bottom: 2.5rem;
}
.login-container h2 {
margin-bottom: 2.5rem;
}
@media (max-width: 768px) {
.login-form {
width: 100%;
}
.login-form textarea,
.login-form input {
width: 100%;
}
}
.login-form textarea:focus,
.login-form input:focus {
box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.35);
color: var(--ink);
}
.form-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.form-group label {
color: var(--ink);
font-family: var(--font-ui);
font-size: 1rem;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-left: 1rem;
}
.follow-up-container {
margin-top: 1.5rem;
padding: 1rem;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
animation: fadeIn 0.3s ease-in;
border-radius: 40px;
border: 4px solid var(--surface-2);
background: var(--surface-2);
}
@media (max-width: 768px) {
.follow-up-container {
background: none; /* Убираем фон */
border: none; /* Убираем границы */
box-shadow: none; /* Убираем тень */
padding: 0; /* Убираем внутренние отступы */
margin-top: 0; /* Оставляем небольшой отступ сверху */
border-radius: 0; /* Убираем скругление */
width: 100%; /* Убеждаемся, что занимает всю ширину */
}
}
.follow-up-container form {
display: flex;
flex-direction: column;
gap: 10px;
}
.textarea-wrapper {
position: relative; /* Относительное позиционирование для дочерних элементов */
width: 100%; /* Занимает всю ширину .follow-up-container */
}
.follow-up-container .input-form textarea {
width: calc(100% - 80px);
border: 4px solid var(--border-strong);
background: var(--surface);
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 700;
line-height: normal;
padding-top: 20px;
padding-bottom: 20px;
padding-right: 60px;
padding-left: 40px;
margin-top: 20px;
}
.follow-up-container .arrow-btn {
position: absolute;
right: 56px; /* Отступ от правой границы */
bottom: 14px; /* Отступ от нижнего края */
width: 40px; /* Фиксируем размер кнопки */
height: 40px;
padding: 0; /* Убираем внутренние отступы, чтобы SVG занимал всё пространство */
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.3s ease;
background: var(--panel-alt);
}
@media (max-width: 768px) {
.input-form textarea,
.input-form input {
width: calc(100% - 20px);
}
.follow-up-container .input-form textarea {
width: 100%;
border: 2px solid var(--border-strong);
padding-top: 20px;
padding-bottom: 20px;
padding-right: 60px;
padding-left: 20px;
margin-top: 20px;
}
.follow-up-container .arrow-btn {
right: 16px; /* Отступ от правой границы */
}
}
/* Стили для SVG внутри кнопки */
.follow-up-container .arrow-btn svg {
width: 24px; /* Размер иконки */
height: 24px;
}
button {
width: 318px;
height: 56px;
flex-shrink: 0;
padding: 10px 32px;
border-radius: 24px;
background: linear-gradient(180deg, #BDE3FB 0%, #92BCFA 100%);
border: none;
cursor: pointer;
transition: transform 0.1s ease, opacity 0.3s ease;
color: #000;
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
@media (max-width: 768px) {
button {
width: 237px;
height: 56px;
flex-shrink: 0;
}
}
button:hover {
opacity: 0.9;
}
button:active {
transform: scale(0.98);
opacity: 0.8;
}
button:disabled {
background: linear-gradient(180deg, rgba(189, 227, 251, 0.50) 0%, rgba(146, 188, 250, 0.50) 100%);
cursor: not-allowed;
}
.arrow-btn {
width: 40px;
height: 40px;
padding: 0;
border-radius: 50%;
font-size: 1.2rem;
display: flex;
align-items: center;
justify-content: center;
align-self: flex-end;
}
.clear-btn {
width: 100%;
padding: 10px;
background: #e74c3c;
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 500;
cursor: pointer;
transition: background 0.3s ease;
margin-top: 15px;
}
.clear-btn:hover {
background: #c0392b;
}
.question-box {
width: calc(100% - 80px); /* 100px = 50px слева + 50px справа */
margin: 30px 40px 40px 40px;
padding: 40px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
animation: fadeIn 0.3s ease-in;
color: rgba(var(--ink-hi-rgb), 0.9);
border-radius: 32px;
border: 4px solid var(--border-strong);
background: var(--surface);
}
.question-box h3 {
margin-bottom: 0.5rem;
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
}
.question-box p {
margin-bottom: 0;
text-align: left;
color: rgba(var(--ink-rgb), 0.9);
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
@media (max-width: 768px) {
.question-box {
width: 100%;
margin: 0;
margin-bottom: 10px;
padding: 18px;
border: 2px solid var(--border-strong);
}
.question-box h3 {
font-size: 18px;
}
.question-box p {
font-size: 18px;
}
}
.answer-box {
width: calc(100% - 80px); /* 100px = 50px слева + 50px справа */
margin: 30px 40px 40px 40px;
padding: 40px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
position: relative;
animation: fadeIn 0.3s ease-in;
overflow-x: auto;
color: rgba(var(--ink-hi-rgb), 0.9);
text-align: left;
border-radius: 32px;
border: 4px solid var(--border-strong);
background: var(--surface);
}
.answer-box h2 {
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
margin-bottom: 1rem;
}
#answer_title {
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
margin-bottom: 0.5rem;
}
.answer-box hr {
margin-bottom: 1rem;
}
.answer-box h1 {
font-size: 1.8rem;
margin: 1rem 0 0.5rem;
color: rgba(var(--ink-hi-rgb), 0.9);
}
.answer-box h4 {
font-family: var(--font-ui);
font-size: 1.25rem;
color: rgba(var(--ink-hi-rgb), 0.9);
margin-bottom: 1rem;
}
.answer-box p {
margin-bottom: 1rem;
color: rgba(var(--wash), 0.90);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 30px;
}
.answer-box ul, .answer-box ol {
margin: 0 0 1rem 2rem;
color: rgba(var(--ink-hi-rgb), 0.9);
font-family: var(--font-ui);
font-size: 18px;
line-height: 30px;
}
/* Стили для таблиц в ответах AI */
.answer-box table {
width: 100%;
border-collapse: collapse;
margin: 1rem 0;
background: var(--surface-2);
border: rgba(var(--wash), 0.20);
border-radius: 8px;
overflow: hidden;
}
.answer-box th,
.answer-box td {
padding: 12px 16px;
text-align: left;
color: rgba(var(--ink-rgb), 0.9);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 400;
line-height: 24px;
border-bottom: 1px solid rgba(var(--wash), 0.1);
}
.answer-box th {
background: var(--panel-alt);
color: rgba(var(--ink-hi-rgb), 0.9);
font-weight: 700;
font-size: 18px;
}
.answer-box tr:last-child td {
border-bottom: none;
}
.answer-box tr:hover {
background: rgba(var(--accent-rgb), 0.05);
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.answer-box table {
font-size: 14px;
}
.answer-box th,
.answer-box td {
padding: 8px 12px;
font-size: 14px;
}
.answer-box th {
font-size: 16px;
}
}
/* Стили для гиперссылок в тексте */
.source-link {
color: #3498dbE6;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.source-link:hover {
color: #2980b9;
text-decoration: none; /* Убираем подчёркивание при наведении */
}
.source-link:active {
color: #1f6391;
}
.markdown-content .source-link {
font-size: inherit;
vertical-align: baseline;
}
/* Стили для кружочков с номерами */
.citation-circle {
display: inline-block;
width: 20px; /* Размер кружочка */
height: 20px;
line-height: 20px; /* Центрируем число по вертикали */
text-align: center;
background: rgba(102, 161, 255, 0.30);
color: var(--ink-hi); /* Белый цвет текста */
border-radius: 50%; /* Делаем круг */
font-size: 12px; /* Размер текста внутри кружочка */
font-weight: 700;
transition: background 0.3s ease; /* Плавное изменение фона */
}
/* Голубой фон при наведении */
.source-link:hover .citation-circle {
background: rgba(102, 161, 255, 1)
}
.answer-box li {
margin-bottom: 0.5rem;
font-family: var(--font-ui);
font-size: 18px;
}
/* Стили для блоков кода */
.answer-box pre {
background: var(--panel-alt);
padding: 1rem;
border-radius: 8px;
overflow-x: auto;
margin-bottom: 1rem;
color: rgba(var(--ink-hi-rgb), 0.9); /* Базовый цвет для текста вне Highlight.js */
position: relative;
}
.answer-box code {
background: none; /* Для inline-кода */
padding: 0;
color: rgba(var(--ink-hi-rgb), 0.9); /* Цвет для inline-кода */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* Стили для Highlight.js */
.answer-box .highlight {
background: var(--panel-alt);
color: rgba(var(--ink-hi-rgb), 0.9); /* Базовый цвет, если подсветка не применяется */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* Увеличиваем специфичность для подсветки синтаксиса */
.answer-box .highlight .hljs-keyword,
.answer-box .highlight .hljs-selector-tag,
.answer-box .highlight .hljs-built_in,
.answer-box .highlight .hljs-name,
.answer-box .highlight .hljs-tag {
color: var(--accent-text)E6 !important; /* Голубой для ключевых слов */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.answer-box .highlight .hljs-string,
.answer-box .highlight .hljs-title,
.answer-box .highlight .hljs-section,
.answer-box .highlight .hljs-attribute,
.answer-box .highlight .hljs-symbol,
.answer-box .highlight .hljs-regexp,
.answer-box .highlight .hljs-link {
color: #98C379E6 !important; /* Зелёный для строк */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.answer-box .highlight .hljs-number,
.answer-box .highlight .hljs-literal {
color: #D19A66E6 !important; /* Оранжевый для чисел */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.answer-box .highlight .hljs-comment,
.answer-box .highlight .hljs-deletion,
.answer-box .highlight .hljs-doctag {
color: #5C6370E6 !important; /* Серый для комментариев */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.answer-box .highlight .hljs-function {
color: #C678DDE6 !important; /* Фиолетовый для функций */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
.answer-box .highlight .hljs-class,
.answer-box .highlight .hljs-type,
.answer-box .highlight .hljs-template-variable,
.answer-box .highlight .hljs-variable.language_ {
color: #E5C07BE6 !important; /* Жёлтый для классов и типов */
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.answer-box pre {
padding: 0.5rem;
}
.answer-box code {
font-size: 14px;
}
.answer-box .highlight {
font-size: 14px;
font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, monospace;
}
}
.answer-box blockquote {
border-left: 4px solid #3498db;
padding: 0.5rem 1rem;
color: #D0D0D0E6;
margin: 1rem 0;
background: #333536;
}
@media (max-width: 768px) {
.answer-box {
width: 100%;
margin: 0;
margin-bottom: 10px;
padding: 18px;
border: 2px solid var(--border-strong);
}
.answer-box h2 {
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
text-align: left;
margin-bottom: 1rem;
}
.answer-box h3 {
font-size: 20px;
}
.answer-box p {
font-size: 18px;
}
}
.loading-indicator {
display: none;
text-align: center;
margin-top: 30px;
}
.loading-indicator span {
display: inline-block;
width: 8px;
height: 8px;
background: #3498dbE6;
border-radius: 50%;
margin: 0 4px;
animation: bounce 0.6s infinite alternate;
}
.loading-indicator span:nth-child(2) {
animation-delay: 0.2s;
}
.loading-indicator span:nth-child(3) {
animation-delay: 0.4s;
}
.history-item {
border-radius: 8px;
margin-bottom: 40px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
border: 2px solid transparent;
cursor: pointer;
transition: transform 0.2s ease, box-shadow 0.3s ease, border-color 0.3s ease;
color: var(--ink-hi);
}
.history-item-text {
color: var(--ink);
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: 26px; /* 133.333% */
margin-bottom: 10px;
}
.history-item strong,
.history-item br + strong,
.history-item br + span {
color: var(--ink-hi);
}
.history-item br {
display: block;
margin: 5px 0;
}
.history-item p {
color: var(--ink);
font-family: var(--font-ui);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.history-item:hover {
transform: translateY(-2px);
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.action-buttons {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 0 14px;
}
.action-btn {
background: none;
border: 1px solid #e0e0e0;
border-radius: 8px;
padding: 8px 12px;
cursor: pointer;
display: inline-flex;
align-items: center;
font-size: 0.9rem;
color: var(--ink-hi);
transition: border-color 0.3s ease, color 0.3s ease;
}
.action-btn:hover {
border-color: rgba(52, 152, 219, 0.5);
}
.action-btn:active {
border-color: #2980b9;
color: #2980b9;
}
.share-btn,
.pdf-btn {
display: inline-flex; /* Используем inline-flex вместо flex, чтобы ширина подстраивалась под содержимое */
align-items: center;
width: auto;
border-radius: 16px;
border: 3px solid var(--border-strong);
background: var(--surface);
color: var(--ink);
font-family: var(--font-ui);
font-size: 16px;
font-style: normal;
font-weight: 590;
line-height: normal;
padding-left: 20px;
margin-bottom: 20px;
margin-top: 40px;
}
.share-btn svg,
.pdf-btn svg {
width: 2rem; /* Размер иконки */
height: 2rem;
}
.download-btn::before {
content: "↓";
font-size: 1rem;
}
.quote-container {
text-align: center;
color: var(--ink-hi);
min-height: 200px; /* Подберите значение, достаточное для самой длинной цитаты */
display: flex;
flex-direction: column;
align-items: center;
padding: 20px;
margin: 20px 0;
}
.quote-container .loading-indicator {
display: block;
margin-bottom: 40px;
margin-top: 30px;
}
.quote-text {
margin-bottom: 5px;
animation: fadeInOut 4s infinite;
color: rgba(var(--ink-rgb), 0.8);
text-align: center;
font-family: var(--font-ui);
font-size: 16px;
font-style: italic;
font-weight: 700;
line-height: normal;
}
.quote-author {
animation: fadeInOut 4s infinite;
color: rgba(var(--ink-rgb), 0.8);
font-family: var(--font-ui);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
}
.copy-btn {
position: absolute;
top: 5px;
right: 5px;
width: 24px;
height: 24px;
background: rgba(52, 152, 219, 0.8);
border: none;
border-radius: 4px;
cursor: pointer;
transition: background 0.3s ease;
z-index: 10;
padding: 0;
display: flex;
align-items: center;
justify-content: center;
}
.copy-btn::before {
content: url('data:image/svg+xml;utf8,');
display: block;
}
.copy-btn:hover {
background: rgba(41, 128, 185, 0.8);
}
.copy-btn:active {
background: rgba(31, 99, 145, 0.8);
}
.copy-btn.copied::before {
content: url('data:image/svg+xml;utf8,');
}
.answer-box h3 {
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 20px;
font-weight: 700;
margin-top: 1.5rem;
margin-bottom: 12px;
}
.register-link {
color: var(--ink);
font-family: var(--font-ui);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 2rem;
}
.register-link a {
color: var(--accent-text);
text-decoration: none;
transition: color 0.3s ease;
}
.register-link a:hover {
color: #2980b9;
text-decoration: underline;
}
.error-message {
color: #e74c3c;
text-align: center;
margin-top: 1rem;
font-size: 0.9rem;
}
.ai-access-message {
width: 100%;
margin-top: 40px;
padding: 15px;
text-align: center;
color: var(--ink-hi);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
border-radius: 32px;
border: 4px solid var(--border-strong);
background: var(--surface);
}
.ai-access-message p {
color: var(--ink);
text-align: center;
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 700;
line-height: normal;
margin-top: 16px;
}
.ai-access-message p a {
color: inherit;
text-decoration: underline;
}
.ai-access-message .purchase-btn {
display: inline-block;
padding: 10px 32px;
color: #000000;
font-weight: 700;
font-size: 18px;
line-height: 21px;
text-decoration: none;
transition: transform 0.1s ease, box-shadow 0.3s ease, opacity 0.3s ease;
box-shadow: 0 4px 15px rgba(146, 188, 250, 0.3);
border-radius: 24px;
background: linear-gradient(180deg, #BDE3FB 0%, #92BCFA 100%);
margin-top: 30px;
margin-bottom: 20px;
}
@media (max-width: 768px) {
.ai-access-message {
width: 100%;
margin-right: 0;
margin-left: 0;
}
.ai-access-message p {
font-size: 1rem;
}
}
.ai-access-message .purchase-btn:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(146, 188, 250, 0.4);
opacity: 0.9;
color: #000000;
}
.ai-access-message .purchase-btn:active {
transform: translateY(0);
box-shadow: 0 2px 10px rgba(146, 188, 250, 0.2);
opacity: 0.8;
}
.user-email {
text-align: center;
font-size: 24px;
font-weight: 700;
color: var(--accent-text);
margin: 0 0 1.5rem 0;
font-family: var(--font-ui);
padding: 0.3rem 1rem;
border-radius: 8px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}
@keyframes fadeInOut {
0% { opacity: 0; transform: translateY(10px); }
20% { opacity: 1; transform: translateY(0); }
80% { opacity: 1; transform: translateY(0); }
100% { opacity: 0; transform: translateY(-10px); }
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes bounce {
0% { transform: translateY(0); }
100% { transform: translateY(-10px); }
}
@media (max-width: 768px) {
.navbar {
padding: 0.5rem 1rem;
height: 48px;
align-items: center;
}
.navbar-brand {
display: flex;
align-items: center;
gap: 10px;
}
.navbar-brand img {
height: 28px;
}
.navbar .navbar-brand a {
color: var(--ink);
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.navbar-menu {
display: none;
flex-direction: column;
position: absolute;
top: 100%;
left: 0;
right: 0;
background: #1E2021;
padding: 1rem;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
gap: 10px;
align-items: flex-start;
}
.navbar-menu.active {
display: flex;
background: var(--surface);
}
.navbar-menu a.btn {
width: 100%;
text-align: center;
padding: 10px;
margin-left: 40px;
margin-top: 30px;
}
.navbar-menu a {
margin-left: 40px;
}
.navbar-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
color: var(--ink);
font-family: var(--font-ui);
font-size: 26px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.login-container {
margin-top: 5vh;
width: 100%;
}
.action-buttons {
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: center;
}
.action-btn {
padding: 8px 12px;
}
}
/* Стили для примеров вопросов */
.example-questions {
text-align: center;
margin-top: 50px;
color: #FFFFFFCC;
transition: opacity 0.3s ease, visibility 0.3s ease; /* Плавный переход */
opacity: 1;
height: auto; /* Позволяет сохранить естественную высоту */
}
.example-questions[style*="display: none"] {
opacity: 0;
transform: translateY(10px);
}
.example-questions[style*="opacity: 0"] {
height: auto; /* Сохраняем высоту */
visibility: hidden; /* Делаем невидимым, но сохраняем место */
}
.example-questions h2 {
color: rgba(var(--ink-rgb), 0.8);
font-family: var(--font-ui);
font-size: 20px;
font-weight: 900;
line-height: normal;
margin-bottom: 15px;
}
.example-text {
margin-bottom: 0;
animation: fadeInOut 4s infinite;
color: rgba(var(--ink-rgb), 0.8);
text-align: center;
font-family: var(--font-ui);
font-size: 16px;
font-style: normal;
font-weight: 400;
line-height: 24px;
padding: 0 20px;
max-width: 80%;
margin-left: auto;
margin-right: auto;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.example-questions {
margin-top: 40px;
}
.example-questions h2 {
font-size: 18px;
margin-bottom: 10px;
}
.example-text {
font-size: 14px;
max-width: 90%;
}
}
/* Стили для страницы контактов */
.contacts-content {
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
font-weight: 400;
line-height: 30px;
text-align: center;
padding: 2rem;
max-width: 800px;
margin: 0 auto;
}
.contacts-content p {
margin-bottom: 1.5rem;
}
.contacts-content .source-link {
color: #3498db;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.contacts-content .source-link:hover {
color: #2980b9;
}
.contacts-content .source-link:active {
color: #1f6391;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.contacts-content {
font-size: 16px;
line-height: 26px;
padding: 1rem;
}
.contacts-content p {
margin-bottom: 1rem;
}
}
/* Стили для страницы "О сервисе" */
.about-content {
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
font-weight: 400;
line-height: 30px;
text-align: left;
margin: 0 auto;
}
.about-content p {
margin-bottom: 1.5rem;
color: var(--ink);
font-family: var(--font-ui);
font-size: 18px;
font-style: normal;
font-weight: 400;
line-height: 26px; /* 144.444% */
}
.about-content ul {
margin: 1rem 0 1.5rem 2rem;
list-style-type: disc;
}
.about-content ul li {
margin-bottom: 0;
}
#description{
margin-bottom: 40px;
}
.about-content h2 {
color: var(--ink);
font-family: var(--font-ui);
font-size: 24px;
font-weight: 900;
margin: 2rem 0 1rem;
}
.about-content .source-link {
color: #3498db;
text-decoration: none;
font-weight: 500;
transition: color 0.3s ease;
}
.about-content .source-link:hover {
color: #2980b9;
}
.about-content .source-link:active {
color: #1f6391;
}
.about-content .btn.purchase-btn {
display: block;
margin: 2rem auto;
text-align: center;
max-width: 400px;
}
.about-gallery {
display: flex;
flex-direction: column; /* Вертикальное расположение */
gap: 2rem;
margin: 2rem 0;
}
.gallery-item {
text-align: center;
}
.about-image {
width: 100%; /* Занимает полную ширину контейнера */
height: auto;
border: 2px solid var(--border-strong);
display: block;
margin: 1rem auto 50px;
border-radius: 24px;
background: rgba(var(--accent-rgb), 0.10);
}
.signature {
text-align: left;
margin: 2rem 0;
color: var(--ink);
font-family: var(--font-ui);
font-size: 44px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.postscript {
font-family: var(--font-ui);
font-size: 16px;
color: var(--ink);
text-align: left;
margin-top: 1rem;
}
/* Адаптация для мобильных устройств */
@media (max-width: 768px) {
.about-content {
font-size: 16px;
line-height: 26px;
padding: 1rem;
padding-left: 0;
padding-right: 0;
}
.about-content h2 {
font-size: 20px;
margin: 1.5rem 0 0.8rem;
}
.about-content ul {
margin: 0.8rem 0 1.2rem 1.5rem;
}
.about-gallery {
gap: 1.5rem;
}
.about-image {
max-width: 100%;
margin-top: 0.8rem;
}
.signature, .postscript {
font-size: 14px;
}
.about-content .btn.purchase-btn {
max-width: 100%;
}
}
.share-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
}
.share-modal-content {
padding: 20px;
max-width: 90%;
width: 400px;
text-align: center;
font-family: var(--font-ui);
border-radius: 32px;
border: 2px solid var(--border-strong);
background: var(--surface);
}
.share-modal-content h3 {
margin: 0 0 10px;
color: var(--ink);
font-family: var(--font-ui);
font-size: 24px;
font-style: normal;
font-weight: 700;
line-height: normal;
}
.share-modal-content p {
margin: 0 0 15px;
color: var(--ink);
text-align: center;
font-family: var(--font-ui);
font-size: 16px;
font-style: normal;
font-weight: 700;
line-height: 24px; /* 150% */
}
.share-link-input {
width: 100%;
padding: 10px;
margin-bottom: 15px;
box-sizing: border-box;
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 14px;
font-style: normal;
font-weight: 400;
line-height: normal;
border-radius: 16px;
border: 3px solid var(--border-strong);
background: var(--surface);
}
.share-modal-buttons {
display: flex;
flex-direction: column; /* Вертикальная компоновка */
gap: 10px;
align-items: center;
}
.share-copy-btn, .share-close-btn {
padding: 10px 20px;
border: none;
border-radius: 4px;
font-size: 16px;
cursor: pointer;
width: 100%; /* Полная ширина для единообразия */
max-width: 200px;
}
.share-copy-btn {
border-radius: 24px;
background: linear-gradient(180deg, #BDE3FB 0%, #92BCFA 100%);
color: #000;
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.share-close-btn {
border-radius: 24px;
background: var(--surface-2);
color: #42B6FF;
font-family: var(--font-ui);
font-size: 20px;
font-style: normal;
font-weight: 900;
line-height: normal;
}
.notification {
position: fixed;
bottom: 30px;
left: 50%;
transform: translateX(-50%);
background: #333;
color: #fff;
padding: 15px 25px;
border-radius: 8px;
z-index: 10000; /* Увеличиваем z-index */
font-family: var(--font-ui);
font-size: 16px;
max-width: 90%;
text-align: center;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
}
@media (max-width: 768px) {
.share-modal-content {
width: 90%;
padding: 15px;
}
.share-link-input {
font-size: 12px;
}
}
/* Выбор модели AI */
.input-form .submit-row {
display: flex;
align-items: center;
justify-content: center;
flex-wrap: wrap;
gap: 16px;
margin-top: 60px;
}
.input-form .submit-row button {
margin: 0;
}
.model-select {
appearance: none;
-webkit-appearance: none;
height: 44px;
padding: 0 40px 0 20px;
border-radius: 22px;
border: 3px solid var(--border-strong);
background: var(--surface) url("data:image/svg+xml;utf8,") no-repeat right 16px center;
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 16px;
font-weight: 700;
cursor: pointer;
outline: none;
transition: border-color 0.3s ease, box-shadow 0.3s ease;
}
.model-select:hover,
.model-select:focus {
color: var(--ink);
box-shadow: 0 0 5px rgba(var(--accent-rgb), 0.35);
}
.model-select option {
background: var(--surface);
color: var(--ink);
}
.follow-up-container .model-row {
margin-top: 12px;
padding-left: 40px;
}
@media (max-width: 768px) {
.follow-up-container .model-row {
padding-left: 4px;
}
}
/* ===== Чат в стиле ассистентов: стартовый экран, карточка ввода, диалог ===== */
#ai-form-container {
max-width: 780px;
margin: 20px auto;
padding: 0 16px;
background: none;
border: none;
box-shadow: none;
border-radius: 0;
}
#ai-hero {
text-align: center;
margin: 7vh 0 28px;
}
#ai-hero h1 {
margin: 0 0 8px;
font-family: var(--font-ui);
font-size: 38px;
font-weight: 600;
-webkit-text-stroke: 0;
}
#ai-hero .hero-sub {
margin: 0;
color: rgba(var(--ink-rgb), 0.6);
font-size: 16px;
}
.composer {
background: var(--surface);
border: 1.5px solid var(--border-strong);
border-radius: 24px;
padding: 14px 14px 10px;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.composer:focus-within {
border-color: rgba(var(--accent-rgb), 0.6);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.input-form .composer textarea,
.follow-up-container .input-form .composer textarea {
display: block;
width: 100%;
height: auto;
min-height: 28px;
max-height: 240px;
margin: 0;
padding: 4px 6px;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--ink);
font-size: 17px;
font-weight: 400;
line-height: 1.5;
overflow-y: auto;
resize: none;
}
.composer-bar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
margin-top: 8px;
}
.composer .model-select {
height: 34px;
max-width: calc(100% - 52px);
padding: 0 32px 0 14px;
border-width: 1px;
border-radius: 17px;
background-color: transparent;
font-size: 13px;
text-overflow: ellipsis;
}
.input-form .composer .send-btn {
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 38px;
height: 38px;
margin: 0 0 0 auto;
padding: 0;
border-radius: 50%;
background: #92BCFA;
color: #0B1220;
}
.input-form .composer .send-btn:disabled {
opacity: 0.5;
cursor: default;
}
.example-questions {
margin-top: 16px;
}
.example-questions .chips {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
}
.input-form .chips .chip {
width: auto;
height: auto;
margin: 0;
padding: 8px 14px;
border: 1px solid rgba(var(--wash), 0.14);
border-radius: 16px;
background: transparent;
color: rgba(var(--ink-rgb), 0.8);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 400;
line-height: 1.3;
text-align: left;
}
.input-form .chips .chip:hover {
border-color: rgba(var(--accent-rgb), 0.5);
color: var(--ink);
}
/* Диалог: без «карточек в карточках» */
.conversation-container.follow-up-container {
margin: 0;
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
}
.question-box {
width: auto;
max-width: 85%;
margin: 24px 0 8px auto;
padding: 12px 18px;
border: none;
border-radius: 20px;
background: var(--surface-2);
box-shadow: none;
}
.question-box h3 {
display: none;
}
.question-box p {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
color: var(--ink);
}
.answer-box {
width: 100%;
margin: 8px 0 24px;
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
}
.answer-box > h2,
.answer-box > #answer_title {
display: none;
}
/* Поле ввода в диалоге закреплено внизу экрана */
.follow-up-container:not(.conversation-container) {
display: contents;
}
.follow-up-container:not(.conversation-container) > .input-form {
position: sticky;
bottom: 0;
z-index: 5;
margin: 0;
padding: 12px 0 16px;
background: linear-gradient(to top, var(--bg) 70%, transparent);
}
@media (max-width: 768px) {
#ai-hero {
margin-top: 4vh;
}
#ai-hero h1 {
font-size: 30px;
}
.question-box {
max-width: 92%;
margin: 16px 0 6px auto;
padding: 10px 16px;
}
}
/* Уведомление о лимите гостя — тихая строка, а не карточка */
.ai-access-message {
margin: 8px 0 4px;
padding: 0;
border: none;
border-radius: 0;
background: none;
box-shadow: none;
text-align: center;
}
.ai-access-message p {
margin: 0 0 8px;
color: rgba(var(--ink-rgb), 0.6);
font-size: 13px;
font-weight: 400;
line-height: 1.5;
}
.ai-access-message .purchase-btn {
width: auto;
height: 36px;
padding: 0 18px;
font-size: 14px;
}
.input-form .chips .chip {
max-width: 100%;
white-space: normal;
overflow-wrap: anywhere;
}
/* Группы в переключателе и сгенерированные картинки */
.model-select optgroup {
background: var(--surface);
color: rgba(var(--ink-rgb), 0.55);
font-style: normal;
font-weight: 600;
}
.generated-image {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 10px;
}
.generated-image img {
max-width: min(100%, 512px);
height: auto;
border-radius: 16px;
background: var(--surface);
}
.generated-image .image-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.generated-image .image-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: auto;
height: 36px;
margin: 0;
padding: 0 16px;
border: 1px solid rgba(var(--wash), 0.18);
border-radius: 18px;
background: transparent;
color: rgba(var(--ink-rgb), 0.85);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
}
.generated-image .image-btn:hover:not(:disabled) {
border-color: rgba(var(--accent-rgb), 0.6);
color: var(--ink);
}
.generated-image .image-btn:disabled {
opacity: 0.6;
cursor: default;
}
.answer-box a:not(.source-link) {
color: var(--accent-text);
}
.answer-box .generated-image a.image-btn {
color: rgba(var(--ink-rgb), 0.85);
}
/* ===== Тема: общие правила (перекрывают всё, что выше) ===== */
body {
background: var(--bg);
background-image: none;
color: var(--text);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
body::before {
display: none;
}
@media (max-width: 768px) {
body, body::before {
background-image: none;
}
}
.navbar {
background: rgba(27, 26, 25, 0.85);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
box-shadow: none;
padding: 0.75rem 1.5rem;
}
.navbar .navbar-brand a {
color: var(--text);
font-size: 19px;
font-weight: 600;
letter-spacing: -0.01em;
}
.navbar-menu {
gap: 28px;
}
.navbar-menu a:not(.purchase-btn) {
color: var(--text-2);
font-size: 15px;
font-weight: 500;
}
.navbar-menu a:not(.purchase-btn):hover {
color: var(--text);
}
.navbar-menu a.purchase-btn {
height: 36px;
padding: 0 16px;
margin-left: 0;
border-radius: 10px;
background: var(--accent);
box-shadow: none;
color: #0d1829;
font-size: 14px;
font-weight: 600;
line-height: 36px;
}
.navbar-menu a.purchase-btn:hover {
transform: none;
box-shadow: none;
opacity: 0.9;
color: #0d1829;
}
@media (max-width: 768px) {
.navbar-menu a:not(.purchase-btn) {
font-size: 18px;
padding-top: 0.75rem;
}
.navbar-menu a.purchase-btn {
font-size: 16px;
margin-top: 0.75rem;
}
}
button {
background: var(--accent);
color: #0d1829;
border-radius: 12px;
font-size: 16px;
font-weight: 600;
box-shadow: none;
}
.purchase-btn,
.btn.purchase-btn {
background: var(--accent);
color: #0d1829;
border-radius: 12px;
box-shadow: none;
font-weight: 600;
}
.container {
max-width: 860px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 20px;
box-shadow: none;
}
h1 {
color: var(--text);
-webkit-text-stroke: 0;
font-size: 34px;
font-weight: 600;
letter-spacing: -0.01em;
}
.container h2 {
color: var(--text);
font-size: 24px;
font-weight: 600;
}
.container p,
.container li {
color: var(--text);
font-size: 16px;
line-height: 1.7;
}
.container a:not(.btn):not(.image-btn):not(.source-link) {
color: var(--accent-text);
}
.login-form input,
.input-form input {
background: var(--bg);
border: 1px solid var(--border-strong);
border-radius: 12px;
color: var(--text);
font-size: 16px;
font-weight: 400;
}
.login-form input:focus,
.input-form input:focus {
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
/* Чат: ответы — шрифтом с засечками, интерфейс — без */
#ai-hero h1 {
font-family: var(--font-read);
font-size: 40px;
font-weight: 500;
}
#ai-hero .hero-sub {
color: var(--text-2);
}
.composer {
background: var(--surface);
border-color: var(--border-strong);
}
.composer:focus-within {
border-color: rgba(var(--accent-rgb), 0.6);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.12);
}
.input-form .composer textarea,
.follow-up-container .input-form .composer textarea {
color: var(--text);
font-size: 16px;
}
.input-form .composer .send-btn {
background: var(--accent);
color: #0d1829;
}
.question-box {
background: var(--surface-2);
}
.question-box p {
color: var(--text);
}
.answer-box .markdown-content {
font-family: var(--font-read);
font-size: 19px;
line-height: 1.7;
color: var(--text);
text-align: left;
}
.answer-box .markdown-content p,
.answer-box .markdown-content li {
font-family: var(--font-read);
font-size: inherit;
line-height: inherit;
color: var(--text);
}
.answer-box .markdown-content p {
margin: 0 0 1em;
}
.answer-box .markdown-content h1,
.answer-box .markdown-content h2,
.answer-box .markdown-content h3,
.answer-box .markdown-content h4 {
font-family: var(--font-read);
font-weight: 600;
color: var(--text);
line-height: 1.3;
margin: 1.4em 0 0.5em;
}
.answer-box .markdown-content h1 { font-size: 1.5em; }
.answer-box .markdown-content h2 { font-size: 1.3em; }
.answer-box .markdown-content h3 { font-size: 1.15em; }
.answer-box .markdown-content ul,
.answer-box .markdown-content ol {
margin: 0 0 1em;
padding-left: 1.4em;
}
.answer-box .markdown-content li {
margin: 0.35em 0;
}
.answer-box .markdown-content table,
.answer-box .markdown-content th,
.answer-box .markdown-content td {
font-family: var(--font-ui);
font-size: 15px;
line-height: 1.5;
}
.answer-box .markdown-content a:not(.source-link) {
color: var(--accent-text);
}
.answer-box .markdown-content blockquote {
color: var(--text-2);
}
.chips .chip,
.input-form .chips .chip {
color: var(--text-2);
border-color: var(--border-strong);
}
.input-form .chips .chip:hover {
color: var(--text);
border-color: rgba(var(--accent-rgb), 0.6);
}
.ai-access-message p {
color: var(--text-2);
}
.action-btn {
color: var(--text-2);
border-color: var(--border-strong);
}
.action-btn:hover {
color: var(--text);
}
/* Таблицы, код и цитаты в ответах — в общей нейтральной палитре */
.answer-box .markdown-content table {
background: var(--surface);
border: 1px solid var(--border);
border-radius: 12px;
border-collapse: separate;
border-spacing: 0;
overflow: hidden;
}
.answer-box .markdown-content th {
background: var(--surface-2);
color: var(--text);
font-weight: 600;
}
.answer-box .markdown-content th,
.answer-box .markdown-content td {
border: none;
border-bottom: 1px solid var(--border);
padding: 10px 14px;
}
.answer-box .markdown-content tr:last-child td {
border-bottom: none;
}
.answer-box .markdown-content tr:hover td {
background: rgba(var(--wash), 0.03);
}
.answer-box .markdown-content pre,
.answer-box .markdown-content .highlight {
background: var(--code-bg);
border: 1px solid var(--border);
border-radius: 12px;
}
.answer-box .markdown-content :not(pre) > code {
background: var(--surface-2);
color: var(--text);
border-radius: 6px;
padding: 0.1em 0.4em;
}
.answer-box .markdown-content blockquote {
background: var(--surface);
border-left: 3px solid var(--border-strong);
border-radius: 0 12px 12px 0;
color: var(--text-2);
}
/* Страница «запросы закончились» */
.upgrade-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: 20px;
margin-top: 8px;
}
.upgrade-actions .purchase-btn {
display: inline-flex;
align-items: center;
justify-content: center;
height: 44px;
padding: 0 22px;
text-decoration: none;
font-size: 16px;
}
.upgrade-secondary {
color: var(--text-2);
font-size: 15px;
text-decoration: none;
}
.upgrade-secondary:hover {
color: var(--text);
}
#ai-hero .hero-sub {
max-width: 520px;
margin: 0 auto;
}
/* ===== Боковая панель: меню, история бесед, аккаунт ===== */
:root {
--sidebar-w: clamp(272px, 19vw, 400px); /* растёт с шириной экрана: 272 px до 1430 px, 400 px от 2100 px */
}
body.has-sidebar {
padding-left: var(--sidebar-w);
}
.hk-topbar,
.hk-overlay {
display: none;
}
.hk-sidebar {
position: fixed;
top: 0;
bottom: 0;
left: 0;
z-index: 1100;
display: flex;
flex-direction: column;
width: var(--sidebar-w);
padding: 14px 12px 12px;
background: var(--surface);
border-right: 1px solid var(--border);
}
.hk-sidebar-head {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 14px;
}
.hk-brand {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
color: var(--text);
font-size: 16px;
font-weight: 600;
letter-spacing: -0.01em;
text-decoration: none;
}
.hk-brand img {
width: 28px;
height: 28px;
flex-shrink: 0;
}
.hk-sidebar .hk-sidebar-close {
display: none;
width: 36px;
height: 36px;
padding: 0;
background: none;
color: var(--text-2);
font-size: 18px;
font-weight: 400;
}
.hk-new {
display: block;
padding: 10px 12px;
border: 1px solid var(--border-strong);
border-radius: 10px;
color: var(--text);
font-size: 14px;
font-weight: 500;
text-decoration: none;
transition: background 0.15s ease;
}
.hk-new:hover {
background: rgba(var(--wash), 0.05);
}
.hk-history {
flex: 1;
min-height: 0;
margin: 10px -6px 0;
padding: 0 6px;
overflow-y: auto;
overscroll-behavior: contain;
}
.hk-group {
margin: 14px 0 4px;
padding: 0 8px;
color: var(--text-2);
font-size: 12px;
font-weight: 500;
opacity: 0.75;
}
.hk-item {
display: block;
padding: 8px 10px;
border-radius: 8px;
color: var(--text-2);
font-size: 14px;
line-height: 1.35;
text-decoration: none;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.hk-item:hover {
background: rgba(var(--wash), 0.05);
color: var(--text);
}
.hk-item.is-active {
background: var(--surface-2);
color: var(--text);
}
.hk-history-empty {
margin: 18px 8px;
color: var(--text-2);
font-size: 13px;
line-height: 1.5;
opacity: 0.8;
}
.hk-sidebar-foot {
padding-top: 10px;
border-top: 1px solid var(--border);
}
.hk-account {
display: flex;
align-items: center;
gap: 10px;
padding: 8px;
border-radius: 10px;
color: var(--text);
text-decoration: none;
}
.hk-account:hover {
background: rgba(var(--wash), 0.05);
}
.hk-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.hk-avatar {
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: 50%;
background: var(--surface-2);
border: 1px solid var(--border-strong);
font-size: 12px;
font-weight: 600;
}
.hk-account-text {
display: flex;
flex-direction: column;
min-width: 0;
}
.hk-account-email,
.hk-account-sub {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hk-account-email {
font-size: 13px;
font-weight: 500;
}
.hk-account-sub {
color: var(--text-2);
font-size: 12px;
}
.hk-login {
display: block;
padding: 10px 12px;
border-radius: 10px;
background: var(--accent);
color: #0d1829;
font-size: 14px;
font-weight: 600;
text-align: center;
text-decoration: none;
}
.hk-guest-note {
margin: 8px 4px 0;
color: var(--text-2);
font-size: 12px;
text-align: center;
}
.hk-links {
display: flex;
flex-wrap: wrap;
gap: 4px 14px;
margin-top: 8px;
padding: 0 8px;
}
.hk-link {
color: var(--text-2);
font-size: 13px;
text-decoration: none;
}
.hk-link:hover,
.hk-link.is-active {
color: var(--text);
}
.hk-link-accent {
display: block;
margin: 2px 8px 0;
color: var(--accent-text);
font-size: 13px;
}
@media (max-width: 900px) {
body.has-sidebar {
padding-left: 0;
padding-top: 52px;
}
.hk-topbar {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: space-between;
height: 52px;
padding: 0 6px;
background: rgba(27, 26, 25, 0.9);
-webkit-backdrop-filter: blur(12px);
backdrop-filter: blur(12px);
border-bottom: 1px solid var(--border);
}
.hk-topbar .hk-topbar-btn {
display: flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
padding: 0;
border-radius: 10px;
background: none;
color: var(--text);
font-size: 22px;
font-weight: 400;
text-decoration: none;
}
.hk-topbar-title {
color: var(--text);
font-size: 16px;
font-weight: 600;
text-decoration: none;
}
.hk-sidebar {
width: min(86vw, 320px);
transform: translateX(-100%);
transition: transform 0.22s ease;
box-shadow: none;
}
.hk-sidebar.is-open {
transform: none;
box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.hk-sidebar .hk-sidebar-close {
display: block;
}
.hk-overlay {
position: fixed;
inset: 0;
z-index: 1090;
display: block;
background: rgba(0, 0, 0, 0.55);
opacity: 0;
pointer-events: none;
transition: opacity 0.22s ease;
}
.hk-overlay.is-open {
opacity: 1;
pointer-events: auto;
}
body.hk-lock {
overflow: hidden;
}
}
/* Пока идёт поток, блоки ответа сразу полностью видны — без анимации проявления */
.streaming-preview,
.streaming-preview * {
animation: none !important;
}
@media (max-width: 600px) {
.answer-box .markdown-content {
font-size: 18px;
}
}
/* Страница «Что ХК AI помнит» */
.memory-lead {
color: var(--text-2);
margin-bottom: 20px;
}
.memory-toggle {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 20px;
color: var(--text);
font-size: 15px;
cursor: pointer;
}
.memory-toggle input {
width: 18px;
height: 18px;
accent-color: var(--accent);
}
.memory-add {
display: flex;
gap: 10px;
margin-bottom: 8px;
}
.memory-add input {
flex: 1;
min-width: 0;
height: 44px;
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--bg);
color: var(--text);
font-size: 16px;
}
.memory-add input:focus {
outline: none;
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.memory-error {
min-height: 20px;
margin-bottom: 8px;
color: var(--danger-1);
font-size: 14px;
}
.memory-list {
list-style: none;
margin: 0;
padding: 0;
}
.memory-item {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px 12px;
padding: 12px 0;
border-bottom: 1px solid var(--border);
}
.memory-text {
flex: 1 1 260px;
color: var(--text);
font-size: 16px;
line-height: 1.5;
}
.memory-badge {
color: var(--text-2);
font-size: 12px;
}
.memory-actions {
display: flex;
gap: 8px;
}
.container .memory-btn,
.page .memory-btn {
width: auto;
height: 34px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: transparent;
color: var(--text-2);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.container .memory-btn:hover,
.page .memory-btn:hover {
color: var(--text);
border-color: rgba(var(--accent-rgb), 0.6);
}
.container .memory-add .memory-btn-primary,
.page .memory-add .memory-btn-primary {
height: 44px;
padding: 0 18px;
border: none;
background: var(--accent);
color: #0d1829;
font-size: 15px;
font-weight: 600;
}
.container .memory-btn-danger:hover,
.page .memory-btn-danger:hover {
color: var(--danger-1);
border-color: var(--danger-1);
}
.memory-empty {
margin: 18px 0;
color: var(--text-2);
}
.memory-footer {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 16px;
color: var(--text-2);
font-size: 13px;
}
/* Временное сообщение об ограничении доступа */
.answer-box a[href*="purchase.chaos-control.mobi"] {
color: var(--accent-text);
text-decoration: underline;
}
/* Подсказка о смене модели */
.model-notice {
margin: 16px 0 0;
padding: 12px 16px;
border-radius: 12px;
border: 1px solid var(--border-strong);
background: var(--surface);
color: var(--ink-3);
font-family: var(--font-ui);
font-size: 14px;
line-height: 1.45;
}
/* Кнопка «Стоп» вместо отправки на время ответа */
.input-form .composer .send-btn.is-stop {
background: var(--surface-2);
color: var(--accent-text);
box-shadow: inset 0 0 0 2px var(--accent);
}
/* Беседа, ответ в которой ещё формируется */
.hk-item.is-pending {
position: relative;
padding-right: 28px;
}
.hk-item.is-pending::after {
content: '';
position: absolute;
right: 12px;
top: 50%;
width: 8px;
height: 8px;
margin-top: -4px;
border-radius: 50%;
background: var(--accent);
animation: hk-pending-pulse 1.2s ease-in-out infinite;
}
@keyframes hk-pending-pulse {
0%, 100% { opacity: 0.25; }
50% { opacity: 1; }
}
.pending-note {
margin: 16px 0;
color: #8A8A8A;
font-family: var(--font-ui);
font-size: 14px;
text-align: center;
}
/* Строка беседы: ссылка, кнопка «⋯» и меню действий */
.hk-item-row {
position: relative;
}
.hk-item-row .hk-item {
padding-right: 34px;
}
.hk-item-more {
position: absolute;
top: 50%;
right: 4px;
width: 28px;
height: 28px;
margin-top: -14px;
display: flex;
align-items: center;
justify-content: center;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text-2);
cursor: pointer;
opacity: 0;
transition: opacity 0.15s ease, background 0.15s ease;
}
.hk-item-row:hover .hk-item-more,
.hk-item-more:focus-visible,
.hk-item-row .hk-item.is-active + .hk-item-more {
opacity: 1;
}
.hk-item-more:hover {
background: rgba(var(--wash), 0.08);
color: var(--text);
}
/* на телефоне наведения нет: кнопка видна всегда */
@media (hover: none), (max-width: 768px) {
.hk-item-more {
opacity: 0.7;
}
}
.hk-item-row.is-editing .hk-item,
.hk-item-row.is-editing .hk-item-more {
display: none;
}
.hk-item-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 7px 10px;
border: 1px solid var(--accent);
border-radius: 8px;
background: var(--surface-2);
color: var(--text);
font-family: inherit;
font-size: 14px;
outline: none;
}
.hk-menu {
position: fixed;
z-index: 1200; /* выше боковой панели (1100), иначе меню прячется за ней */
min-width: 170px;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: 10px;
background: var(--surface);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
}
.hk-menu button {
display: block;
width: 100%;
padding: 9px 12px;
border: 0;
border-radius: 7px;
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.hk-menu button:hover {
background: rgba(var(--wash), 0.07);
}
.hk-menu button.is-danger {
color: #ff7b7b;
}
/* ===== Главная: воздух, карточки возможностей, селектор моделей ===== */
#ai-hero {
margin: 8vh 0 36px;
}
#ai-hero h1 {
margin: 0 0 14px;
}
#ai-hero .hero-sub {
max-width: 620px;
line-height: 1.5;
}
.composer {
padding: 18px 18px 14px;
}
.composer-bar {
margin-top: 14px;
}
.example-questions {
margin-top: 44px;
text-align: left;
}
.ai-section-label {
margin: 0 0 12px;
color: var(--text-2);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.06em;
text-transform: uppercase;
opacity: 0.85;
}
.ai-features {
margin-bottom: 36px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.input-form .feature-card {
display: flex;
flex-direction: column;
align-items: flex-start;
gap: 6px;
width: auto;
height: auto;
margin: 0;
padding: 16px;
border: 1px solid var(--border);
border-radius: 14px;
background: var(--surface);
color: var(--text);
font-family: var(--font-ui);
text-align: left;
cursor: pointer;
transition: border-color 0.2s ease, background 0.2s ease, transform 0.2s ease;
}
.input-form .feature-card:hover {
border-color: rgba(var(--accent-rgb), 0.55);
background: var(--surface-2);
transform: translateY(-1px);
}
.feature-card svg {
color: var(--accent-text);
margin-bottom: 4px;
}
.feature-title {
font-size: 14px;
font-weight: 500;
line-height: 1.3;
}
.feature-desc {
color: var(--text-2);
font-size: 13px;
font-weight: 400;
line-height: 1.45;
}
.example-questions .chips {
justify-content: flex-start;
gap: 10px;
}
@media (max-width: 720px) {
.feature-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
#ai-hero {
margin-top: 4vh;
}
}
@media (max-width: 340px) {
.feature-grid {
grid-template-columns: minmax(0, 1fr);
}
}
/* Селектор моделей: кнопка в поле ввода и выпадающая панель */
.model-select.is-native-hidden {
display: none !important;
}
.composer .model-trigger {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: calc(100% - 52px);
height: 36px;
margin: 0;
padding: 0 12px 0 10px;
border: 1px solid var(--border-strong);
border-radius: 18px;
background: var(--surface-2);
color: var(--text);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: border-color 0.2s ease;
}
.composer .model-trigger:hover,
.composer .model-trigger[aria-expanded="true"] {
border-color: rgba(var(--accent-rgb), 0.6);
}
.model-trigger svg {
flex: none;
color: var(--accent-text);
}
.model-trigger b {
overflow: hidden;
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.model-trigger span {
color: var(--text-2);
font-weight: 400;
white-space: nowrap;
}
.model-trigger svg:last-child {
color: var(--text-2);
}
.model-pop {
position: fixed;
z-index: 1300;
width: 420px;
max-width: calc(100vw - 24px);
overflow-y: auto;
padding: 6px;
border: 1px solid var(--border-strong);
border-radius: 16px;
background: var(--surface-2);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45);
}
.model-group {
padding: 10px 12px 4px;
color: var(--text-2);
font-family: var(--font-ui);
font-size: 11.5px;
letter-spacing: 0.05em;
text-transform: uppercase;
opacity: 0.85;
}
.model-pop .model-opt {
display: flex;
align-items: flex-start;
gap: 12px;
width: 100%;
height: auto;
margin: 0;
padding: 11px 12px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--text);
font-family: var(--font-ui);
text-align: left;
cursor: pointer;
}
.model-pop .model-opt:hover {
background: rgba(var(--wash), 0.05);
}
.model-pop .model-opt.is-selected {
background: rgba(var(--accent-rgb), 0.12);
}
.model-opt-icon {
display: flex;
align-items: center;
justify-content: center;
flex: none;
width: 32px;
height: 32px;
border-radius: 9px;
background: rgba(var(--wash), 0.07);
color: var(--accent-text);
}
.model-opt.is-selected .model-opt-icon {
background: rgba(var(--accent-rgb), 0.2);
}
.model-opt-body {
display: flex;
flex: 1;
flex-direction: column;
gap: 3px;
min-width: 0;
}
.model-opt-head {
display: flex;
align-items: center;
gap: 8px;
font-size: 14px;
}
.model-opt-head b {
font-weight: 500;
}
.model-opt-head svg {
color: var(--accent-text);
}
.model-opt-cost {
margin-left: auto;
color: var(--text-2);
font-size: 12px;
white-space: nowrap;
}
.model-opt-desc {
color: var(--text-2);
font-size: 12.5px;
line-height: 1.45;
}
.model-tags {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.model-tag {
padding: 2px 8px;
border-radius: 999px;
font-size: 11.5px;
line-height: 1.5;
}
.model-tag.is-on {
background: rgba(var(--accent-rgb), 0.16);
color: var(--accent-text);
}
.model-tag.is-off {
border: 1px solid var(--border-strong);
color: var(--text-2);
}
@media (max-width: 640px) {
.model-backdrop {
position: fixed;
inset: 0;
z-index: 1290;
background: rgba(0, 0, 0, 0.5);
}
.model-pop {
top: auto !important;
right: 0;
bottom: 0;
left: 0 !important;
width: 100%;
max-width: none;
max-height: 82vh !important;
padding-bottom: calc(14px + env(safe-area-inset-bottom));
border-radius: 18px 18px 0 0;
}
}
/* ===== Внутренние страницы: единый вид с главной (о сервисе, контакты, аккаунт, память, вход, регистрация) ===== */
body.has-sidebar .content-wrapper.page-wrapper {
justify-content: flex-start;
align-items: center;
padding: 72px 20px 96px;
}
.page {
width: 100%;
max-width: 720px;
}
.page.page-wide {
max-width: 780px;
}
.page.page-narrow {
max-width: 440px;
}
.page.is-centered,
.page-head.is-centered {
text-align: center;
}
.page-head {
margin-bottom: 28px;
}
.page-title {
margin: 0 0 10px;
color: var(--text);
font-family: var(--font-read);
font-size: 36px;
font-weight: 500;
letter-spacing: -0.01em;
line-height: 1.2;
-webkit-text-stroke: 0;
}
.page-lead {
margin: 0;
color: var(--text-2);
font-size: 16px;
line-height: 1.6;
}
.panel {
margin-bottom: 16px;
padding: 24px;
border: 1px solid var(--border);
border-radius: 16px;
background: var(--surface);
}
.panel h2 {
margin: 0 0 10px;
color: var(--text);
font-family: var(--font-ui);
font-size: 17px;
font-weight: 500;
line-height: 1.3;
}
.panel p {
margin: 0;
color: var(--text-2);
font-size: 15px;
line-height: 1.65;
}
.panel p + p,
.panel p + ul,
.panel ul + p {
margin-top: 12px;
}
.panel a:not(.hk-btn) {
color: var(--accent-text);
text-decoration: none;
}
.panel a:not(.hk-btn):hover {
text-decoration: underline;
}
.panel.prose ul {
margin: 12px 0 0;
padding-left: 20px;
}
.panel.prose li {
margin: 0 0 8px;
color: var(--text-2);
font-size: 15px;
line-height: 1.6;
}
.panel.prose li b {
color: var(--text);
font-weight: 500;
}
.panel .about-image {
display: block;
width: 100%;
margin: 14px 0 18px;
border: 1px solid var(--border);
border-radius: 12px;
}
.panel .signature,
.panel .postscript {
margin-top: 18px;
}
.panel .postscript {
font-size: 14px;
}
.btn-row {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 20px;
}
.btn-row.is-centered {
justify-content: center;
}
form.btn-row {
margin-top: 8px;
}
.hk-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
width: auto;
height: 44px;
margin: 0;
padding: 0 22px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--surface-2);
color: var(--text);
font-family: var(--font-ui);
font-size: 15px;
font-weight: 500;
line-height: 1;
text-decoration: none;
cursor: pointer;
transition: border-color 0.2s ease, filter 0.2s ease, background 0.2s ease;
}
.hk-btn:hover {
border-color: rgba(var(--accent-rgb), 0.6);
}
.hk-btn.is-primary {
border-color: transparent;
background: var(--accent);
color: #0d1829;
}
.hk-btn.is-primary:hover {
filter: brightness(1.08);
}
.hk-btn.is-danger {
color: #ff8f8f;
}
.hk-btn.is-danger:hover {
border-color: rgba(255, 143, 143, 0.55);
}
.hk-btn.is-block {
width: 100%;
}
.hk-btn:disabled {
opacity: 0.6;
cursor: default;
}
.hk-form {
display: flex;
flex-direction: column;
gap: 16px;
}
.hk-field label {
display: block;
margin: 0 0 6px;
color: var(--text-2);
font-size: 13px;
font-weight: 500;
}
.hk-field input {
display: block;
width: 100%;
height: 46px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: var(--bg);
color: var(--text);
font-family: var(--font-ui);
font-size: 16px;
outline: none;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.hk-field input::placeholder {
color: var(--text-2);
opacity: 0.6;
}
.hk-field input:focus {
border-color: rgba(var(--accent-rgb), 0.7);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.15);
}
.hk-hint {
margin-top: 20px;
color: var(--text-2);
font-size: 14px;
text-align: center;
}
.hk-hint a {
color: var(--accent-text);
text-decoration: none;
}
.hk-hint a:hover {
text-decoration: underline;
}
.page .error-message {
margin-top: 16px;
padding: 12px 14px;
border: 1px solid rgba(255, 107, 107, 0.35);
border-radius: 12px;
background: rgba(255, 107, 107, 0.1);
color: #ffb4b4;
font-size: 14px;
line-height: 1.5;
text-align: left;
}
.page .loading-indicator {
margin: 16px auto 0;
}
/* Аккаунт */
.account-card {
display: flex;
align-items: center;
gap: 16px;
}
.hk-avatar.is-large {
width: 56px;
height: 56px;
font-size: 18px;
}
.account-email {
color: var(--text);
font-size: 17px;
font-weight: 500;
word-break: break-all;
}
.account-sub {
margin-top: 2px;
}
/* Память */
.memory-page.panel {
padding: 24px;
}
@media (max-width: 768px) {
body.has-sidebar .content-wrapper.page-wrapper {
padding: 28px 16px 64px;
}
.page-title {
font-size: 30px;
}
.panel {
padding: 20px;
}
}
/* Заголовки страниц слева (общие правила центрируют h1 и h2) */
.page,
.page h1,
.page h2 {
text-align: left;
}
.page-head.is-centered,
.page-head.is-centered h1,
.page-head.is-centered .page-lead,
.page.is-centered,
.page.is-centered h1 {
text-align: center;
}
.memory-add .memory-btn-primary {
flex: none;
}
.panel .memory-lead {
margin-bottom: 20px;
}
.panel .memory-empty {
margin: 18px 0;
}
.panel .memory-error {
margin: 0 0 8px;
}
/* ===== Тема «Зерно» =====
Строгая монохромная тёмная тема: графит, белый и серый, без цветных акцентов. Глубину задаёт фактура фона: мелкое
плёночное зерно, мягкий свет сверху и виньетка по краям. Заголовки — антиквой (Source Serif 4), интерфейс — IBM Plex Sans.
Палитра и шрифты — токены ниже: меняйте их здесь, а не в правилах выше. */
:root {
--bg: #121212;
--surface: #181818;
--surface-2: #202020;
--border: rgba(var(--wash), 0.08);
--border-strong: rgba(var(--wash), 0.18);
--text: #f1f1f1;
--text-2: #a2a2a2;
--text-3: #7a7a7a;
--accent: #f1f1f1;
--accent-rgb: 241, 241, 241;
--on-accent: #101010;
--btn: #c4c4c1; /* главная кнопка: приглушённый светло-серый, не чисто белый */
--btn-hover: #d3d3d0;
--font-ui: "IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-disp: "Source Serif 4", "Iowan Old Style", Charter, Georgia, "Noto Serif", "Times New Roman", serif;
--hair: rgba(var(--wash), 0.08);
--hair-2: rgba(var(--wash), 0.18);
--radius: 6px;
}
body,
body.has-sidebar {
position: relative;
isolation: isolate;
background-color: var(--bg);
background-image:
radial-gradient(1200px 520px at 62% -8%, rgba(var(--wash), 0.10), transparent 70%),
radial-gradient(900px 600px at 100% 100%, rgba(var(--wash), 0.03), transparent 70%);
background-size: auto;
background-repeat: no-repeat;
background-position: 0 0;
background-attachment: fixed;
}
/* Зерно и виньетка поверх фона, под содержимым */
body::before,
body::after {
content: "";
position: fixed;
inset: 0;
z-index: -1;
width: auto;
height: auto;
pointer-events: none;
}
body::before {
display: block;
background: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url%28%23n%29'/%3E%3C/svg%3E");
background-attachment: scroll;
opacity: 0.085;
mix-blend-mode: screen;
}
body::after {
background: radial-gradient(ellipse at 50% 40%, transparent 55%, rgba(0, 0, 0, 0.55) 100%);
}
/* Боковая панель */
.hk-sidebar {
background: rgba(10, 10, 10, 0.86);
border-right: 1px solid var(--hair);
}
.hk-brand {
font-family: var(--font-disp);
font-size: 19px;
font-weight: 400;
letter-spacing: 0.005em;
}
.hk-new {
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-weight: 500;
text-align: center;
transform: none;
transition: background 0.15s ease;
}
.hk-new:hover {
background: rgba(var(--wash), 0.06);
filter: none;
transform: none;
}
.hk-item {
border-radius: 0;
}
.hk-item:hover {
background: rgba(var(--wash), 0.04);
}
.hk-item.is-active {
background: rgba(var(--wash), 0.06);
box-shadow: inset 2px 0 0 var(--accent);
}
.hk-sidebar-foot {
border-top: 1px solid var(--hair);
}
.hk-login {
border-radius: var(--radius);
background: var(--btn);
color: var(--on-accent);
font-weight: 600;
}
.hk-login:hover {
background: var(--btn-hover);
}
.hk-avatar {
background: rgba(var(--wash), 0.06);
}
@media (max-width: 900px) {
.hk-topbar {
background: rgba(14, 14, 14, 0.92);
}
}
/* Главная: антиква, без цветов */
#ai-hero {
margin: 8vh 0 34px;
text-align: left;
}
#ai-hero h1 {
margin: 0;
font-family: var(--font-disp);
font-size: clamp(34px, 4.6vw, 58px);
font-weight: 400;
letter-spacing: -0.025em;
line-height: 1.06;
text-align: left;
}
#ai-hero .hero-sub {
max-width: 540px;
margin: 16px 0 0;
color: var(--text-2);
font-size: 16.5px;
line-height: 1.65;
text-align: left;
}
/* Поле ввода: тёмная панель с волосяной рамкой */
.composer {
padding: 20px 22px 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(22, 22, 22, 0.78);
box-shadow: 0 28px 56px -30px #000;
color: var(--text);
}
.composer:focus-within {
border-color: rgba(var(--wash), 0.4);
box-shadow: 0 28px 56px -30px #000, 0 0 0 3px rgba(var(--wash), 0.07);
}
.input-form .composer textarea,
.follow-up-container .input-form .composer textarea {
color: var(--text);
font-size: 17px;
}
.composer textarea::placeholder {
color: var(--text-3);
opacity: 1;
}
.composer .model-trigger {
height: 34px;
padding: 0 10px 0 8px;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--text);
}
.composer .model-trigger:hover,
.composer .model-trigger[aria-expanded="true"] {
border: 0;
background: rgba(var(--wash), 0.07);
}
.composer .model-trigger svg {
color: var(--ink-1b);
}
.composer .model-trigger span {
color: var(--text-2);
}
.input-form .composer .send-btn {
width: 44px;
height: 36px;
border-radius: var(--radius);
background: var(--accent);
color: var(--on-accent);
box-shadow: 0 0 0 1px rgba(var(--wash), 0.25);
}
.input-form .composer .send-btn.is-stop {
background: transparent;
box-shadow: inset 0 0 0 1.5px var(--accent);
color: var(--accent-text);
}
/* Возможности: перечень с волосяными линиями вместо карточек */
.example-questions {
margin-top: 72px;
}
.example-questions .ai-section-label {
margin: 0 0 18px;
color: var(--text);
font-family: var(--font-disp);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
opacity: 1;
text-transform: none;
}
.ai-features {
margin-bottom: 64px;
}
.feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 56px;
align-items: stretch;
border-top: 1px solid var(--hair-2);
}
.input-form .feature-card {
display: grid;
grid-template-columns: 22px 1fr;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 4px;
align-items: start;
width: auto;
height: auto;
margin: 0;
padding: 20px 4px;
border: 0;
border-bottom: 1px solid var(--hair);
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--text);
transform: none;
transition: background 0.2s ease;
}
.input-form .feature-card:hover {
background: rgba(var(--wash), 0.035);
box-shadow: none;
transform: none;
}
.input-form .feature-card::before {
display: none;
}
.feature-card svg {
display: block;
grid-row: 1 / span 2;
margin: 2px 0 0;
color: var(--ink-1b);
}
.feature-title {
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.feature-desc {
color: var(--text-2);
font-size: 13.5px;
line-height: 1.55;
}
.feature-card:nth-child(n) {
margin-top: 0;
}
/* Примеры: строки с линиями */
.example-questions .chips {
display: block;
max-width: 780px;
border-top: 1px solid var(--hair-2);
}
.input-form .chips .chip {
display: block;
width: 100%;
padding: 15px 2px;
border: 0;
border-bottom: 1px solid var(--hair);
border-radius: 0;
background: transparent;
color: var(--text);
font-size: 15px;
text-align: left;
}
.input-form .chips .chip:hover {
background: rgba(var(--wash), 0.035);
color: var(--ink-hi);
}
@media (max-width: 720px) {
.feature-grid {
grid-template-columns: 1fr;
}
#ai-hero {
margin-top: 4vh;
}
}
/* Диалог: вопрос — спокойная светлая плашка, ответ — антиква */
.question-box {
padding: 13px 20px;
border-radius: var(--radius);
background: rgba(var(--wash), 0.075);
box-shadow: none;
transform: none;
}
.question-box p {
color: var(--text);
font-size: 16px;
font-weight: 400;
}
/* Внутренние страницы */
.page-title {
font-family: var(--font-disp);
font-size: clamp(32px, 4.4vw, 44px);
font-weight: 400;
letter-spacing: -0.025em;
}
.panel {
border: 1px solid var(--hair);
border-radius: var(--radius);
background: rgba(22, 22, 22, 0.8);
}
.hk-btn {
border-color: var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-weight: 500;
}
.hk-btn:hover {
background: rgba(var(--wash), 0.06);
border-color: rgba(var(--wash), 0.35);
}
.hk-btn.is-primary {
border-color: transparent;
background: var(--btn);
color: var(--on-accent);
font-weight: 600;
}
.hk-btn.is-primary:hover {
background: var(--btn-hover);
filter: none;
}
.hk-btn.is-danger {
color: var(--danger-2);
}
.hk-field input {
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.3);
}
.panel a:not(.hk-btn),
.hk-hint a {
color: var(--text);
text-decoration: underline;
text-decoration-color: rgba(var(--wash), 0.35);
text-underline-offset: 3px;
}
/* Селектор моделей и теги: точки вместо цветных таблеток */
.model-pop {
border-radius: var(--radius);
background: var(--surface);
box-shadow: 0 28px 56px -24px #000;
}
.model-pop .model-opt {
border-radius: 4px;
}
.model-pop .model-opt:hover {
background: rgba(var(--wash), 0.05);
}
.model-pop .model-opt.is-selected {
background: rgba(var(--wash), 0.07);
}
.model-opt-icon {
background: transparent;
color: var(--ink-1b);
width: 24px;
height: 24px;
border-radius: 0;
}
.model-opt.is-selected .model-opt-icon {
background: transparent;
}
.model-opt-head svg {
color: var(--text);
}
.model-tags {
gap: 4px 14px;
}
.model-tag,
.model-tag.is-on,
.model-tag.is-off {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 0;
border: 0;
border-radius: 0;
background: none;
color: var(--text-2);
font-size: 12px;
}
.model-tag::before {
content: "";
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--text);
}
.model-tag.is-off::before {
background: transparent;
box-shadow: inset 0 0 0 1px var(--text-2);
}
/* Остатки прежней синей палитры — в монохром */
.source-link,
.about-content .source-link,
.contacts-content .source-link {
color: var(--text);
}
.source-link:hover {
color: var(--ink-hi);
text-decoration: underline;
}
.citation-circle {
background: rgba(var(--wash), 0.14);
color: var(--text);
}
.source-link:hover .citation-circle {
background: var(--accent);
color: var(--on-accent);
}
.answer-box blockquote {
border-left-color: rgba(var(--wash), 0.3);
}
.loading-indicator span {
background: var(--text-2);
}
.copy-btn {
background: rgba(var(--wash), 0.12);
}
.copy-btn:hover {
background: rgba(var(--wash), 0.24);
}
.copy-btn:active {
background: rgba(var(--wash), 0.32);
}
.purchase-btn,
.btn.purchase-btn {
border-radius: var(--radius);
background: var(--accent);
color: var(--on-accent);
font-weight: 600;
}
.model-notice {
border-radius: var(--radius);
}
@media (prefers-reduced-motion: reduce) {
.input-form .feature-card,
.hk-new {
transition: none;
}
}
/* Автозаполнение браузера не должно заливать поля светлым: оставляем тёмную панель и приглушённый текст */
.hk-field input:-webkit-autofill,
.hk-field input:-webkit-autofill:hover,
.hk-field input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--ink-1);
caret-color: var(--ink-1);
box-shadow: 0 0 0 1000px var(--field-bg) inset;
-webkit-box-shadow: 0 0 0 1000px var(--field-bg) inset;
transition: background-color 9999s ease-out 0s;
}
/* Сообщение «нужен вход» над полем ввода */
.auth-notice {
margin: 0 0 14px;
padding: 12px 16px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.04);
color: var(--text);
font-size: 15px;
line-height: 1.6;
}
.auth-notice a {
color: var(--text);
text-decoration: underline;
text-decoration-color: rgba(var(--wash), 0.35);
text-underline-offset: 3px;
}
.auth-notice-links {
display: inline-block;
margin-left: 4px;
white-space: nowrap;
}
/* Ссылка внутри подзаголовка главной («Хаос-контроле») */
#ai-hero .hero-sub a {
color: var(--text);
text-decoration: underline;
text-decoration-color: rgba(var(--wash), 0.35);
text-underline-offset: 3px;
}
#ai-hero .hero-sub a:hover {
text-decoration-color: var(--text);
}
/* Предпросмотр потока: обёртки не влияют на вёрстку (законченные блоки + перерисовываемый хвост) */
.streaming-preview .stream-head,
.streaming-preview .stream-tail {
display: contents;
}
/* Приглашение под общим ответом для тех, у кого нет аккаунта */
.share-invite {
margin: 28px 0 8px;
padding: 22px 24px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.03);
text-align: center;
}
.share-invite-title {
margin: 0 0 8px;
color: var(--text);
font-family: var(--font-disp);
font-size: 24px;
font-weight: 400;
}
.share-invite-text {
margin: 0 auto 16px;
max-width: 480px;
color: var(--text-2);
font-size: 15px;
line-height: 1.6;
}
/* перебивает «.container a:not(.btn)…» с цветом ссылки */
.container .share-invite a.hk-btn.is-primary:not(.btn) {
color: var(--on-accent);
text-decoration: none;
}
.share-invite-text a {
text-decoration: underline;
text-decoration-color: rgba(var(--wash), 0.35);
text-underline-offset: 3px;
}
/* Параметры картинки (пропорции, качество, цена) над панелью модели */
.image-options {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0 0 12px;
padding: 12px 0 0;
border-top: 1px solid var(--hair);
}
.image-options[hidden] {
display: none;
}
.image-opt-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
.image-chip,
.image-seg button {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
margin: 0;
padding: 0 12px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text-2);
font-family: var(--font-ui);
font-size: 13px;
font-weight: 500;
cursor: pointer;
}
.image-chip:hover,
.image-seg button:hover {
color: var(--text);
border-color: rgba(var(--wash), 0.35);
}
.image-chip.is-active,
.image-seg button.is-active {
background: rgba(var(--wash), 0.10);
border-color: rgba(var(--wash), 0.45);
color: var(--text);
}
.image-ratio {
display: inline-block;
height: 12px;
aspect-ratio: var(--rw) / var(--rh);
max-width: 22px;
border: 1.5px solid currentColor;
border-radius: 2px;
}
.image-seg {
display: inline-flex;
gap: 6px;
}
.image-price {
margin-left: auto;
color: var(--text-2);
font-size: 13px;
}
/* Картинки разных пропорций: ограничиваем по ширине и высоте, пропорции берутся из width/height */
.generated-image img {
max-width: min(100%, 640px);
max-height: 640px;
width: auto;
}
/* общие правила для button (ширина, отступы) не должны растягивать кнопки выбора */
.input-form .composer .image-options button {
width: auto;
height: 30px;
margin: 0;
min-height: 0;
box-shadow: none;
}
/* в кнопке модели название и цена (в том числе диапазон) показываются целиком */
.composer .model-trigger b,
.composer .model-trigger span {
flex-shrink: 0;
}
/* Карточка «Создать картинку?» вместо ответа текстом на просьбу нарисовать */
.image-offer {
margin: 12px 0 8px;
padding: 18px 20px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.03);
}
.image-offer-title {
margin: 0 0 6px;
color: var(--text);
font-family: var(--font-disp);
font-size: 20px;
}
.image-offer-text {
margin: 0 0 14px;
color: var(--text-2);
font-size: 14px;
line-height: 1.55;
}
.image-offer-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.image-offer-actions .hk-btn {
width: auto;
height: 36px;
margin: 0;
padding: 0 16px;
}
/* Созданный документ в беседе: карточка файла со скачиванием */
.generated-file {
display: flex;
align-items: center;
gap: 14px;
max-width: 520px;
padding: 14px 16px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.03);
}
.generated-file .file-badge {
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
width: 46px;
height: 56px;
border: 1px solid var(--hair-2);
border-radius: 4px;
color: var(--text);
font-size: 12px;
font-weight: 600;
letter-spacing: 0.04em;
}
.generated-file .file-meta {
display: flex;
flex: 1;
flex-direction: column;
min-width: 0;
gap: 2px;
}
.generated-file .file-meta b {
overflow: hidden;
color: var(--text);
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.generated-file .file-meta span {
color: var(--text-2);
font-size: 13px;
}
.answer-box .generated-file a.file-download {
flex-shrink: 0;
border-radius: var(--radius);
text-decoration: none;
}
/* «Скачать» оформлена так же, как «Сохранить в ХК» (контурная кнопка); цвет перебивает общее правило ссылок
«.container a:not(.btn)…» */
.container .answer-box .generated-file a.file-download:not(.btn),
.container .generated-file a.file-download:not(.btn):hover {
color: var(--text);
text-decoration: none;
}
/* Карточка документа: действия («Скачать», «Сохранить в ХК») переносятся под название на узких экранах */
.generated-file {
flex-wrap: wrap;
}
.generated-file .file-meta {
flex: 1 1 140px;
}
.generated-file .file-actions {
display: flex;
flex: 1 1 auto;
flex-wrap: wrap;
justify-content: flex-end;
gap: 8px;
}
.answer-box .generated-file .file-btn {
width: auto;
height: auto;
margin: 0;
padding: 8px 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.answer-box .generated-file .file-btn:hover:not(:disabled) {
border-color: rgba(var(--wash), 0.45);
}
.answer-box .generated-file .file-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* «Скачать» и «Сохранить в ХК» — один вид и размер */
.answer-box .generated-file a.file-download {
padding: 8px 14px;
border: 1px solid var(--hair-2);
background: transparent;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
}
.answer-box .generated-file a.file-download:hover {
border-color: rgba(var(--wash), 0.45);
background: transparent;
}
/* ===== Кнопки действий в диалогах: «Поделиться ответом», «Скачать PDF», «Сохранить в ХК», «Скачать»,
«Сохранить на устройство» — один вид и размер (перебивает отдельные правила выше) ===== */
.container .action-btn,
.container .answer-box .generated-image .image-btn,
.container .answer-box .generated-image a.image-btn,
.container .answer-box .generated-file .file-btn,
.container .answer-box .generated-file a.file-download:not(.btn) {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
box-sizing: border-box;
width: auto;
height: 38px;
margin: 0;
padding: 0 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
white-space: nowrap;
cursor: pointer;
transition: border-color 0.2s ease;
}
.container .action-btn:hover,
.container .answer-box .generated-image .image-btn:hover:not(:disabled),
.container .answer-box .generated-file .file-btn:hover:not(:disabled),
.container .answer-box .generated-file a.file-download:not(.btn):hover {
border-color: rgba(var(--wash), 0.45);
color: var(--text);
background: transparent;
}
.container .answer-box .generated-image .image-btn:disabled,
.container .answer-box .generated-file .file-btn:disabled {
opacity: 0.6;
cursor: default;
}
/* иконки в кнопках под беседой — по размеру текста */
.container .action-btn svg {
width: 22px;
height: 22px;
flex-shrink: 0;
}
.container .generated-image .image-actions {
gap: 8px;
}
/* Длинные адреса в вопросах и ответах переносятся по краю экрана, а не вылезают за него; ссылки заметны */
.question-box p,
.answer-box,
.markdown-content {
overflow-wrap: anywhere;
min-width: 0;
}
.question-box p a,
.markdown-content a:not(.source-link) {
color: var(--text);
text-decoration: underline;
text-underline-offset: 3px;
text-decoration-color: rgba(var(--wash), 0.45);
overflow-wrap: anywhere;
word-break: break-word;
}
.question-box p a:hover,
.markdown-content a:not(.source-link):hover {
text-decoration-color: var(--text);
}
/* ===== Поиск по беседам и папки в боковой панели ===== */
.hk-search {
margin: 10px 0 0;
}
.hk-search input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 9px 12px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-family: var(--font-ui);
font-size: 14px;
outline: none;
-webkit-appearance: none;
}
.hk-search input::placeholder {
color: var(--text-3);
}
.hk-search input:focus {
border-color: rgba(var(--wash), 0.4);
}
.hk-history[hidden] {
display: none;
}
.hk-result {
display: block;
padding: 9px 10px;
border-bottom: 1px solid var(--hair);
color: var(--text-2);
text-decoration: none;
}
.hk-result:hover {
background: rgba(var(--wash), 0.04);
}
.hk-result-title {
display: block;
overflow: hidden;
color: var(--text);
font-size: 14px;
text-overflow: ellipsis;
white-space: nowrap;
}
.hk-result-snippet {
display: -webkit-box;
margin-top: 3px;
overflow: hidden;
font-size: 12.5px;
line-height: 1.4;
overflow-wrap: anywhere;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
}
.hk-result-snippet mark {
padding: 0 1px;
border-radius: 2px;
background: rgba(var(--wash), 0.18);
color: var(--text);
}
.hk-result-folder {
display: block;
margin-top: 3px;
color: var(--text-3);
font-size: 11.5px;
}
.hk-folders-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.hk-folder-add {
width: 24px;
height: 24px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text-2);
font-size: 15px;
line-height: 1;
cursor: pointer;
}
.hk-folder-add:hover {
background: rgba(var(--wash), 0.08);
color: var(--text);
}
.hk-folder-toggle {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 8px 34px 8px 10px;
border: 0;
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 14px;
text-align: left;
cursor: pointer;
}
.hk-folder-toggle:hover {
background: rgba(var(--wash), 0.04);
}
.hk-chevron {
flex: none;
width: 10px;
color: var(--text-3);
transition: transform 0.15s ease;
}
.hk-folder.is-open .hk-chevron {
transform: rotate(90deg);
}
.hk-folder-name {
flex: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.hk-folder-count {
flex: none;
color: var(--text-3);
font-size: 12px;
}
.hk-item-row.in-folder .hk-item {
padding-left: 28px;
}
.hk-folder-empty {
margin: 2px 10px 6px 28px;
color: var(--text-3);
font-size: 12px;
line-height: 1.4;
}
.hk-folder-toggle {
font-weight: 500;
}
/* ===== Окно «Память папки» ===== */
.hk-modal-overlay {
position: fixed;
inset: 0;
z-index: 1300;
display: flex;
align-items: flex-start;
justify-content: center;
padding: 6vh 16px 16px;
overflow-y: auto;
background: rgba(0, 0, 0, 0.6);
}
.hk-modal {
box-sizing: border-box;
width: 100%;
max-width: 560px;
padding: 24px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: var(--surface);
color: var(--text);
font-family: var(--font-ui);
}
.hk-modal-title {
margin: 0 0 8px;
font-family: var(--font-disp);
font-size: 24px;
font-weight: 600;
overflow-wrap: anywhere;
}
.hk-modal-lead {
margin: 0 0 18px;
color: var(--text-2);
font-size: 14px;
line-height: 1.5;
}
.hk-modal-label {
display: block;
margin: 16px 0 6px;
color: var(--text-3);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.hk-modal-textarea,
.hk-modal-input {
display: block;
width: 100%;
box-sizing: border-box;
padding: 10px 12px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.3);
color: var(--text);
font-family: inherit;
font-size: 14px;
line-height: 1.45;
outline: none;
resize: vertical;
}
.hk-modal-textarea:focus,
.hk-modal-input:focus {
border-color: rgba(var(--wash), 0.4);
}
.hk-modal-row {
display: flex;
align-items: center;
gap: 10px;
margin-top: 10px;
}
.hk-modal-btn {
flex: none;
height: 36px;
padding: 0 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: transparent;
color: var(--text);
font-family: inherit;
font-size: 14px;
font-weight: 500;
cursor: pointer;
}
.hk-modal-btn:hover {
border-color: rgba(var(--wash), 0.45);
}
.hk-modal-btn.is-quiet {
margin-top: 18px;
color: var(--text-2);
}
.hk-modal-state {
color: var(--text-2);
font-size: 13px;
}
.hk-modal-facts {
margin: 0;
padding: 0;
list-style: none;
}
.hk-modal-fact,
.hk-modal-empty {
display: flex;
align-items: center;
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid var(--hair);
font-size: 14px;
line-height: 1.4;
}
.hk-modal-empty {
color: var(--text-3);
}
.hk-modal-fact-text {
flex: 1;
min-width: 0;
overflow-wrap: anywhere;
}
.hk-modal-tag {
flex: none;
padding: 1px 6px;
border: 1px solid var(--hair-2);
border-radius: 4px;
color: var(--text-3);
font-size: 11px;
}
.hk-modal-icon {
flex: none;
width: 28px;
height: 28px;
padding: 0;
border: 0;
border-radius: 6px;
background: transparent;
color: var(--text-2);
font-size: 14px;
cursor: pointer;
}
.hk-modal-icon:hover {
background: rgba(var(--wash), 0.08);
color: var(--text);
}
.hk-modal-error {
min-height: 18px;
margin: 8px 0 0;
color: var(--danger-2);
font-size: 13px;
}
body.hk-lock-modal {
overflow: hidden;
}
/* ===== Продажа безлимита: карточка в панели, экран «Токены закончились», плашка над полем ===== */
.hk-promo {
margin-bottom: 12px;
padding: 13px 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.04);
}
.hk-promo b {
display: block;
margin-bottom: 10px;
color: var(--text);
font-size: 14px;
font-weight: 500;
line-height: 1.35;
}
.hk-promo-btn {
display: inline-flex;
align-items: center;
height: 32px;
padding: 0 12px;
border-radius: var(--radius);
background: var(--btn);
color: var(--on-accent);
font-size: 13px;
font-weight: 600;
text-decoration: none;
}
.hk-promo-btn:hover {
background: var(--btn-hover);
}
.upgrade .upgrade-offer {
max-width: 560px;
margin: 0 auto;
padding: 22px 24px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.035);
text-align: left;
}
.upgrade-badge {
display: inline-block;
margin-bottom: 10px;
color: var(--text-3);
font-size: 12px;
font-weight: 500;
letter-spacing: 0.12em;
text-transform: uppercase;
}
.upgrade-head {
margin: 0 0 14px;
font-family: var(--font-disp);
font-size: 23px;
font-weight: 600;
line-height: 1.3;
}
.upgrade-list {
margin: 0 0 20px;
padding: 0;
list-style: none;
}
.upgrade-list li {
position: relative;
padding: 6px 0 6px 22px;
color: var(--text-2);
font-size: 15px;
line-height: 1.4;
}
.upgrade-list li::before {
content: "✓";
position: absolute;
left: 0;
color: var(--text);
}
.upgrade-cta {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.upgrade-pending {
max-width: 560px;
margin: 0 auto 20px;
padding: 2px 0 2px 12px;
border-left: 2px solid var(--hair-2);
color: var(--text-2);
font-size: 14px;
line-height: 1.45;
text-align: left;
}
.upgrade-pending[hidden] {
display: none;
}
@media (max-width: 520px) {
.upgrade-cta .hk-btn {
width: 100%;
justify-content: center;
}
}
/* плашка над полем ввода: остаток токенов / «токенов хватит на N запросов» + предложение */
.promo-nudge {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: -1px;
padding: 10px 14px;
border: 1px solid var(--hair-2);
border-radius: var(--radius) var(--radius) 0 0;
background: rgba(var(--wash), 0.04);
color: var(--text-2);
font-size: 13.5px;
line-height: 1.4;
}
.promo-nudge b {
color: var(--text);
font-weight: 500;
}
.promo-nudge-actions {
display: flex;
flex: none;
align-items: center;
gap: 12px;
white-space: nowrap;
}
.promo-nudge a {
color: var(--text);
text-decoration: underline;
text-underline-offset: 3px;
}
.promo-nudge button {
padding: 0 2px;
border: 0;
background: transparent;
color: var(--text-3);
font-size: 14px;
cursor: pointer;
}
@media (max-width: 600px) {
.promo-nudge {
flex-direction: column;
align-items: flex-start;
gap: 6px;
}
}
/* строка расхода под ответом */
.token-meter {
margin: 12px 0 0;
padding-top: 10px;
border-top: 1px solid var(--hair);
color: var(--text-3);
font-size: 13px;
line-height: 1.5;
}
.token-meter a {
color: var(--text-2);
text-decoration: underline;
text-underline-offset: 3px;
}
.promo-nudge + .composer {
border-top-left-radius: 0;
border-top-right-radius: 0;
}
/* плашка внутри формы: перебиваем общие стили кнопок и ссылок формы */
.input-form .promo-nudge {
box-sizing: border-box;
width: 100%;
margin: 0 0 -1.5px;
border-radius: 16px 16px 0 0;
text-align: left;
}
.input-form .promo-nudge button {
width: auto;
height: auto;
min-height: 0;
margin: 0;
padding: 0 2px;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
line-height: 1;
}
.input-form .promo-nudge a {
display: inline;
margin: 0;
padding: 0;
}
@media (max-width: 600px) {
.promo-nudge-actions {
align-self: flex-start;
}
}
/* ===== Место Хаоса ===== */
.hk-chaos {
display: block;
margin-top: 8px;
padding: 10px 12px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
color: var(--text);
font-size: 14px;
font-weight: 500;
text-align: center;
text-decoration: none;
transition: background 0.15s ease;
}
.hk-chaos:hover,
.hk-chaos.is-active {
background: rgba(var(--wash), 0.06);
}
.chaos {
max-width: 760px;
}
.chaos-input textarea,
.chaos-reference {
display: block;
width: 100%;
box-sizing: border-box;
padding: 14px 16px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.3);
color: var(--text);
font-family: var(--font-ui);
font-size: 16px;
line-height: 1.5;
outline: none;
resize: vertical;
}
.chaos-input textarea:focus,
.chaos-reference:focus {
border-color: rgba(var(--wash), 0.4);
}
.chaos-tools,
.chaos-go-row,
.chaos-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 14px;
}
.chaos-meta,
.chaos-price {
color: var(--text-3);
font-size: 13px;
}
.chaos-error {
margin: 12px 0 0;
color: var(--danger-2);
font-size: 14px;
line-height: 1.45;
}
.chaos-error[hidden] {
display: none;
}
.chaos-plan[hidden],
.chaos-done[hidden],
.chaos-input[hidden] {
display: none;
}
.chaos-summary {
margin: 0 0 14px;
font-family: var(--font-disp);
font-size: 24px;
font-weight: 600;
line-height: 1.3;
}
.chaos-question {
margin: 0 0 10px;
padding-left: 12px;
border-left: 2px solid var(--hair-2);
color: var(--text-2);
font-size: 14px;
}
.chaos-card {
margin-bottom: 14px;
padding: 16px 18px;
border: 1px solid var(--hair-2);
border-radius: var(--radius);
background: rgba(var(--wash), 0.035);
}
.chaos-card.is-off,
.chaos-task.is-off {
opacity: 0.45;
}
.chaos-card-head {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 10px;
margin-bottom: 10px;
}
.chaos-badge {
padding: 2px 8px;
border: 1px solid var(--hair-2);
border-radius: 4px;
color: var(--text-2);
font-size: 11px;
font-weight: 500;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.chaos-where {
color: var(--text-2);
font-size: 14px;
}
.chaos-task-line {
display: flex;
align-items: center;
gap: 10px;
}
.chaos-title,
.chaos-date {
box-sizing: border-box;
padding: 8px 10px;
border: 1px solid var(--hair);
border-radius: var(--radius);
background: rgba(0, 0, 0, 0.25);
color: var(--text);
font-family: var(--font-ui);
font-size: 15px;
outline: none;
}
.chaos-title {
flex: 1;
min-width: 0;
}
.chaos-title:focus,
.chaos-date:focus {
border-color: rgba(var(--wash), 0.4);
}
.chaos-project-title {
font-family: var(--font-disp);
font-size: 18px;
font-weight: 600;
}
.chaos-date {
flex: none;
width: 150px;
color-scheme: dark;
}
.chaos-tasks {
margin: 12px 0 0;
padding: 0;
list-style: none;
}
.chaos-task {
margin-bottom: 8px;
}
.chaos-checklist {
margin: 4px 0 0 28px;
padding: 0;
list-style: none;
}
.chaos-checklist li {
display: flex;
align-items: center;
gap: 6px;
padding: 2px 0;
color: var(--text-2);
font-size: 13.5px;
}
.chaos-checklist li::before {
content: "–";
color: var(--text-3);
}
.chaos-checklist li span {
flex: 1;
overflow-wrap: anywhere;
}
.chaos-x {
padding: 0 4px;
border: 0;
background: transparent;
color: var(--text-3);
cursor: pointer;
}
.chaos-memo,
.chaos-reason {
margin: 10px 0 0;
color: var(--text-3);
font-size: 13px;
line-height: 1.45;
}
.chaos-reference {
margin-top: 10px;
font-size: 14px;
}
.chaos-created {
margin: 12px 0 0;
padding-left: 18px;
color: var(--text-2);
font-size: 14px;
line-height: 1.6;
}
@media (max-width: 600px) {
.chaos-task-line {
flex-wrap: wrap;
}
.chaos-date {
width: 100%;
}
}
/* ===== Место Хаоса: кнопка с перламутровым переливом, поиск у «ХК AI», композер ввода ===== */
@property --hk-angle {
syntax: "";
inherits: false;
initial-value: 0deg;
}
.hk-sidebar-head {
justify-content: flex-start;
gap: 4px;
}
.hk-search-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
margin: 0 0 0 auto;
padding: 0;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.hk-search-toggle:hover,
.hk-search-toggle[aria-expanded="true"] {
background: rgba(var(--wash), 0.07);
color: var(--text);
}
.hk-sidebar .hk-sidebar-close {
margin-left: 0;
}
.hk-topbar-actions {
display: flex;
align-items: center;
}
.hk-search[hidden] {
display: none;
}
.hk-search {
margin-top: 8px;
}
.hk-chaos {
position: relative;
display: flex;
align-items: center;
justify-content: center;
gap: 9px;
margin-top: 8px;
padding: 11px 14px;
overflow: hidden;
isolation: isolate;
border: 0;
border-radius: var(--radius);
background: rgba(var(--wash), 0.03);
--mx: 50%;
--my: 50%;
}
/* рамка: перламутровый блик медленно ходит по кругу, как свет по шлифованному металлу */
.hk-chaos::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
padding: 1px;
border-radius: inherit;
background: conic-gradient(from var(--hk-angle), #d7d9dc, #6c7580 22%, #ece6da 40%, #8a94a3 62%, #cfd2d6 80%, #d7d9dc);
-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
-webkit-mask-composite: xor;
mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0);
opacity: 0.85;
animation: hk-chaos-sheen 8s linear infinite;
transition: opacity 0.25s ease;
}
/* подсветка внутри: появляется под курсором */
.hk-chaos::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background: radial-gradient(120px 70px at var(--mx) var(--my), rgba(236, 230, 218, 0.20), transparent 70%);
opacity: 0;
transition: opacity 0.25s ease;
}
.hk-chaos:hover::before,
.hk-chaos:focus-visible::before,
.hk-chaos.is-active::before {
opacity: 1;
}
.hk-chaos:hover::after,
.hk-chaos:focus-visible::after {
opacity: 1;
}
.hk-chaos:hover,
.hk-chaos.is-active {
background: rgba(var(--wash), 0.05);
}
.hk-chaos .hk-ico {
flex: none;
color: var(--ink-warm);
}
@keyframes hk-chaos-sheen {
to {
--hk-angle: 360deg;
}
}
@media (prefers-reduced-motion: reduce) {
.hk-chaos::before {
animation: none;
}
}
/* ---- композер «Места Хаоса»: текст сверху, снизу панель с голосом и «Обработать» ---- */
.chaos-input {
margin-top: 4px;
}
.chaos-composer {
border: 1px solid var(--hair-2);
border-radius: 14px;
background: rgba(0, 0, 0, 0.28);
transition: border-color 0.2s ease;
}
.chaos-composer:focus-within {
border-color: rgba(var(--wash), 0.4);
}
.chaos-composer textarea {
display: block;
width: 100%;
box-sizing: border-box;
padding: 18px 20px 8px;
border: 0;
border-radius: 14px 14px 0 0;
background: transparent;
color: var(--text);
font-family: var(--font-disp);
font-size: 18px;
line-height: 1.55;
outline: none;
resize: vertical;
}
.chaos-composer textarea::placeholder {
color: var(--text-3);
}
.chaos-bar {
display: flex;
align-items: center;
gap: 14px;
padding: 10px 12px 12px 14px;
}
.chaos-meta,
.chaos-price {
color: var(--text-3);
font-size: 13px;
white-space: nowrap;
}
.chaos-meta {
margin-left: 4px;
}
.chaos-price {
margin-left: auto;
}
.chaos-mic,
.chaos-send {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
height: 40px;
padding: 0 18px 0 6px;
border-radius: 20px;
font-family: var(--font-ui);
font-size: 14px;
font-weight: 500;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease, opacity 0.15s ease;
}
.chaos-mic {
border: 1px solid var(--hair-2);
background: transparent;
color: var(--text);
}
.chaos-mic:hover:not(:disabled) {
border-color: rgba(var(--wash), 0.45);
background: rgba(var(--wash), 0.05);
}
.chaos-mic-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 30px;
height: 30px;
border-radius: 50%;
background: rgba(var(--wash), 0.08);
color: var(--ink-warm);
}
.chaos-send {
padding: 0 8px 0 20px;
border: 0;
background: var(--btn);
color: var(--on-accent);
font-weight: 600;
}
.chaos-send svg {
box-sizing: content-box;
width: 16px;
height: 16px;
padding: 7px;
border-radius: 50%;
background: rgba(16, 16, 16, 0.12);
}
.chaos-send:hover:not(:disabled) {
background: var(--btn-hover);
}
.chaos-send:disabled,
.chaos-mic:disabled {
opacity: 0.5;
cursor: default;
}
/* запись идёт: кольцо вокруг значка пульсирует */
.chaos-mic.is-recording {
border-color: rgba(255, 140, 140, 0.6);
color: var(--danger-3);
}
.chaos-mic.is-recording .chaos-mic-icon {
background: rgba(255, 120, 120, 0.18);
color: var(--danger-3);
animation: chaos-rec 1.4s ease-out infinite;
}
@keyframes chaos-rec {
0% { box-shadow: 0 0 0 0 rgba(255, 120, 120, 0.45); }
100% { box-shadow: 0 0 0 10px rgba(255, 120, 120, 0); }
}
@media (prefers-reduced-motion: reduce) {
.chaos-mic.is-recording .chaos-mic-icon {
animation: none;
}
}
@media (max-width: 600px) {
.chaos-bar {
flex-wrap: wrap;
}
.chaos-price {
order: 3;
margin-left: 0;
flex-basis: 100%;
}
.chaos-send {
margin-left: auto;
}
}
/* кнопки панели ввода не растягиваются (общие правила кнопок задают им ширину) */
.chaos-bar .chaos-mic,
.chaos-bar .chaos-send {
flex: none;
width: auto;
margin-top: 0;
margin-bottom: 0;
}
.chaos-bar .chaos-send svg {
width: 16px;
height: 16px;
}
/* узкий экран: у кнопки голоса остаётся значок (подпись возвращается во время записи и расшифровки) */
@media (max-width: 480px) {
.chaos-mic:not(.is-recording):not(:disabled) {
padding: 0 6px;
}
.chaos-mic:not(.is-recording):not(:disabled) #chaos-mic-label {
display: none;
}
}
/* ---- «Что можно поручить»: перечень с волосяными линиями, как «Что умеет ХК AI» на главной ---- */
.chaos-ideas {
margin-top: 64px;
}
.chaos-ideas-title {
margin: 0 0 6px;
color: var(--text);
font-family: var(--font-disp);
font-size: 28px;
font-weight: 400;
letter-spacing: -0.01em;
}
.chaos-ideas-hint {
margin: 0 0 18px;
color: var(--text-3);
font-size: 13.5px;
}
.chaos-feature-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 0 40px;
border-top: 1px solid var(--hair-2);
}
.chaos-feature {
display: grid;
grid-template-columns: 22px 1fr;
grid-template-rows: auto auto;
column-gap: 16px;
row-gap: 4px;
align-items: start;
width: auto;
height: auto;
min-height: 0;
margin: 0;
padding: 20px 4px;
border: 0;
border-bottom: 1px solid var(--hair);
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--text);
font-family: var(--font-ui);
text-align: left;
cursor: pointer;
transition: background 0.2s ease;
}
.chaos-feature:hover,
.chaos-feature:focus-visible {
background: rgba(var(--wash), 0.035);
}
.chaos-feature svg {
display: block;
grid-row: 1 / span 2;
margin: 2px 0 0;
color: var(--ink-1b);
}
.chaos-feature .feature-title {
font-size: 15px;
font-weight: 500;
line-height: 1.3;
}
.chaos-feature .feature-desc {
color: var(--text-2);
font-size: 13.5px;
line-height: 1.55;
}
.chaos-ideas-note {
margin: 18px 0 0;
max-width: none;
color: var(--text-3);
font-size: 13px;
line-height: 1.5;
}
@media (max-width: 720px) {
.chaos-feature-grid {
grid-template-columns: 1fr;
}
}
@media (prefers-reduced-motion: reduce) {
.chaos-feature {
transition: none;
}
}
/* карточка «Изменить задачу» */
.chaos-changes {
margin-top: 4px;
}
.chaos-change {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 8px;
}
.chaos-change-label {
flex: none;
min-width: 130px;
color: var(--text-2);
font-size: 14px;
}
.chaos-was {
color: var(--text-3);
font-size: 13px;
}
.chaos-now {
margin: 0;
color: var(--text);
font-size: 14px;
}
/* ===== Главные кнопки действия: «Обработать» и «Получить безлимит» — один синий перелив ===== */
.chaos-bar .chaos-send,
.hk-promo .hk-promo-btn,
.hk-sidebar .hk-login,
.chaos-foot .hk-btn.is-primary,
.panel form .hk-btn.is-primary.is-block,
a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"],
.panel a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"] {
border: 0;
background: linear-gradient(110deg, #2c62f0 0%, #3f8cff 28%, #2a57d8 52%, #58b4ff 76%, #2c62f0 100%);
background-size: 300% 100%;
color: #fff;
text-shadow: 0 1px 0 rgba(10, 30, 90, 0.35);
box-shadow: 0 1px 0 rgba(var(--wash), 0.25) inset, 0 6px 18px rgba(44, 98, 240, 0.28);
animation: hk-blue-flow 7s ease-in-out infinite;
}
.chaos-bar .chaos-send:hover:not(:disabled),
.hk-promo .hk-promo-btn:hover,
a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"]:hover {
background: linear-gradient(110deg, #356bf5 0%, #4a97ff 28%, #3262e0 52%, #67bfff 76%, #356bf5 100%);
background-size: 300% 100%;
box-shadow: 0 1px 0 rgba(var(--wash), 0.3) inset, 0 8px 22px rgba(44, 98, 240, 0.4);
filter: none;
}
.chaos-bar .chaos-send svg {
background: rgba(var(--wash), 0.2);
color: #fff;
}
@keyframes hk-blue-flow {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
@media (prefers-reduced-motion: reduce) {
.chaos-bar .chaos-send,
.hk-promo .hk-promo-btn,
.hk-sidebar .hk-login,
.chaos-foot .hk-btn.is-primary,
.panel form .hk-btn.is-primary.is-block,
a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"] {
animation: none;
background-position: 30% 50%;
}
}
/* ===== Manrope и акцент #66A1FF: чипы для ключевых опций ===== */
:root {
--font-ui: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
--font-disp: var(--font-ui);
--font-read: var(--font-ui);
--accent: #66A1FF;
--accent-rgb: 102, 161, 255;
--on-accent: #08142e;
--chip-bg: rgba(102, 161, 255, 0.14);
--chip-bg-hover: rgba(102, 161, 255, 0.24);
--chip-border: rgba(102, 161, 255, 0.4);
}
/* заголовки Manrope плотнее и тяжелее прежней антиквы */
h1, h2, h3, .page-title, #ai-hero h1, .chaos-ideas-title, .chaos-summary, .upgrade-head, .hk-modal-title {
font-weight: 700;
letter-spacing: -0.02em;
}
/* Чип: общий вид ключевой опции */
.model-tag.is-on,
.input-form .chips .chip,
.chaos-badge,
.chaos-where {
display: inline-flex;
align-items: center;
gap: 6px;
width: auto;
padding: 3px 10px;
border: 1px solid var(--chip-border);
border-radius: 999px;
background: var(--chip-bg);
color: var(--accent-text);
font-family: var(--font-ui);
font-size: 12px;
font-weight: 600;
letter-spacing: 0;
text-transform: none;
line-height: 1.4;
}
.model-tag.is-on::before {
display: none;
}
.model-tag.is-off {
padding: 3px 10px;
border: 1px solid var(--hair-2);
border-radius: 999px;
color: var(--text-3);
font-weight: 500;
}
.model-tag.is-off::before {
display: none;
}
.model-tags {
gap: 6px;
}
/* примеры вопросов на главной: чипы в строку */
.example-questions .chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
max-width: none;
border-top: 0;
}
.input-form .chips .chip {
padding: 8px 15px;
border-bottom: 1px solid var(--chip-border);
font-size: 14px;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.input-form .chips .chip:hover {
background: var(--chip-bg-hover);
color: var(--ink-hi);
}
/* значки возможностей и отметки в списках — акцентные */
.feature-card svg,
.chaos-feature svg,
.upgrade-list li::before,
.hk-chaos .hk-ico,
.hk-folder-add:hover {
color: var(--accent-text);
}
.chaos-badge {
padding: 2px 10px;
font-size: 11.5px;
}
.chaos-where {
background: transparent;
border-color: var(--hair-2);
color: var(--text-2);
font-weight: 500;
}
/* главные кнопки: градиент вокруг акцента, тёмный текст для читаемости */
.chaos-bar .chaos-send,
.hk-promo .hk-promo-btn,
.hk-sidebar .hk-login,
.chaos-foot .hk-btn.is-primary,
.panel form .hk-btn.is-primary.is-block,
a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"],
.panel a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"] {
background: linear-gradient(110deg, #4c86f2 0%, #66a1ff 30%, #4a82ec 55%, #8fbfff 78%, #4c86f2 100%);
background-size: 300% 100%;
color: #08142e;
font-weight: 700;
text-shadow: none;
box-shadow: 0 1px 0 rgba(var(--wash), 0.4) inset, 0 6px 18px rgba(102, 161, 255, 0.3);
}
.chaos-bar .chaos-send:hover:not(:disabled),
.hk-promo .hk-promo-btn:hover,
.hk-sidebar .hk-login:hover,
.chaos-foot .hk-btn.is-primary:hover:not(:disabled),
.panel form .hk-btn.is-primary.is-block:hover:not(:disabled),
a.hk-btn.is-primary[href*="purchase.chaos-control.mobi"]:hover {
background: linear-gradient(110deg, #5a93f8 0%, #78b0ff 30%, #5890f4 55%, #a0cbff 78%, #5a93f8 100%);
background-size: 300% 100%;
box-shadow: 0 1px 0 rgba(var(--wash), 0.5) inset, 0 8px 22px rgba(102, 161, 255, 0.42);
}
.chaos-bar .chaos-send svg {
background: rgba(8, 20, 46, 0.14);
color: #08142e;
}
/* ключевые опции «Места Хаоса» — чипы под описанием */
.chaos-chips {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin: 18px 0 0;
padding: 0;
list-style: none;
}
.chaos-chip {
padding: 5px 13px;
border: 1px solid var(--chip-border);
border-radius: 999px;
background: var(--chip-bg);
color: var(--accent-text);
font-size: 13px;
font-weight: 600;
line-height: 1.4;
}
/* строка расхода под ответом: слева, а предложение безлимита — с новой строки */
.token-meter {
text-align: left;
}
.token-meter .token-meter-promo {
display: block;
margin-top: 4px;
width: fit-content;
}
/* кнопки итогового шага («Создать выбранное», «Обработать ещё», «Изменить текст»): та же форма, что у «Обработать» */
.chaos-foot .hk-btn {
height: 40px;
padding: 0 22px;
border-radius: 20px;
}
.chaos-foot .hk-btn.is-primary:disabled {
opacity: 0.6;
animation: none;
}
/* ===== Голосовой ввод в поле запроса: компактный значок микрофона рядом с кнопкой отправки ===== */
.input-form .composer .composer-mic {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
gap: 6px;
width: auto;
min-width: 36px;
height: 36px;
margin: 0 4px 0 auto;
padding: 0 8px;
border: 0;
border-radius: var(--radius);
background: transparent;
box-shadow: none;
color: var(--text-2);
font-family: var(--font-ui);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.input-form .composer .composer-mic:hover:not(:disabled) {
background: rgba(var(--wash), 0.07);
color: var(--text);
}
.composer-mic-time {
display: none;
font-size: 13px;
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.input-form .composer .composer-mic.is-recording {
background: rgba(255, 120, 120, 0.14);
color: #ffa6a6;
}
.composer-mic.is-recording .composer-mic-time {
display: inline;
}
.composer-mic.is-recording .composer-mic-icon {
animation: composer-rec 1.4s ease-in-out infinite;
}
.input-form .composer .composer-mic.is-busy {
opacity: 0.55;
cursor: default;
}
@keyframes composer-rec {
0%, 100% { opacity: 1; }
50% { opacity: 0.45; }
}
@media (prefers-reduced-motion: reduce) {
.composer-mic.is-recording .composer-mic-icon {
animation: none;
}
}
.input-form .composer .composer-mic + .send-btn {
margin-left: 0;
}
/* идёт расшифровка речи: поле заблокировано, подпись в нём приглушена */
.input-form .composer textarea.is-transcribing {
cursor: progress;
}
.input-form .composer textarea.is-transcribing::placeholder {
color: var(--accent-text);
opacity: 0.9;
}
/* ===== Вложения: скрепка в поле запроса, чипы файлов, карточки вложений в беседе ===== */
.input-form .composer .composer-attach {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 36px;
height: 36px;
margin: 0 0 0 auto;
padding: 0;
border: 0;
border-radius: var(--radius);
background: transparent;
box-shadow: none;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.input-form .composer .composer-attach[hidden] {
display: none;
}
.input-form .composer .composer-attach:hover {
background: rgba(var(--wash), 0.07);
color: var(--text);
}
.input-form .composer .composer-attach.is-unsupported {
opacity: 0.4;
}
.input-form .composer .composer-attach + .composer-mic {
margin-left: 0;
}
/* скрепки нет (модель без файлов): микрофон сам прижимается вправо */
.input-form .composer .composer-attach[hidden] + .composer-mic {
margin-left: auto;
}
.composer.is-dragover {
border-color: rgba(var(--accent-rgb), 0.8);
box-shadow: 0 0 0 3px rgba(var(--accent-rgb), 0.2);
}
.composer-files {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-bottom: 8px;
}
.composer-file {
position: relative;
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 240px;
min-height: 44px;
padding: 6px 30px 6px 8px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: rgba(var(--wash), 0.04);
color: var(--text-2);
font-size: 13px;
}
.composer-file img {
width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: 8px;
object-fit: cover;
}
.composer-file svg {
flex-shrink: 0;
}
.composer-file-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.composer-file.is-uploading {
opacity: 0.6;
animation: composer-rec 1.2s ease-in-out infinite;
}
.input-form .composer .composer-file-remove {
position: absolute;
top: 50%;
right: 4px;
display: flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
margin: 0;
padding: 0;
transform: translateY(-50%);
border: 0;
border-radius: 50%;
background: transparent;
box-shadow: none;
color: var(--text-2);
font-size: 16px;
line-height: 1;
cursor: pointer;
}
.input-form .composer .composer-file-remove:hover {
background: rgba(var(--wash), 0.12);
color: var(--text);
}
.msg-files {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 10px;
}
.file-chip {
display: inline-flex;
align-items: center;
gap: 8px;
max-width: 260px;
padding: 6px 10px;
border: 1px solid var(--border-strong);
border-radius: 12px;
background: rgba(var(--wash), 0.04);
color: var(--text-2);
font-size: 13px;
text-decoration: none;
}
.file-chip:hover {
color: var(--text);
border-color: rgba(var(--accent-rgb), 0.5);
}
.file-chip span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.file-chip.is-image {
padding: 4px 10px 4px 4px;
}
.file-chip.is-image img {
width: 56px;
height: 56px;
flex-shrink: 0;
border-radius: 9px;
object-fit: cover;
}
@media (max-width: 600px) {
.composer-file {
max-width: 100%;
}
}
/* ===== Правка картинки: пара «Было — Стало» ===== */
.generated-image .edit-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 12px;
width: 100%;
max-width: 880px;
}
.edit-compare figure {
min-width: 0;
margin: 0;
}
.edit-compare .compare-tag {
display: inline-block;
margin-bottom: 6px;
padding: 2px 9px;
border-radius: 7px;
background: rgba(var(--wash), 0.08);
color: var(--text-2);
font-size: 12px;
}
.generated-image .edit-compare img {
display: block;
width: 100%;
max-width: 100%;
height: auto;
max-height: 520px;
object-fit: contain;
cursor: zoom-in;
}
@media (max-width: 560px) {
.generated-image .edit-compare {
grid-template-columns: 1fr;
}
}
.image-lightbox {
position: fixed;
inset: 0;
z-index: 1000;
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
background: rgba(0, 0, 0, 0.88);
cursor: zoom-out;
}
.image-lightbox img {
max-width: 100%;
max-height: 100%;
border-radius: 12px;
object-fit: contain;
}
/* ===== Темы оформления: тёмная (по умолчанию) и светлая; акцент #66A1FF в обеих ===== */
:root {
--wash: 255, 255, 255; /* «вуаль» поверх фона: белая на тёмном, чёрная на светлом (hover, рамки, подложки) */
--ink: #F5F5F5;
--ink-rgb: 245, 245, 245;
--ink-hi: #FFFFFF;
--ink-hi-rgb: 255, 255, 255;
--ink-1: #E0E0E0;
--ink-1b: #cfcfcf;
--ink-3: #B1B1B1;
--ink-warm: #e4dfd4;
--panel-alt: #21232C;
--field-bg: #1b1b1b;
--code-bg: #141312;
--danger-1: #ff8a80;
--danger-2: #ff9a9a;
--danger-3: #ffb3b3;
--accent-text: var(--accent); /* акцент в роли цвета текста: в светлой теме чуть темнее для контраста */
color-scheme: dark;
}
:root[data-theme="light"] {
--bg: #f5f4f1;
--surface: #ffffff;
--surface-2: #eeece7;
--border: rgba(0, 0, 0, 0.09);
--border-strong: rgba(0, 0, 0, 0.18);
--text: #1d1c1a;
--text-2: #5d5951;
--text-3: #8a857b;
--hair: rgba(0, 0, 0, 0.09);
--hair-2: rgba(0, 0, 0, 0.18);
--btn: #1f1e1c;
--btn-hover: #34322f;
--wash: 0, 0, 0;
--ink: #1d1c1a;
--ink-rgb: 29, 28, 26;
--ink-hi: #000000;
--ink-hi-rgb: 0, 0, 0;
--ink-1: #34322f;
--ink-1b: #45423d;
--ink-3: #66625a;
--ink-warm: #4a463f;
--panel-alt: #eef1f7;
--field-bg: #ffffff;
--code-bg: #f4f3ef;
--danger-1: #c2392e;
--danger-2: #c2392e;
--danger-3: #b3261e;
--accent-text: #2f6fe0;
color-scheme: light;
}
/* Переключатель темы рядом с поиском: в тёмной теме показываем солнце (перейти на светлую), в светлой луну */
.hk-theme-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
width: 34px;
height: 34px;
margin: 0 0 0 auto;
padding: 0;
border: 0;
border-radius: var(--radius);
background: transparent;
color: var(--text-2);
cursor: pointer;
transition: background 0.15s ease, color 0.15s ease;
}
.hk-search-toggle + .hk-theme-toggle {
margin-left: 0;
}
.hk-theme-toggle:hover {
background: rgba(var(--wash), 0.07);
color: var(--text);
}
.hk-theme-moon,
:root[data-theme="light"] .hk-theme-sun {
display: none;
}
:root[data-theme="light"] .hk-theme-moon {
display: block;
}
.hk-topbar .hk-theme-toggle {
margin: 0;
}
/* ===== Светлая тема: слои фона и панели, которые в тёмной заданы тёмными литералами ===== */
:root[data-theme="light"] body,
:root[data-theme="light"] body.has-sidebar {
background-image:
radial-gradient(1200px 520px at 62% -8%, rgba(255, 255, 255, 0.95), transparent 70%),
radial-gradient(900px 600px at 100% 100%, rgba(102, 161, 255, 0.06), transparent 70%);
}
:root[data-theme="light"] body::before {
filter: invert(1);
mix-blend-mode: multiply;
opacity: 0.05;
}
:root[data-theme="light"] body::after {
background: radial-gradient(ellipse at 50% 40%, transparent 60%, rgba(0, 0, 0, 0.05) 100%);
}
:root[data-theme="light"] .hk-sidebar {
background: rgba(255, 255, 255, 0.88);
}
@media (max-width: 900px) {
:root[data-theme="light"] .hk-topbar {
background: rgba(250, 249, 247, 0.94);
}
}
:root[data-theme="light"] .composer {
background: rgba(255, 255, 255, 0.92);
box-shadow: 0 18px 40px -26px rgba(29, 28, 26, 0.35);
}
:root[data-theme="light"] .panel {
background: rgba(255, 255, 255, 0.9);
}
:root[data-theme="light"] .hk-field input,
:root[data-theme="light"] .hk-modal-input,
:root[data-theme="light"] .chaos-reference,
:root[data-theme="light"] .chaos-date,
:root[data-theme="light"] .chaos-composer {
background: rgba(255, 255, 255, 0.75);
}
:root[data-theme="light"] .composer:focus-within {
border-color: rgba(var(--accent-rgb), 0.6);
box-shadow: 0 18px 40px -26px rgba(29, 28, 26, 0.35), 0 0 0 3px rgba(var(--accent-rgb), 0.16);
}
/* Код в светлой теме: палитра подсветки для светлого фона (в тёмной остаётся тема highlight.js) */
:root[data-theme="light"] .answer-box .highlight .hljs-string,
:root[data-theme="light"] .answer-box .highlight .hljs-title,
:root[data-theme="light"] .answer-box .highlight .hljs-section,
:root[data-theme="light"] .answer-box .highlight .hljs-attribute,
:root[data-theme="light"] .answer-box .highlight .hljs-symbol,
:root[data-theme="light"] .answer-box .highlight .hljs-regexp,
:root[data-theme="light"] .answer-box .highlight .hljs-link {
color: #3f7d1f !important;
}
:root[data-theme="light"] .answer-box .highlight .hljs-number,
:root[data-theme="light"] .answer-box .highlight .hljs-literal {
color: #b05a0f !important;
}
:root[data-theme="light"] .answer-box .highlight .hljs-comment,
:root[data-theme="light"] .answer-box .highlight .hljs-deletion,
:root[data-theme="light"] .answer-box .highlight .hljs-doctag {
color: #8a8f99 !important;
}
:root[data-theme="light"] .answer-box .highlight .hljs-function {
color: #8a3fb0 !important;
}
:root[data-theme="light"] .answer-box .highlight .hljs-class,
:root[data-theme="light"] .answer-box .highlight .hljs-type,
:root[data-theme="light"] .answer-box .highlight .hljs-template-variable,
:root[data-theme="light"] .answer-box .highlight .hljs-variable.language_ {
color: #946200 !important;
}
/* Узкий экран: в одной строке модель, скрепка, микрофон и отправка. Кнопка модели сжимается (название обрезается
многоточием), чтобы отправка не выходила за край поля. */
@media (max-width: 520px) {
.composer-bar {
gap: 6px;
}
.composer .model-trigger {
flex: 0 1 auto;
min-width: 0;
overflow: hidden;
}
.composer .model-trigger b {
flex-shrink: 1;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
}
@media (max-width: 420px) {
.composer .model-trigger span {
display: none; /* цена видна в списке моделей и в подсказке под полем; название важнее */
}
}
/* ===== Акцентные кнопки действий (обе темы): главные шаги окрашены акцентом, как «Получить безлимит» =====
Сохранить в ХК, Сохранить на устройство, Скачать, «Создать» в карточке предложения и «Новая беседа». «Место Хаоса» и «Дашборд» основные (с рамкой).
Второстепенные («Поделиться ответом», «Скачать PDF», «Настроить», «Ответить текстом») остаются с рамкой. */
.container .answer-box .generated-image .image-btn.image-save-hk:not(:disabled),
.container .answer-box .generated-image a.image-btn.image-save-device,
.container .answer-box .generated-file .file-btn.file-save-hk:not(:disabled),
.container .answer-box .generated-file a.file-download:not(.btn),
.image-offer-actions .hk-btn[data-act="create"],
.hk-sidebar .hk-new {
border: 0;
background: linear-gradient(110deg, #4c86f2 0%, #66a1ff 30%, #4a82ec 55%, #8fbfff 78%, #4c86f2 100%);
background-size: 300% 100%;
color: #08142e;
font-weight: 700;
text-shadow: none;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.4) inset, 0 6px 18px rgba(102, 161, 255, 0.3);
animation: hk-blue-flow 7s ease-in-out infinite;
}
.container .answer-box .generated-image .image-btn.image-save-hk:not(:disabled):hover,
.container .answer-box .generated-image a.image-btn.image-save-device:hover,
.container .answer-box .generated-file .file-btn.file-save-hk:not(:disabled):hover,
.container .answer-box .generated-file a.file-download:not(.btn):hover,
.image-offer-actions .hk-btn[data-act="create"]:hover,
.hk-sidebar .hk-new:hover {
border: 0;
background: linear-gradient(110deg, #5a93f8 0%, #78b0ff 30%, #5890f4 55%, #a0cbff 78%, #5a93f8 100%);
background-size: 300% 100%;
color: #08142e;
box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 8px 22px rgba(102, 161, 255, 0.42);
}
.hk-sidebar .hk-new,
.hk-sidebar .hk-chaos {
font-size: 14px;
}
@media (prefers-reduced-motion: reduce) {
.container .answer-box .generated-image .image-btn.image-save-hk,
.container .answer-box .generated-image a.image-btn.image-save-device,
.container .answer-box .generated-file .file-btn.file-save-hk,
.container .answer-box .generated-file a.file-download,
.image-offer-actions .hk-btn[data-act="create"],
.hk-sidebar .hk-new {
animation: none;
background-position: 30% 50%;
}
}
/* ===== Дашборд: страница /dashboard/ (только токены ХК AI, обе темы) ===== */
.dash button { width: auto; margin: 0; box-shadow: none; text-shadow: none; }
.dash a { text-shadow: none; }
/* ===== Дашборд (макет): только токены ХК AI, без новых цветов ===== */
.dash { max-width: 1080px; }
.dash-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 24px; margin-bottom: 22px; }
.dash-head .page-title { margin: 0; }
.dash-head .page-lead { margin: 10px 0 0; max-width: 520px; }
.dash-ask { flex: none; display: inline-flex; align-items: center; justify-content: center; width: auto; height: 40px; padding: 0 18px; border: 0; border-radius: var(--radius);
background: linear-gradient(110deg,#4c86f2 0%,#66a1ff 30%,#4a82ec 55%,#8fbfff 78%,#4c86f2 100%); background-size: 300% 100%;
color: #08142e; font: 700 14px var(--font-ui); text-decoration: none; cursor: pointer;
box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px rgba(102,161,255,.3); }
.dash-bar-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; margin-bottom: 18px; }
.dash-scope, .dash-period { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.dash-scope button { height: 34px; padding: 0 14px; border: 1px solid var(--chip-border, var(--hair-2)); border-radius: 17px; background: transparent;
color: var(--text-2); font: 500 13px var(--font-ui); cursor: pointer; transition: background .15s ease, color .15s ease; }
.dash-scope button:hover { background: var(--chip-bg); color: var(--text); }
.dash-scope button.is-active { background: var(--chip-bg-hover, var(--chip-bg)); border-color: var(--accent); color: var(--accent-text); }
.dash-period { gap: 0; border: 1px solid var(--hair-2); border-radius: var(--radius); overflow: hidden; }
.dash-period button { height: 32px; padding: 0 14px; border: 0; background: transparent; color: var(--text-2); font: 500 13px var(--font-ui); cursor: pointer; }
.dash-period button.is-active { background: rgba(var(--wash), .09); color: var(--text); }
.dash-updated { color: var(--text-3); font-size: 13px; }
.dash .panel { padding: 22px 24px; margin: 0 0 18px; }
.dash h2 { margin: 0 0 14px; font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.dash h2 small { margin-left: 10px; color: var(--text-3); font-size: 13px; font-weight: 500; letter-spacing: 0; }
/* сводка: одна панель, ячейки разделены волосяными линиями, а не россыпь карточек */
.dash-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); margin: 0; padding: 0; list-style: none; }
.dash-stats li { padding: 4px 22px; border-left: 1px solid var(--hair); }
.dash-stats li:first-child { padding-left: 0; border-left: 0; }
.dash-stats strong { display: block; font-size: 38px; font-weight: 600; letter-spacing: -.03em; line-height: 1.05; font-variant-numeric: tabular-nums; }
.dash-stats span { display: block; margin-top: 6px; color: var(--text-2); font-size: 13.5px; }
.dash-stats em { display: block; margin-top: 3px; color: var(--text-3); font-size: 12.5px; font-style: normal; }
.dash-stats .is-late strong { color: var(--danger-2); }
.dash-stats .is-up em { color: var(--accent-text); }
.dash-cols { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 18px; align-items: start; }
.dash-list { margin: 0; padding: 0; list-style: none; }
.dash-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); }
.dash-row:first-child { border-top: 0; padding-top: 0; }
.dash-row-main, .dash-prow-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.dash-row-title { color: var(--text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.dash-row-sub { color: var(--text-3); font-size: 13px; }
a.dash-open, .panel a.dash-open:not(.hk-btn) { color: var(--text); text-decoration: none; }
a.dash-open:hover, a.dash-open:focus-visible, .panel a.dash-open:not(.hk-btn):hover { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 3px; }
.task.is-done a.dash-open { color: var(--text-3); }
.dash-chip { flex: none; padding: 4px 10px; border: 1px solid var(--hair-2); border-radius: 12px; color: var(--text-2); font-size: 12.5px; font-weight: 500; white-space: nowrap; }
.dash-chip.is-late { border-color: rgba(var(--wash), .0); background: rgba(194, 57, 46, .0); color: var(--danger-2); border: 1px solid currentColor; }
.dash-chip.is-ok { background: var(--chip-bg); border-color: var(--chip-border); color: var(--accent-text); }
.dash-chip.is-stale { color: var(--text-2); }
.dash-more { display: inline-block; margin-top: 14px; color: var(--accent-text); font-size: 13.5px; font-weight: 600; text-decoration: none; }
/* «зёрна»: каждое выполненное дело — одно зерно в столбике дня; выходные бледнее, сегодня выделено */
.grains { display: flex; align-items: flex-end; gap: 4px; height: 96px; margin: 6px 0 0; padding: 0; list-style: none; }
.grain { flex: 1 1 0; display: flex; flex-direction: column-reverse; gap: 2px; min-width: 0; }
.grain i { display: block; width: 100%; aspect-ratio: 1; max-width: 12px; margin: 0 auto; border-radius: 2px; background: var(--accent); }
.grain.is-weekend i { opacity: .45; }
.grain i.zero { height: 2px; aspect-ratio: auto; background: var(--hair-2); opacity: 1; border-radius: 1px; }
.grain.is-today i { background: var(--accent-text); box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--accent); }
.grain-axis { display: flex; justify-content: space-between; margin-top: 8px; color: var(--text-3); font-size: 12px; }
.dash-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 18px 0 0; padding: 14px 0 0; border-top: 1px solid var(--hair); list-style: none; }
.dash-facts b { display: block; font-size: 20px; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.dash-facts span { color: var(--text-3); font-size: 12.5px; }
/* тайм-трекер */
.tt .dash-stats { grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 14px; }
.tt-stats strong { font-size: 30px; }
.tt-stats li:last-child em { overflow-wrap: anywhere; }
.tt-stats em a.dash-open, .panel .tt-stats em a.dash-open:not(.hk-btn) { color: var(--accent-text); }
.tt-stats em a.dash-open:hover { text-decoration-color: var(--accent-text); }
.tt-cols { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 32px; margin-top: 26px; padding-top: 22px; border-top: 1px solid var(--hair); }
.tt-col h3 { margin: 0 0 12px; font-size: 14px; font-weight: 600; color: var(--text-2); }
.tt-col h3.tt-sub { margin-top: 26px; }
.tt-bars { display: flex; align-items: flex-end; gap: 4px; height: 110px; margin: 0; padding: 0; list-style: none; }
.tt-bar { flex: 1 1 0; display: flex; align-items: flex-end; height: 100%; min-width: 0; }
.tt-bar i { display: block; width: 100%; border-radius: 3px 3px 1px 1px; background: var(--accent); }
.tt-bar.is-weekend i { opacity: .45; }
.tt-bar i.zero { background: var(--hair-2); opacity: 1; border-radius: 1px; }
.tt-bar.is-today i { background: var(--accent-text); box-shadow: 0 0 0 1px var(--bg), 0 0 0 2px var(--accent); }
.tt-list { margin: 0; padding: 0; list-style: none; }
.tt-row { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(70px, .7fr) 78px; align-items: center; gap: 14px; padding: 10px 0; border-top: 1px solid var(--hair); }
.tt-row:first-child { border-top: 0; padding-top: 0; }
.tt-row-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.tt-time { color: var(--text-2); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tt-note { margin: 12px 0 0; color: var(--text-3); font-size: 12.5px; }
@media (max-width: 820px) {
.tt-cols { grid-template-columns: 1fr; gap: 26px; }
.tt .dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 18px; }
.tt .dash-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
}
.dash-prow { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(120px, 1fr) 44px 132px; align-items: center; gap: 16px; padding: 12px 0; border-top: 1px solid var(--hair); }
.dash-prow:first-child { border-top: 0; padding-top: 0; }
.dash-prow.is-compact { grid-template-columns: minmax(0, 1fr) minmax(120px, 1fr) 44px; }
.dash-bar { height: 8px; border-radius: 4px; background: rgba(var(--wash), .09); overflow: hidden; }
.dash-bar b { display: block; height: 100%; border-radius: 4px; background: var(--accent); }
.dash-bar.is-thin { height: 6px; }
.dash-prow .dash-chip { justify-self: end; }
.dash-pct { color: var(--text-2); font-size: 13px; text-align: right; font-variant-numeric: tabular-nums; }
.dash-ws-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px 16px; margin-bottom: 18px; }
.dash-ws-head h2 { margin: 0; }
.dash-ws-meta { color: var(--text-3); font-size: 13px; }
.dash-ws-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0 0 22px; padding: 0 0 20px; border-bottom: 1px solid var(--hair); list-style: none; }
.dash-ws-stats li { padding: 0 18px; border-left: 1px solid var(--hair); }
.dash-ws-stats li:first-child { padding-left: 0; border-left: 0; }
.dash-ws-stats strong { display: block; font-size: 30px; font-weight: 600; letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.dash-ws-stats span { color: var(--text-2); font-size: 13px; }
.dash-ws-stats .is-late strong { color: var(--danger-2); }
.dash-ws-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; }
.dash-ws-grid h3 { margin: 0 0 12px; color: var(--text-2); font-size: 13.5px; font-weight: 600; }
.dash-prio { display: flex; gap: 3px; height: 14px; margin: 0 0 12px; }
.dash-prio b { display: block; border-radius: 3px; min-width: 6px; }
.dash-prio .p1 { background: var(--danger-2); } .dash-prio .p2 { background: var(--accent); }
.dash-prio .p3 { background: rgba(var(--accent-rgb), .55); } .dash-prio .p4 { background: rgba(var(--wash), .22); }
.dash-legend { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.dash-legend li { display: flex; align-items: center; gap: 8px; color: var(--text-2); font-size: 13px; }
.dash-legend i { width: 10px; height: 10px; border-radius: 3px; }
.dash-legend i.p1 { background: var(--danger-2); } .dash-legend i.p2 { background: var(--accent); }
.dash-legend i.p3 { background: rgba(var(--accent-rgb), .55); } .dash-legend i.p4 { background: rgba(var(--wash), .22); }
.dash-legend em { margin-left: auto; color: var(--text); font-style: normal; font-weight: 600; font-variant-numeric: tabular-nums; }
.dash-loads { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.dash-load { display: grid; grid-template-columns: 112px minmax(0, 1fr) 28px; align-items: center; gap: 10px; color: var(--text-2); font-size: 13px; }
.dash-load.is-me { color: var(--text); font-weight: 600; }
.dash-load em { color: var(--text); font-style: normal; text-align: right; font-variant-numeric: tabular-nums; }
.dash-note { margin: 18px 0 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
.dash-ws-small { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 20px; padding: 16px 24px; }
.dash-ws-small h2 { margin: 0; font-size: 16px; }
.dash-ws-small p { margin: 0; color: var(--text-2); font-size: 13.5px; }
.dash-ws-small button { height: 32px; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: transparent; color: var(--text); font: 500 13px var(--font-ui); cursor: pointer; }
@media (max-width: 960px) {
.dash-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 20px; }
.dash-stats li:nth-child(4) { padding-left: 0; border-left: 0; }
.dash-cols { grid-template-columns: 1fr; }
.dash-ws-grid { grid-template-columns: 1fr; gap: 22px; }
.dash-ws-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 16px; }
.dash-ws-stats li:nth-child(3) { padding-left: 0; border-left: 0; }
}
@media (max-width: 600px) {
.dash-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash-stats li, .dash-stats li:nth-child(4) { padding-left: 14px; border-left: 1px solid var(--hair); }
.dash-stats li:nth-child(odd) { padding-left: 0; border-left: 0; }
.dash-prow { grid-template-columns: minmax(0, 1fr) auto; }
.dash-prow .dash-bar { grid-column: 1 / -1; order: 3; }
.dash-prow .dash-pct { order: 2; }
.dash .panel { padding: 18px 16px; }
}
.dash-bar-right { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; }
.dash-link, .dash-more { padding: 0; border: 0; background: transparent; color: var(--accent-text); font: 600 13.5px var(--font-ui); cursor: pointer; }
.dash-link { font-weight: 500; font-size: 13px; }
.dash-more { display: inline-block; margin-top: 14px; }
.dash-link:hover, .dash-more:hover { text-decoration: underline; }
.dash-chip.is-plain { color: var(--text-3); }
.dash-empty, .dash-state { margin: 0; color: var(--text-2); font-size: 14px; line-height: 1.5; }
.dash-retry { margin-top: 14px; height: 34px; padding: 0 16px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: transparent; color: var(--text); font: 500 13px var(--font-ui); cursor: pointer; }
.dash-cols.is-single { grid-template-columns: minmax(0, 1fr); }
.dash-ws-small button { cursor: pointer; }
/* Дашборд: пример для новичка */
.dash-demo { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px;
border-color: var(--chip-border); background: var(--chip-bg); }
.dash-demo-text strong { display: block; color: var(--accent-text); font-size: 15px; font-weight: 700; }
.dash-demo-text p { margin: 4px 0 0; max-width: 560px; color: var(--text-2); font-size: 14px; line-height: 1.5; }
a.dash-ask { text-decoration: none; }
.dash.is-demo .dash-stats strong, .dash.is-demo .dash-ws-stats strong { opacity: .92; }
.dash .dash-ask[hidden] { display: none; }
.dash .panel a.dash-ask, .dash .panel a.dash-ask:hover { text-decoration: none; color: #08142e; }
/* ===== «Все мои задачи» ===== */
.dash-tabs { display: flex; gap: 4px; margin: 0 0 20px; padding: 4px; width: fit-content; max-width: 100%; border: 1px solid var(--hair-2); border-radius: var(--radius); }
.dash-tabs button { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 16px; border: 0; border-radius: 6px; background: transparent; color: var(--text-2); font: 600 14px var(--font-ui); cursor: pointer; }
.dash-tabs button span { color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.dash-tabs button.is-active { background: rgba(var(--wash), .09); color: var(--text); }
.dash-tabs button.is-active span { color: var(--accent-text); }
.task-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 0 0 14px; }
.task-search { flex: 1 1 260px; max-width: 360px; height: 38px; padding: 0 14px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: rgba(var(--wash), .03); color: var(--text); font: 400 14px var(--font-ui); }
.task-search::placeholder { color: var(--text-3); }
.task-search:focus { outline: none; border-color: var(--accent); }
.task-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.task-filter button { height: 32px; padding: 0 12px; border: 1px solid var(--hair-2); border-radius: 16px; background: transparent; color: var(--text-2); font: 500 13px var(--font-ui); cursor: pointer; }
.task-filter button b { margin-left: 6px; color: var(--text-3); font-weight: 500; font-variant-numeric: tabular-nums; }
.task-filter button.is-active { border-color: var(--accent); background: var(--chip-bg); color: var(--accent-text); }
.task-filter button.is-active b { color: var(--accent-text); }
.task-filter button.is-late b { color: var(--danger-2); }
.task-toggle { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; color: var(--text-2); font-size: 13px; cursor: pointer; }
.task-toggle input { accent-color: var(--accent); width: 16px; height: 16px; }
.task-group { margin: 0 0 8px; }
.task-group[hidden] { display: none; }
.task-group h3 { position: sticky; top: 0; z-index: 2; display: flex; align-items: baseline; gap: 10px; margin: 0; padding: 14px 4px 8px; background: var(--bg); color: var(--text); font-size: 14px; font-weight: 700; }
.task-group h3 small { color: var(--text-3); font-size: 13px; font-weight: 500; }
.task-group[data-group="overdue"] h3 { color: var(--danger-2); }
.task-list { margin: 0; padding: 0; list-style: none; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); overflow: hidden; }
.task { display: grid; grid-template-columns: 22px minmax(0, 1fr) auto; align-items: center; gap: 14px; padding: 12px 18px; border-top: 1px solid var(--hair); }
.task:first-child { border-top: 0; }
.task[hidden] { display: none; }
.task:hover { background: rgba(var(--wash), .03); }
.task-ring { width: 18px; height: 18px; border: 2px solid var(--hair-2); border-radius: 50%; }
.task-ring.is-late { border-color: var(--danger-2); }
.task-ring.is-done { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 0 40%, transparent 45%); }
.task-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.task-title { color: var(--text); font-size: 15px; font-weight: 600; overflow-wrap: anywhere; }
.task.is-done .task-title { color: var(--text-3); text-decoration: line-through; text-decoration-color: var(--hair-2); }
.task-meta { color: var(--text-3); font-size: 13px; }
.task-side { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 10px; }
.task-badge { color: var(--text-3); font-size: 12.5px; white-space: nowrap; }
.task-prio { padding: 2px 7px; border-radius: 6px; background: rgba(var(--wash), .1); color: var(--text-2); font-size: 12px; font-weight: 700; }
.task-prio.p1 { background: rgba(194, 57, 46, .0); color: var(--danger-2); box-shadow: inset 0 0 0 1px currentColor; }
.task-source { padding: 3px 9px; border: 1px solid var(--hair-2); border-radius: 11px; color: var(--text-2); font-size: 12.5px; white-space: nowrap; }
.task-source.is-team { border-color: var(--chip-border); background: var(--chip-bg); color: var(--accent-text); }
.task-due { min-width: 128px; text-align: right; color: var(--text-2); font-size: 13.5px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.task-due.is-late { color: var(--danger-2); font-weight: 600; }
.task-due.is-today { color: var(--text); font-weight: 600; }
.task-due.is-none, .task-due.is-done { color: var(--text-3); }
.task-more { padding: 10px 18px; border-top: 1px solid var(--hair); }
.task-state { margin: 18px 4px; color: var(--text-2); font-size: 14px; }
.task-state[hidden] { display: none; }
.task-foot { margin: 14px 4px 0; color: var(--text-3); font-size: 12.5px; line-height: 1.5; }
@media (max-width: 760px) {
.task { grid-template-columns: 22px minmax(0, 1fr); }
.task-side { grid-column: 2; justify-content: flex-start; }
.task-due { min-width: 0; text-align: left; }
.task-toggle { margin-left: 0; }
}
.dash-stats li.is-link { cursor: pointer; border-radius: 8px; transition: background .15s ease; }
.dash-stats li.is-link:hover { background: rgba(var(--wash), .04); }
.dash-stats li.is-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.dash-stats li.is-link:hover strong { text-decoration: underline; text-decoration-color: var(--hair-2); text-underline-offset: 6px; }
.task-view .task-filter .is-late b { color: var(--danger-2); }
.task-view .dash-link { font-weight: 600; }
/* «Книга для вас» (/books/) */
.book-flow-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; margin: 0 0 18px; padding: 14px 18px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.book-flow-title { display: flex; align-items: center; gap: 10px; color: var(--text); font-size: 15px; font-weight: 700; }
.book-flow-title svg { color: var(--accent-text); }
.book-progress { display: flex; flex: 1 1 380px; gap: 6px; margin: 0; padding: 0; list-style: none; }
.book-progress li { flex: 1 1 0; min-width: 0; }
.book-progress i { display: block; height: 4px; border-radius: 2px; background: rgba(var(--wash), .12); }
.book-progress span { display: block; margin-top: 6px; overflow: hidden; color: var(--text-3); font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.book-progress .is-done i { background: rgba(var(--accent-rgb), .55); }
.book-progress .is-current i { background: var(--accent); }
.book-progress .is-current span { color: var(--accent-text); font-weight: 600; }
.reply-chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; }
.reply-chips button { height: 36px; padding: 0 16px; border: 1px solid var(--chip-border); border-radius: 18px; background: var(--chip-bg); color: var(--accent-text); font: 600 13.5px var(--font-ui); cursor: pointer; width: auto; margin: 0; box-shadow: none; }
.reply-chips button:hover { background: var(--chip-bg-hover); }
.book-hint { margin: 10px 0 0; color: var(--text-3); font-size: 13px; }
/* подборка */
.book-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 18px 0 0; padding: 0; list-style: none; }
.book-card { position: relative; display: flex; gap: 12px; padding: 18px 18px 16px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.book-pick { flex: none; padding-top: 3px; }
.book-pick input { width: 17px; height: 17px; accent-color: var(--accent); cursor: pointer; margin: 0; }
.book-pick span { display: none; }
.book-body { min-width: 0; }
.book-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.book-cat { padding: 2px 9px; border: 1px solid var(--chip-border); border-radius: 10px; background: var(--chip-bg); color: var(--accent-text); font-size: 12px; font-weight: 600; }
.book-year { color: var(--text-3); font-size: 13px; font-variant-numeric: tabular-nums; }
.book-card .book-title { margin: 0; color: var(--text); font-size: 17px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; }
.book-author { margin: 3px 0 0; color: var(--text-2); font-size: 14px; }
.book-about { margin: 12px 0 0; color: var(--text); font-size: 14px; line-height: 1.55; }
.book-why { margin: 14px 0 0; padding: 2px 0 2px 12px; border-left: 2px solid var(--accent); }
.book-why b { display: block; color: var(--accent-text); font-size: 13px; font-weight: 700; }
.book-why p { margin: 4px 0 0; color: var(--text); font-size: 14px; line-height: 1.5; }
.book-why small { display: block; margin-top: 6px; color: var(--text-3); font-size: 12.5px; line-height: 1.4; }
.book-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--hair); font-size: 13px; }
.book-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); }
.book-ok svg { color: var(--accent-text); flex: none; }
.book-links { display: inline-flex; gap: 12px; }
.book-links a { color: var(--accent-text); text-decoration: none; font-weight: 600; }
.book-links a:hover { text-decoration: underline; }
.book-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 18px 0 0; }
.book-add { display: inline-flex; align-items: center; justify-content: center; height: 40px; padding: 0 20px; border: 0; border-radius: var(--radius);
background: linear-gradient(110deg,#4c86f2 0%,#66a1ff 30%,#4a82ec 55%,#8fbfff 78%,#4c86f2 100%); background-size: 300% 100%;
color: #08142e; font: 700 14px var(--font-ui); cursor: pointer; width: auto; margin: 0; box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 6px 18px rgba(102,161,255,.3); }
.book-btn { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: transparent; color: var(--text); font: 500 14px var(--font-ui); cursor: pointer; width: auto; margin: 0; box-shadow: none; }
.book-done { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 18px 0 0; padding: 14px 18px; border: 1px solid var(--chip-border); border-radius: 12px; background: var(--chip-bg); }
.book-done b { color: var(--accent-text); font-size: 14px; }
.book-done span { color: var(--text-2); font-size: 14px; }
.book-done a, .book-done button { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--accent-text); font: 600 14px var(--font-ui); text-decoration: none; cursor: pointer; width: auto; box-shadow: none; }
.book-feedback { margin: 18px 0 0; color: var(--text-2); font-size: 14px; line-height: 1.55; }
/* лимит */
.book-limit { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; padding: 20px 22px; border: 1px solid var(--hair-2); border-radius: 12px; background: var(--surface); }
.book-limit h3 { margin: 0 0 6px; color: var(--text); font-size: 16px; font-weight: 700; }
.book-limit p { margin: 0; max-width: 540px; color: var(--text-2); font-size: 14px; line-height: 1.55; }
.book-meter { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; }
.book-meter i { width: 26px; height: 6px; border-radius: 3px; background: var(--accent); }
.book-meter span { margin-left: 8px; color: var(--text-3); font-size: 13px; }
/* внутри ответа действуют общие правила .markdown-content (крупный текст, отступы списков): перебиваем для компонентов сценария */
.answer-box .markdown-content ul.book-list { margin: 18px 0 0; padding: 0; }
.answer-box .markdown-content ul.book-list > li { margin: 0; padding: 0; }
.answer-box .markdown-content ul.book-list > li::before { content: none; }
.answer-box .markdown-content ul.reply-chips { margin: 14px 0 0; padding: 0; }
.answer-box .markdown-content ul.reply-chips > li { margin: 0; padding: 0; }
.answer-box .markdown-content ul.reply-chips > li::before { content: none; }
.answer-box .markdown-content .book-card h3.book-title { margin: 0; font-size: 17px; line-height: 1.3; font-weight: 700; }
.answer-box .markdown-content .book-author { margin: 3px 0 0; font-size: 14px; line-height: 1.4; }
.answer-box .markdown-content .book-about { margin: 12px 0 0; font-size: 14px; line-height: 1.55; }
.answer-box .markdown-content .book-why p { margin: 4px 0 0; font-size: 14px; line-height: 1.5; }
.answer-box .markdown-content .book-why b { font-size: 13px; }
.answer-box .markdown-content .book-why small { font-size: 12.5px; line-height: 1.4; }
.answer-box .markdown-content .book-status, .answer-box .markdown-content .book-ok, .answer-box .markdown-content .book-links a { font-size: 13px; }
.answer-box .markdown-content .book-feedback { margin: 18px 0 0; font-size: 14px; line-height: 1.55; }
.answer-box .markdown-content .token-line { margin: 14px 0 0; font-size: 13px; }
.answer-box .markdown-content .book-hint { margin: 10px 0 0; font-size: 13px; }
.answer-box .markdown-content .book-limit h3 { margin: 0 0 6px; font-size: 16px; }
.answer-box .markdown-content .book-limit p { margin: 0; font-size: 14px; line-height: 1.55; }
.answer-box .markdown-content .book-done b, .answer-box .markdown-content .book-done span { font-size: 14px; }
.answer-box .markdown-content .book-cat { font-size: 12px; }
.answer-box .markdown-content .book-year { font-size: 13px; }
@media (max-width: 960px) { .book-list { grid-template-columns: 1fr; } }
@media (max-width: 560px) { .book-card { padding: 16px 14px; } .book-progress span { font-size: 11px; } }
.book-flow-head .book-restart { margin-left: auto; padding: 0; border: 0; background: transparent; color: var(--text-3); font: 500 13px var(--font-ui); cursor: pointer; width: auto; box-shadow: none; }
.book-flow-head .book-restart:hover { color: var(--text); }
.book-start { padding: 26px 24px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); }
.book-start p { max-width: 560px; margin: 0 0 16px; color: var(--text-2); font-size: 14.5px; line-height: 1.6; }
.book-thinking { margin: 14px 0 0; color: var(--text-3); font-size: 14px; }
.book-error { margin: 14px 0 0; padding: 12px 16px; border: 1px solid var(--hair-2); border-radius: 12px; color: var(--text-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.book-add[disabled] { opacity: .5; cursor: default; }
@media (max-width: 760px) { .book-list { grid-template-columns: minmax(0, 1fr); } }
.book-form { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; margin: 18px 0 0; }
.book-form textarea { width: 100%; box-sizing: border-box; min-height: 44px; max-height: 180px; padding: 11px 14px; border: 1px solid var(--hair-2); border-radius: var(--radius); background: var(--surface); color: var(--text); font: 400 15px/1.5 var(--font-ui); resize: vertical; }
.book-form textarea:focus { outline: 2px solid rgba(var(--accent-rgb), .5); outline-offset: 1px; }
.book-form .book-add { flex: none; }
.books .question-box, .books .answer-box { margin-top: 14px; }
.page.books { max-width: 960px; }
.books .answer-box .markdown-content { font-size: 16px; line-height: 1.65; }
.books .answer-box .markdown-content > p, .books .answer-box .markdown-content > ul:not(.book-list):not(.reply-chips) { max-width: 760px; }
.books .answer-box .markdown-content h2, .books .answer-box .markdown-content h3:not(.book-title) { font-size: 18px; }
/* один размер текста во всех ответах и репликах диалога (как в основном чате) */
.books .answer-box .markdown-content { font-size: 18px; line-height: 1.7; }
.books .answer-box .markdown-content > p, .books .answer-box .markdown-content > ul:not(.book-list):not(.reply-chips),
.books .answer-box .markdown-content > ol, .books .answer-box .markdown-content > ul:not(.book-list):not(.reply-chips) > li,
.books .answer-box .markdown-content > ol > li { font-size: 18px; line-height: 1.7; }
.books .question-box, .books .question-box p { font-size: 18px; line-height: 1.7; }
.book-flow-head a.book-restart { margin-left: auto; color: var(--accent-text); font: 600 13px var(--font-ui); text-decoration: none; }
.book-flow-head a.book-restart:hover { text-decoration: underline; }
.book-flow-head a.book-restart + .book-restart { margin-left: 16px; }
.book-foot { display: flex; flex-wrap: wrap; gap: 10px; margin: 28px 0 0; padding-top: 18px; border-top: 1px solid var(--hair); }
.book-foot .book-btn { text-decoration: none; }
.book-start p { max-width: 760px; font-size: 18px; line-height: 1.7; }
.book-start p.book-hint { margin-top: 0; font-size: 16px; line-height: 1.65; color: var(--text-2); }
.book-start .book-actions { margin-top: 22px; }
.books .page-head .page-lead + .page-lead { margin-top: 1.1em; }
/* «Идеи от ХК AI»: лампочка рядом с поиском и сменой темы, цвет линии переливается */
.hk-bulb-defs { position: absolute; width: 0; height: 0; overflow: hidden; }
.hk-ideas-link {
display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
width: 34px; height: 34px; margin: 0 0 0 auto; padding: 0; border: 0; border-radius: var(--radius);
background: transparent; text-decoration: none; cursor: pointer; transition: background 0.15s ease;
}
.hk-ideas-link + .hk-search-toggle, .hk-ideas-link + .hk-theme-toggle { margin-left: 0; }
.hk-ideas-link:hover, .hk-ideas-link.is-active { background: rgba(var(--wash), 0.07); }
.hk-topbar .hk-ideas-link { margin: 0; }
.hk-bulb { animation: hk-bulb-glow 3.6s ease-in-out infinite; }
.hk-bulb-s1 { animation: hk-bulb-a 4.8s ease-in-out infinite; }
.hk-bulb-s2 { animation: hk-bulb-b 4.8s ease-in-out infinite; }
.hk-bulb-s3 { animation: hk-bulb-c 4.8s ease-in-out infinite; }
@keyframes hk-bulb-a { 0%, 100% { stop-color: #66a1ff; } 33% { stop-color: #ffd37a; } 66% { stop-color: #b99cff; } }
@keyframes hk-bulb-b { 0%, 100% { stop-color: #8fd3ff; } 33% { stop-color: #66a1ff; } 66% { stop-color: #ffd37a; } }
@keyframes hk-bulb-c { 0%, 100% { stop-color: #ffd37a; } 33% { stop-color: #b99cff; } 66% { stop-color: #66a1ff; } }
@keyframes hk-bulb-glow { 0%, 100% { filter: drop-shadow(0 0 0 rgba(255, 211, 122, 0)); } 50% { filter: drop-shadow(0 0 4px rgba(255, 211, 122, 0.55)); } }
@media (prefers-reduced-motion: reduce) { .hk-bulb, .hk-bulb-s1, .hk-bulb-s2, .hk-bulb-s3 { animation: none; } }
a.feature-card { text-decoration: none; text-align: left; cursor: pointer; }
.input-form a.feature-card, .input-form a.feature-card:hover { color: var(--text); }
.input-form a.feature-card .feature-title { color: var(--text); }
.book-sessions-title { margin: 34px 0 12px; font-size: 18px; font-weight: 700; letter-spacing: -.01em; }
.book-sessions { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.book-session { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; margin: 0; padding: 14px 18px; border: 1px solid var(--hair); border-radius: 12px; background: var(--surface); color: var(--text); font: 400 15px var(--font-ui); text-align: left; cursor: pointer; box-shadow: none; transition: background .15s ease, border-color .15s ease; }
.book-session:hover { border-color: var(--hair-2); background: rgba(var(--wash), .035); }
.book-session-top { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 16px; width: 100%; }
.book-session-top b { font-size: 15px; font-weight: 600; }
.book-session-top i { font-size: 13px; font-style: normal; color: var(--text-3); }
.book-session-top i.is-done { color: var(--accent-text); }
.book-session-preview { color: var(--text-2); font-size: 14px; line-height: 1.5; }
.books .book-sessions .book-session { height: auto; min-height: 0; justify-content: flex-start; overflow: hidden; transform: none; }
.books .book-sessions .book-session:hover { transform: none; box-shadow: none; }
.books .book-session-preview { display: block; width: 100%; overflow-wrap: anywhere; }
.book-session-row { position: relative; }
.books .book-sessions .book-session { padding-right: 52px; }
.book-session-del { position: absolute; top: 10px; right: 10px; width: 30px; height: 30px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--text-3); font: 400 14px var(--font-ui); cursor: pointer; box-shadow: none; opacity: 0; transition: opacity .15s ease, background .15s ease, color .15s ease; }
.book-session-row:hover .book-session-del, .book-session-del:focus-visible { opacity: 1; }
.book-session-del:hover { background: rgba(var(--wash), .08); color: var(--text); }
@media (hover: none) { .book-session-del { opacity: .7; } }
.book-btn-danger:hover { color: #ff8a80; border-color: rgba(255, 138, 128, .5); }
/* Светлая тема: лампочка «Идей» насыщеннее, чтобы не терялась на светлом фоне */
:root[data-theme="light"] .hk-bulb-s1 { animation-name: hk-bulb-a-light; }
:root[data-theme="light"] .hk-bulb-s2 { animation-name: hk-bulb-b-light; }
:root[data-theme="light"] .hk-bulb-s3 { animation-name: hk-bulb-c-light; }
:root[data-theme="light"] .hk-bulb { animation-name: hk-bulb-glow-light; }
@keyframes hk-bulb-a-light { 0%, 100% { stop-color: #1f5fd6; } 33% { stop-color: #d97a00; } 66% { stop-color: #7a4fe0; } }
@keyframes hk-bulb-b-light { 0%, 100% { stop-color: #0a86c8; } 33% { stop-color: #1f5fd6; } 66% { stop-color: #d97a00; } }
@keyframes hk-bulb-c-light { 0%, 100% { stop-color: #d97a00; } 33% { stop-color: #7a4fe0; } 66% { stop-color: #1f5fd6; } }
@keyframes hk-bulb-glow-light { 0%, 100% { filter: drop-shadow(0 0 0 rgba(217, 122, 0, 0)); } 50% { filter: drop-shadow(0 0 3px rgba(217, 122, 0, 0.4)); } }
:root[data-theme="light"] .hk-ideas-link { color: var(--text); }
/* Чекбоксы выбора в «Месте Хаоса» (создание задач и действий) и в «Идеях»: заметная рамка в обеих темах */
.chaos-card-head input[type="checkbox"], .chaos-task-line input[type="checkbox"], .book-pick input[type="checkbox"] {
appearance: none; -webkit-appearance: none; flex: none; width: 20px; height: 20px; margin: 0; border: 1.5px solid var(--hair-2);
border-radius: 6px; background: transparent center / 14px no-repeat; cursor: pointer; transition: background-color .15s ease, border-color .15s ease;
}
.chaos-card-head input[type="checkbox"]:hover, .chaos-task-line input[type="checkbox"]:hover, .book-pick input[type="checkbox"]:hover { border-color: var(--accent-text); }
.chaos-card-head input[type="checkbox"]:checked, .chaos-task-line input[type="checkbox"]:checked, .book-pick input[type="checkbox"]:checked {
border-color: #2f6fe0; background-color: #2f6fe0;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.chaos-card-head input[type="checkbox"]:focus-visible, .chaos-task-line input[type="checkbox"]:focus-visible, .book-pick input[type="checkbox"]:focus-visible { outline: 2px solid rgba(var(--accent-rgb), .6); outline-offset: 2px; }
:root[data-theme="light"] .chaos-card-head input[type="checkbox"], :root[data-theme="light"] .chaos-task-line input[type="checkbox"], :root[data-theme="light"] .book-pick input[type="checkbox"] { border-color: rgba(0, 0, 0, .42); background-color: #fff; }
:root[data-theme="light"] .chaos-card-head input[type="checkbox"]:checked, :root[data-theme="light"] .chaos-task-line input[type="checkbox"]:checked, :root[data-theme="light"] .book-pick input[type="checkbox"]:checked { border-color: #2f6fe0; background-color: #2f6fe0; }
.books .book-intro .markdown-content p { color: var(--text-2); }
/* Кнопка «вниз» в беседе: лежит в закреплённом поле ввода, над ним; появляется, когда беседа длиннее экрана и мы не внизу */
.scroll-down-btn {
position: absolute; z-index: 6; left: 50%; top: -44px; transform: translate(-50%, 8px);
display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; margin: 0; padding: 0;
border: 1px solid var(--border-strong); border-radius: 50%; background: var(--surface); color: var(--text);
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.28); cursor: pointer; opacity: 0; pointer-events: none;
transition: opacity .18s ease, transform .18s ease, background .15s ease;
}
.scroll-down-btn.is-visible { opacity: 1; pointer-events: auto; transform: translate(-50%, 0); }
.scroll-down-btn:hover { background: var(--surface-2, var(--surface)); border-color: rgba(var(--accent-rgb), 0.6); }
.scroll-down-btn:focus-visible { outline: 2px solid rgba(var(--accent-rgb), 0.6); outline-offset: 2px; }
:root[data-theme="light"] .scroll-down-btn { box-shadow: 0 6px 18px rgba(0, 0, 0, 0.16); }
@media (prefers-reduced-motion: reduce) { .scroll-down-btn { transition: none; } }
/* Откат беседы к вопросу: кнопка в углу вопроса, на устройствах с мышью видна при наведении */
.question-box .rollback-btn {
position: absolute; top: 14px; right: 16px; display: inline-flex; align-items: center; gap: 6px; height: 32px; margin: 0;
padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 16px; background: var(--surface); color: var(--text-2);
font: 500 13px var(--font-ui); cursor: pointer; box-shadow: none; width: auto; opacity: 0;
transition: opacity .15s ease, color .15s ease, border-color .15s ease;
}
.question-box:hover .rollback-btn, .question-box .rollback-btn:focus-visible { opacity: 1; }
.question-box .rollback-btn:hover { color: var(--text); border-color: rgba(var(--accent-rgb), 0.6); }
.question-box .rollback-btn:disabled { opacity: .5; cursor: default; }
@media (hover: none) { .question-box .rollback-btn { opacity: .75; } }
@media (max-width: 768px) { .question-box .rollback-btn span { display: none; } .question-box .rollback-btn { width: 32px; padding: 0; justify-content: center; } }
/* телефон: кнопка отката крупнее для пальца, текст вопроса не заезжает под неё */
@media (max-width: 768px) {
.question-box .rollback-btn { width: 40px; height: 40px; top: 12px; right: 12px; border-radius: 20px; }
.question-box:has(.rollback-btn) { padding-right: 64px; }
}
@media (max-width: 768px) {
/* по центру высоты вопроса, в том числе у однострочного */
.question-box .rollback-btn { top: 50%; transform: translateY(-50%); }
.question-box:has(.rollback-btn) { min-height: 64px; box-sizing: border-box; }
}
/* общее правило form.input-form button даёт кнопкам отступ сверху 60px: у кнопки «вниз» отступа нет */
form.input-form button.scroll-down-btn { margin: 0; width: 40px; }
/* Телефон: название «ХК AI» стоит сразу после кнопки меню и по центру её высоты (раньше оно висело посередине панели) */
@media (max-width: 768px) {
.hk-topbar { justify-content: flex-start; }
.hk-topbar .hk-topbar-title { display: flex; align-items: center; height: 44px; margin: 0 auto 0 2px; line-height: 1; }
}
/* Сообщения пользователя в беседе: подложка акцентного цвета, чтобы вопросы легко находились среди длинных ответов */
.question-box {
background: rgba(var(--accent-rgb), 0.46);
border: 1px solid rgba(var(--accent-rgb), 0.75);
}
:root[data-theme="light"] .question-box {
background: rgba(47, 111, 224, 0.30);
border-color: rgba(47, 111, 224, 0.6);
}
/* Гостевой режим: счётчик токенов, приглашение создать аккаунт, закрытые модели и качество картинок */
.hk-guest { display: flex; flex-direction: column; gap: 8px; padding: 12px 14px; margin-bottom: 10px; border: 1px solid var(--hair, rgba(var(--wash), .12)); border-radius: 14px; background: rgba(var(--wash), .04); }
.hk-guest-tokens { font-size: 13px; color: var(--text-2); }
.hk-guest-tokens b { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
.hk-guest-cta { margin: 0; font-size: 13px; line-height: 1.4; color: var(--text); font-weight: 600; }
.hk-guest-login { display: block; text-align: center; }
.guest-banner { margin: 0 0 12px; padding: 10px 14px; border-radius: 12px; border: 1px solid rgba(var(--accent-rgb), .35); background: rgba(var(--accent-rgb), .08);
color: var(--text-2); font-size: 13.5px; line-height: 1.45; text-align: center; }
.guest-banner b { color: var(--text); font-variant-numeric: tabular-nums; }
.guest-banner a { color: var(--accent-text); font-weight: 600; text-decoration: none; }
.guest-banner a:hover { text-decoration: underline; }
.model-opt.is-locked { opacity: .62; }
.model-opt-lock { white-space: nowrap; }
.image-seg .is-locked { opacity: .6; }