157 lines
4.3 KiB
CSS
157 lines
4.3 KiB
CSS
/* Теория под себя — доработки поверх ДС KT AI (цвета только токенами) */
|
|
|
|
.tk-brand {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-4);
|
|
text-decoration: none;
|
|
color: var(--kt-ai-fg);
|
|
font-size: var(--kt-ai-text-md);
|
|
font-weight: var(--kt-ai-weight-semibold);
|
|
letter-spacing: -0.01em;
|
|
}
|
|
.tk-brand img { display: block; }
|
|
|
|
.tk-nav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-6);
|
|
font-size: var(--kt-ai-text-sm);
|
|
}
|
|
|
|
.tk-hero-title { margin-top: var(--kt-ai-space-6); }
|
|
.tk-hl {
|
|
background: var(--kt-ai-primary-subtle);
|
|
color: var(--kt-ai-primary);
|
|
padding: 0 var(--kt-ai-space-2);
|
|
border-radius: var(--kt-ai-radius-md);
|
|
}
|
|
|
|
.tk-scenarios {
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: var(--kt-ai-space-6);
|
|
}
|
|
|
|
/* Чат-панель */
|
|
.tk-chat {
|
|
display: flex;
|
|
flex-direction: column;
|
|
border: 1px solid var(--kt-ai-card-border);
|
|
border-radius: var(--kt-ai-radius-3xl);
|
|
background: var(--kt-ai-card-bg);
|
|
box-shadow: var(--kt-ai-card-shadow);
|
|
overflow: hidden;
|
|
max-height: 560px;
|
|
}
|
|
.tk-chat-scroll {
|
|
flex: 1 1 auto;
|
|
overflow-y: auto;
|
|
padding: var(--kt-ai-space-6) var(--kt-ai-space-6) var(--kt-ai-space-4);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-4);
|
|
}
|
|
.tk-msg {
|
|
max-width: 78%;
|
|
padding: var(--kt-ai-space-4) var(--kt-ai-space-5);
|
|
border-radius: var(--kt-ai-radius-2xl);
|
|
font-size: var(--kt-ai-text-sm);
|
|
line-height: var(--kt-ai-leading-normal);
|
|
}
|
|
.tk-msg .tk-msg-head {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-3);
|
|
margin-bottom: var(--kt-ai-space-2);
|
|
font-size: var(--kt-ai-text-2xs);
|
|
font-weight: var(--kt-ai-weight-semibold);
|
|
color: var(--kt-ai-fg-muted);
|
|
}
|
|
.tk-msg-user {
|
|
align-self: flex-end;
|
|
background: var(--kt-ai-primary);
|
|
color: var(--kt-ai-fg-on-fill);
|
|
border-bottom-right-radius: var(--kt-ai-radius-xs);
|
|
}
|
|
.tk-msg-user .tk-msg-head { color: var(--kt-ai-fg-on-fill); opacity: .8; }
|
|
.tk-msg-ai {
|
|
align-self: flex-start;
|
|
background: var(--kt-ai-bg-soft);
|
|
border: 1px solid var(--kt-ai-border);
|
|
color: var(--kt-ai-fg);
|
|
border-bottom-left-radius: var(--kt-ai-radius-xs);
|
|
}
|
|
.tk-msg-ai p { margin: 0 0 var(--kt-ai-space-3); }
|
|
.tk-msg-ai p:last-child { margin-bottom: 0; }
|
|
.tk-msg-points {
|
|
margin: var(--kt-ai-space-3) 0 0;
|
|
padding: 0 0 0 var(--kt-ai-space-5);
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--kt-ai-space-2);
|
|
font-size: var(--kt-ai-text-sm);
|
|
color: var(--kt-ai-fg);
|
|
}
|
|
.tk-msg-actions {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
gap: var(--kt-ai-space-3);
|
|
margin-top: var(--kt-ai-space-4);
|
|
}
|
|
.tk-prompt-chip {
|
|
border: 1px solid var(--kt-ai-border);
|
|
background: var(--kt-ai-bg-elevated);
|
|
color: var(--kt-ai-fg);
|
|
border-radius: var(--kt-ai-radius-full);
|
|
padding: var(--kt-ai-space-2) var(--kt-ai-space-5);
|
|
font-size: var(--kt-ai-text-xs);
|
|
cursor: pointer;
|
|
transition: border-color var(--kt-ai-dur-fast) var(--kt-ai-ease-standard);
|
|
}
|
|
.tk-prompt-chip:hover { border-color: var(--kt-ai-primary); color: var(--kt-ai-primary); }
|
|
|
|
/* Композер */
|
|
.tk-composer {
|
|
display: flex;
|
|
align-items: flex-end;
|
|
gap: var(--kt-ai-space-3);
|
|
padding: var(--kt-ai-space-4);
|
|
border-top: 1px solid var(--kt-ai-divider);
|
|
background: var(--kt-ai-bg-elevated);
|
|
}
|
|
.tk-composer-input {
|
|
flex: 1 1 auto;
|
|
border: 1px solid var(--kt-ai-border);
|
|
border-radius: var(--kt-ai-radius-xl);
|
|
background: var(--kt-ai-card-bg);
|
|
color: var(--kt-ai-fg);
|
|
font: inherit;
|
|
font-size: var(--kt-ai-text-sm);
|
|
padding: var(--kt-ai-space-3) var(--kt-ai-space-4);
|
|
resize: none;
|
|
min-height: var(--kt-ai-control-h-md);
|
|
max-height: 120px;
|
|
}
|
|
.tk-composer-input:focus { outline: none; border-color: var(--kt-ai-primary); box-shadow: var(--kt-ai-focus-shadow); }
|
|
.tk-chat-hint { margin: 0; padding: var(--kt-ai-space-3) var(--kt-ai-space-4) 0; }
|
|
|
|
/* CTA-форма */
|
|
.tk-contact-field { width: min(360px, 100%); margin: 0 auto; }
|
|
.tk-cta-note { min-height: 1.2em; }
|
|
|
|
/* Подвал */
|
|
.tk-footnav {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--kt-ai-space-6);
|
|
}
|
|
|
|
/* Узкие экраны */
|
|
@media (max-width: 640px) {
|
|
.tk-nav { gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); }
|
|
.tk-brand span { display: none; }
|
|
.tk-msg { max-width: 92%; }
|
|
.tk-footnav { flex-direction: column; align-items: flex-end; gap: var(--kt-ai-space-2); }
|
|
}
|