.kt-ai-brand-row { display: flex; align-items: center; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-4); margin-bottom: var(--kt-ai-space-4); } .kt-ai-brand-logo { height: 24px; width: auto; } .kt-ai-brand-label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } .kt-ai-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: var(--kt-ai-space-2); } .kt-ai-sidebar-footer { padding: var(--kt-ai-space-4); border-top: 1px solid var(--kt-ai-divider); margin-top: auto; } .kt-ai-topbar-left { display: flex; align-items: center; gap: var(--kt-ai-space-4); } .kt-ai-topbar-crumb { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); } .kt-ai-topbar-actions { display: flex; align-items: center; gap: var(--kt-ai-space-3); } .kt-ai-screen { padding: var(--kt-ai-space-8) var(--kt-ai-space-10) var(--kt-ai-space-12); animation: kt-fade-in 0.16s ease; } @keyframes kt-fade-in { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } } .kt-ai-summary-layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--kt-ai-space-6); align-items: start; } .kt-ai-ai-log { position: sticky; top: var(--kt-ai-space-6); max-height: calc(100dvh - 120px); display: flex; flex-direction: column; } .kt-ai-card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-3); margin-bottom: var(--kt-ai-space-4); } .kt-ai-card-title { font-size: var(--kt-ai-text-lg); font-weight: var(--kt-ai-weight-semibold); color: var(--kt-ai-fg); } .kt-ai-card-sub { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg-muted); margin-bottom: var(--kt-ai-space-6); } .kt-ai-ai-log-list { overflow-y: auto; display: flex; flex-direction: column; gap: var(--kt-ai-space-3); flex: 1; } .kt-ai-log-item { display: flex; flex-direction: column; gap: var(--kt-ai-space-2); padding: var(--kt-ai-space-3); background: var(--kt-ai-bg-soft); border: 1px solid var(--kt-ai-divider); border-radius: var(--kt-ai-radius-xl); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } .kt-ai-log-item .log-time { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } .kt-ai-log-item .log-text { color: var(--kt-ai-fg); } .kt-ai-log-item .log-src { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } .kt-ai-cell-warning { background: var(--kt-ai-status-warn-bg); box-shadow: inset 0 0 0 1px var(--kt-ai-status-warn-fg); border-radius: var(--kt-ai-radius-sm); } .kt-ai-cell-editable { cursor: pointer; } .kt-ai-cell-editable:hover { background: var(--kt-ai-bg-hover); } .kt-ai-cell-manual { background: var(--kt-ai-bg-soft); } .kt-ai-cell-actions { display: flex; gap: var(--kt-ai-space-1); } .kt-ai-verify-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--kt-ai-space-6); align-items: start; } .kt-ai-card-section { margin-bottom: var(--kt-ai-space-6); } .kt-ai-field { margin-bottom: var(--kt-ai-space-4); display: flex; flex-direction: column; gap: var(--kt-ai-space-2); } .kt-ai-field label { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); } .kt-ai-recheck-result { display: flex; align-items: center; justify-content: space-between; gap: var(--kt-ai-space-4); padding: var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-xl); background: var(--kt-ai-bg-soft); margin-bottom: var(--kt-ai-space-4); font-size: var(--kt-ai-text-sm); } .kt-ai-recheck-diff { color: var(--kt-ai-fg); font-weight: var(--kt-ai-weight-medium); } .kt-ai-recheck-status { font-size: var(--kt-ai-text-xs); } .kt-ai-drawer-actions { display: flex; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-6); } .kt-ai-drawer-actions .kt-ai-btn { flex: 1; } .kt-ai-recheck-log { margin-top: var(--kt-ai-space-6); display: flex; flex-direction: column; gap: var(--kt-ai-space-3); } .kt-ai-recheck-item { display: flex; justify-content: space-between; align-items: center; gap: var(--kt-ai-space-4); font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); padding: var(--kt-ai-space-3); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-lg); } .kt-ai-recheck-item .ok { color: var(--kt-ai-status-ok-fg); } .kt-ai-recheck-item .bad { color: var(--kt-ai-status-risk-fg); } .kt-ai-dash-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: var(--kt-ai-space-6); align-items: start; } .kt-ai-chart { height: 200px; display: flex; align-items: flex-end; gap: 8px; padding: var(--kt-ai-space-4); position: relative; } .kt-ai-chart .bar { flex: 1; max-width: 28px; min-width: 6px; background: var(--kt-ai-chart-blue); border-radius: 2px; transition: height 0.3s ease; position: relative; display: flex; align-items: flex-end; justify-content: center; } .kt-ai-chart .bar .bar-label { position: absolute; bottom: -20px; font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); transform: rotate(-45deg); width: 80px; white-space: nowrap; text-align: right; } .kt-ai-chat-card { display: flex; flex-direction: column; height: 440px; } .kt-ai-chat-log { flex: 1; overflow-y: auto; display: flex; flex-direction: column; gap: var(--kt-ai-space-3); padding: var(--kt-ai-space-4); background: var(--kt-ai-bg-soft); border-radius: var(--kt-ai-radius-xl); } .kt-ai-chat-msg { padding: var(--kt-ai-space-3) var(--kt-ai-space-4); border-radius: var(--kt-ai-radius-xl); font-size: var(--kt-ai-text-sm); max-width: 85%; line-height: var(--kt-ai-leading-normal); } .kt-ai-chat-bot { background: var(--kt-ai-card-bg); border: 1px solid var(--kt-ai-card-border); color: var(--kt-ai-fg); } .kt-ai-chat-user { background: var(--kt-ai-status-info-bg); color: var(--kt-ai-fg); align-self: flex-end; } .kt-ai-chat-input { display: flex; gap: var(--kt-ai-space-3); margin-top: var(--kt-ai-space-4); } .kt-ai-chat-input .kt-ai-input { flex: 1; } .kt-ai-about { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: var(--kt-ai-space-6); } .kt-ai-about-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--kt-ai-space-4); } .about-field { display: flex; flex-direction: column; gap: var(--kt-ai-space-1); } .about-field label { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-muted); } .about-field span { font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); } .kt-ai-about-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--kt-ai-space-3); } .kt-ai-about-list li { position: relative; padding-left: var(--kt-ai-space-6); font-size: var(--kt-ai-text-sm); color: var(--kt-ai-fg); } .kt-ai-about-list li::before { content: ""; position: absolute; left: 0; top: 7px; width: 6px; height: 6px; border-radius: 50%; background: var(--kt-ai-primary); } @media (max-width: 1100px) { .kt-ai-summary-layout, .kt-ai-verify-layout, .kt-ai-dash-layout { grid-template-columns: 1fr; } .kt-ai-ai-log { position: static; max-height: 320px; } .kt-ai-chat-card { height: 380px; } } @media (max-width: 860px) { .kt-ai-screen { padding: var(--kt-ai-space-6); } .kt-ai-kpi-strip[data-cards="true"] { grid-template-columns: repeat(2, 1fr); } } /* === Дополнительные детали === */ .kt-ai-btn--margin-bottom { margin-bottom: var(--kt-ai-space-4); } .kt-ai-metric-cell { display: flex; flex-direction: column; gap: 2px; } .kt-ai-metric-name { font-weight: var(--kt-ai-weight-medium); color: var(--kt-ai-fg); } .kt-ai-metric-source { font-size: var(--kt-ai-text-2xs); color: var(--kt-ai-fg-faint); } .kt-ai-cell { padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-sm); } .kt-ai-cell-editable { padding: var(--kt-ai-space-2) var(--kt-ai-space-3); border-radius: var(--kt-ai-radius-sm); cursor: pointer; transition: background 0.1s ease; } .kt-ai-cell-editable:hover { background: var(--kt-ai-bg-hover); } .kt-ai-row-actions { display: flex; gap: var(--kt-ai-space-2); flex-wrap: wrap; } .kt-ai-status-cell { width: 1%; white-space: nowrap; } .kt-ai-status-cell-in { display: flex; flex-direction: column; align-items: flex-end; gap: var(--kt-ai-space-2); } .kt-ai-status-cell-in .kt-ai-cell-actions { flex-direction: row; } .file-cell { font-size: var(--kt-ai-text-xs); color: var(--kt-ai-fg-muted); max-width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .kt-ai-table td .kt-ai-chip { margin-right: var(--kt-ai-space-2); } .kt-ai-chart .bar { cursor: pointer; } .kt-ai-chart .bar:hover { opacity: 0.85; background: var(--kt-ai-chart-green); } /* tooltip via data-kt-tip (простой, свой, чтобы не тянуть лишний скрипт) */ .kt-ai-chart .bar[data-kt-tip]:hover::after { content: attr(data-kt-tip); position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: var(--kt-ai-fg); color: var(--kt-ai-bg); padding: 4px 10px; border-radius: var(--kt-ai-radius-lg); font-size: var(--kt-ai-text-2xs); white-space: nowrap; z-index: 50; pointer-events: none; } .kt-ai-topbar-spacer { flex: 1; }