/* =========================================================================
MedicalBot — app.css
Single source of truth dla design systemu.
Wdrożenie: projekt Blazor, .NET 8. Statyczny zasób, linkowany z _Host.cshtml.
Struktura pliku:
1. :root — design tokens (kolory, spacing, radius, typo, z-index, breakpointy)
2. Reset + base styles
3. Layout primitives (shell, sidebar, content)
4. Components (buttons, inputs, selects, tables, badges, alerts, cards, modal)
5. Module-specific (chat, access matrix)
Zasada: komponenty NIE używają hard-codowanych wartości — tylko zmienne z :root.
========================================================================= */
/* ============================================================
1. DESIGN TOKENS
============================================================ */
:root {
/* --- Color · Brand (granat ZARYS) ------------------------- */
--color-brand-50: #eef2f8;
--color-brand-100: #d9e2ef;
--color-brand-200: #b4c3db;
--color-brand-300: #7e97bd;
--color-brand-400: #4c6a97;
--color-brand-500: #1e3358;
--color-brand-600: #172845;
--color-brand-700: #0f1d36; /* sidebar bg */
--color-brand-800: #0a1528;
--color-brand-900: #050a18;
/* Aliasy semantyczne — używaj ich w komponentach */
--color-brand: var(--color-brand-700);
--color-brand-hover: var(--color-brand-600);
--color-brand-active: var(--color-brand-800);
--color-brand-accent: #79b4ff; /* niebieski akcent dla active state w sidebarze */
/* --- Color · Neutral (warm slate) ------------------------- */
--color-neutral-0: #ffffff;
--color-neutral-50: #f6f7f9; /* background app */
--color-neutral-100: #eef0f4; /* background sub (sidebar rozmów w chacie) */
--color-neutral-200: #e3e6eb; /* borders subtle */
--color-neutral-300: #ced2da; /* borders default */
--color-neutral-400: #9aa0ad; /* muted text, placeholders */
--color-neutral-500: #6b7180; /* secondary text */
--color-neutral-600: #4a4f5c;
--color-neutral-700: #2e323c;
--color-neutral-800: #1d2027; /* primary text */
--color-neutral-900: #0d0f14;
/* --- Color · State --------------------------------------- */
--color-success-50: #edf8f1;
--color-success-100: #d1ecdb;
--color-success-500: #1f9254;
--color-success-700: #155d37;
--color-warning-50: #fdf6e4;
--color-warning-100: #f8e7b0;
--color-warning-500: #a77905;
--color-warning-700: #6b4d02;
--color-danger-50: #fdeceb;
--color-danger-100: #f8cfcc;
--color-danger-500: #c42b1c;
--color-danger-700: #8a1c11;
--color-info-50: #eaf3fb;
--color-info-100: #c9e0f5;
--color-info-500: #1572cb;
--color-info-700: #0f548f;
/* --- Color · Semantic aliases (używaj w komponentach) ----- */
--color-bg: var(--color-neutral-50);
--color-bg-sub: var(--color-neutral-100);
--color-surface: var(--color-neutral-0);
--color-surface-raised: var(--color-neutral-0);
--color-text-primary: var(--color-neutral-800);
--color-text-secondary: var(--color-neutral-500);
--color-text-muted: var(--color-neutral-400);
--color-text-inverse: var(--color-neutral-0);
--color-text-brand: var(--color-brand-700);
--color-text-link: var(--color-brand-600);
--color-text-danger: var(--color-danger-500);
--color-border: var(--color-neutral-200);
--color-border-strong: var(--color-neutral-300);
--color-border-focus: var(--color-brand-500);
/* --- Spacing (skala 4px) --------------------------------- */
--space-2xs: 2px;
--space-xs: 4px;
--space-sm: 8px;
--space-md: 12px;
--space-lg: 16px;
--space-xl: 24px;
--space-2xl: 32px;
--space-3xl: 48px;
--space-4xl: 64px;
/* --- Radius --------------------------------------------- */
--radius-xs: 3px;
--radius-sm: 4px;
--radius-md: 6px;
--radius-lg: 8px;
--radius-xl: 12px;
--radius-2xl: 16px;
--radius-full: 9999px;
/* --- Typography ----------------------------------------- */
--font-sans: "Inter", -apple-system, "Segoe UI", system-ui, sans-serif;
--font-mono: "JetBrains Mono", "SF Mono", ui-monospace, "Cascadia Code", monospace;
--font-size-2xs: 10px; /* captions, labels mono, counts */
--font-size-xs: 11px; /* metadata, timestamps */
--font-size-sm: 12px; /* small body, table cells dense */
--font-size-base: 13px; /* default UI text */
--font-size-md: 14px; /* body copy, primary text */
--font-size-lg: 15px; /* lede, card titles */
--font-size-xl: 17px; /* section headings */
--font-size-2xl: 24px; /* page H2 */
--font-size-3xl: 32px; /* page H1 */
--font-size-4xl: 40px;
--font-weight-regular: 400;
--font-weight-medium: 500;
--font-weight-semibold: 600;
--font-weight-bold: 700;
--line-height-tight: 1.2; /* headings */
--line-height-snug: 1.35; /* UI elements, buttons */
--line-height-normal: 1.5; /* body */
--line-height-relaxed: 1.65; /* long-form (odpowiedzi chatu) */
--letter-spacing-tight: -0.02em; /* duże nagłówki */
--letter-spacing-snug: -0.01em; /* średnie nagłówki */
--letter-spacing-normal: 0;
--letter-spacing-wide: 0.04em;
--letter-spacing-wider: 0.08em; /* uppercase labels */
--letter-spacing-widest: 0.12em; /* uppercase eyebrow labels */
/* --- Elevation ----------------------------------------- */
--shadow-xs: 0 1px 2px rgba(15, 29, 54, 0.04);
--shadow-sm: 0 1px 2px rgba(15, 29, 54, 0.06), 0 1px 3px rgba(15, 29, 54, 0.04);
--shadow-md: 0 4px 8px rgba(15, 29, 54, 0.06), 0 2px 4px rgba(15, 29, 54, 0.04);
--shadow-lg: 0 8px 20px rgba(15, 29, 54, 0.08), 0 4px 8px rgba(15, 29, 54, 0.04);
--shadow-xl: 0 20px 40px rgba(15, 29, 54, 0.12), 0 8px 16px rgba(15, 29, 54, 0.06);
/* --- Focus ring --------------------------------------- */
--focus-ring-width: 3px;
--focus-ring-color: rgba(30, 51, 88, 0.25);
--focus-ring: 0 0 0 var(--focus-ring-width) var(--focus-ring-color);
/* --- Motion ------------------------------------------- */
--ease-out: cubic-bezier(0.2, 0.8, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
--duration-fast: 120ms;
--duration-normal: 200ms;
--duration-slow: 320ms;
/* --- Layout dimensions -------------------------------- */
--shell-sidebar-width: 248px;
--shell-content-max-width: 1360px;
--shell-topnav-max-width: 1360px;
--chat-convo-sidebar-width: 260px;
--chat-message-max-width: 780px;
--login-card-max-width: 420px;
/* --- Breakpoints (do użycia w @media) ------------------ */
/* uwaga: CSS nie wspiera var() w @media — te stałe są tylko referencją dla dev */
/* --breakpoint-sm: 640px; --breakpoint-md: 768px; --breakpoint-lg: 1024px; --breakpoint-xl: 1280px; */
/* --- Z-index scale ------------------------------------ */
--z-base: 0;
--z-dropdown: 100;
--z-sticky: 200;
--z-overlay: 800;
--z-modal: 900;
--z-toast: 1000;
--z-tooltip: 1100;
}
/* ============================================================
2. RESET + BASE
============================================================ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
margin: 0;
font-family: var(--font-sans);
font-size: var(--font-size-base);
line-height: var(--line-height-normal);
color: var(--color-text-primary);
background: var(--color-bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
font-feature-settings: "ss01", "cv11";
}
h1, h2, h3, h4, h5, h6, p { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; }
button { background: none; border: none; padding: 0; cursor: pointer; }
a { color: var(--color-text-link); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible { outline: var(--focus-ring-width) solid var(--color-border-focus); outline-offset: 2px; border-radius: var(--radius-xs); }
code, kbd, samp {
font-family: var(--font-mono);
font-size: 0.92em;
}
/* ============================================================
3. LAYOUT — SHELL
============================================================ */
.app-shell {
display: flex;
flex-direction: column;
height: 100vh;
background: var(--color-bg);
}
/* --- Topnav (granatowy pasek główny) -------------------- */
.app-topnav {
background: var(--color-brand-700);
flex-shrink: 0;
z-index: var(--z-sticky);
}
.app-topnav__inner {
max-width: var(--shell-topnav-max-width);
margin: 0 auto;
height: 52px;
padding: 0 var(--space-xl);
display: flex;
align-items: center;
gap: 28px;
}
.app-topnav__brand {
display: flex;
align-items: center;
gap: var(--space-md);
flex-shrink: 0;
}
.app-topnav__logo {
width: 28px; height: 28px;
border-radius: 7px;
background: var(--color-neutral-0);
color: var(--color-brand-700);
display: grid; place-items: center;
font-weight: var(--font-weight-bold);
font-size: 14px;
flex-shrink: 0;
}
.app-topnav__brand-name {
color: var(--color-neutral-0);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.005em;
}
.app-topnav__version {
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
color: rgba(255, 255, 255, 0.4);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
border: 1px solid rgba(255, 255, 255, 0.15);
border-radius: var(--radius-xs);
padding: 1px 5px;
}
.app-topnav__nav {
display: flex;
align-items: center;
gap: 2px;
flex: 1;
}
.app-topnav__sep {
display: inline-block;
width: 1px;
height: 16px;
background: rgba(255, 255, 255, 0.14);
margin: 0 10px;
flex-shrink: 0;
}
.app-topnav__label {
display: inline-grid;
}
.app-topnav__label > * {
grid-area: 1 / 1;
}
.app-topnav__label-ghost {
font-weight: var(--font-weight-semibold);
visibility: hidden;
pointer-events: none;
user-select: none;
}
.app-topnav__link {
display: inline-flex;
align-items: center;
gap: 7px;
padding: 7px 12px;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: rgba(255, 255, 255, 0.7);
text-decoration: none;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-topnav__link:hover {
background: rgba(255, 255, 255, 0.07);
color: var(--color-neutral-0);
text-decoration: none;
}
.app-topnav__link.active {
background: rgba(255, 255, 255, 0.1);
color: var(--color-neutral-0);
font-weight: var(--font-weight-semibold);
}
.app-topnav__link:focus-visible {
outline: 2px solid var(--color-brand-accent);
outline-offset: -2px;
}
.app-topnav__right {
display: flex;
align-items: center;
gap: 14px;
flex-shrink: 0;
}
/* --- Subnav (biały pasek modułu) ------------------------ */
.app-subnav {
background: var(--color-surface);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.app-subnav__inner {
max-width: var(--shell-topnav-max-width);
margin: 0 auto;
height: 44px;
padding: 0 var(--space-xl);
display: flex;
align-items: stretch;
}
.app-subnav__inner nav {
display: flex;
align-items: stretch;
}
/* Linki w subnavie — override stylów ciemnego sidebara */
.app-subnav__inner .app-nav__link--sub {
color: var(--color-text-secondary);
font-size: var(--font-size-base);
font-weight: var(--font-weight-regular);
padding: 0 14px;
border-radius: 0;
margin: 0;
border-bottom: 2px solid transparent;
margin-bottom: -1px;
background: transparent;
transition: color var(--duration-fast) var(--ease-out);
}
.app-subnav__inner .app-nav__link--sub:hover {
background: transparent;
color: var(--color-text-primary);
}
.app-subnav__inner .app-nav__link--sub[aria-current="page"] {
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
background: transparent;
border-bottom: 2px solid var(--color-brand-700);
}
.app-subnav__inner .app-nav__link--sub[aria-current="page"]::before {
display: none;
}
.app-subnav__inner .app-nav__link--sub[aria-disabled="true"] {
color: var(--color-text-muted);
cursor: not-allowed;
pointer-events: none;
}
.app-subnav__inner .app-nav__count {
background: var(--color-neutral-100);
color: var(--color-text-muted);
}
/* --- Nav links (subnav modułów) -------------------------- */
.app-nav__link {
display: flex;
align-items: center;
gap: 11px;
padding: var(--space-sm) 10px;
margin: 1px 0;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: rgba(255, 255, 255, 0.78);
cursor: pointer;
text-decoration: none;
position: relative;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.app-nav__link:hover {
background: rgba(255, 255, 255, 0.05);
color: var(--color-neutral-0);
text-decoration: none;
}
.app-nav__link:focus-visible {
outline: 2px solid var(--color-brand-accent);
outline-offset: -2px;
}
.app-nav__link[aria-current="page"],
.app-nav__link.is-active {
background: rgba(255, 255, 255, 0.09);
color: var(--color-neutral-0);
font-weight: var(--font-weight-medium);
}
.app-nav__link[aria-current="page"]::before,
.app-nav__link.is-active::before {
content: "";
position: absolute;
left: -12px;
top: 10px;
bottom: 10px;
width: 2px;
background: var(--color-brand-accent);
border-radius: 2px;
}
.app-nav__link[aria-disabled="true"] {
color: rgba(255, 255, 255, 0.28);
cursor: not-allowed;
pointer-events: none;
}
.app-nav__link--sub {
color: rgba(255, 255, 255, 0.66);
font-size: var(--font-size-sm);
padding-left: var(--space-md);
}
.app-nav__link--sub:hover { color: rgba(255, 255, 255, 0.92); }
.app-nav__count {
margin-left: auto;
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
background: rgba(255, 255, 255, 0.08);
padding: 1px 6px;
border-radius: var(--radius-full);
color: rgba(255, 255, 255, 0.7);
}
.app-env {
display: flex; align-items: center; gap: 7px;
font-size: var(--font-size-2xs);
color: rgba(255, 255, 255, 0.5);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
padding: 0 var(--space-xs);
}
.app-env__pulse {
width: 6px; height: 6px; border-radius: 50%;
background: #4ade80;
box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45);
animation: env-pulse 2s var(--ease-out) infinite;
}
@keyframes env-pulse {
0% { box-shadow: 0 0 0 0 rgba(74, 222, 128, 0.45); }
100% { box-shadow: 0 0 0 6px rgba(74, 222, 128, 0); }
}
.app-user {
display: grid;
grid-template-columns: 32px 1fr auto;
gap: 10px;
align-items: center;
background: rgba(255, 255, 255, 0.04);
border: 1px solid rgba(255, 255, 255, 0.06);
border-radius: var(--radius-lg);
padding: var(--space-sm) var(--space-sm) var(--space-sm) 10px;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.app-user:hover { background: rgba(255, 255, 255, 0.07); }
.app-user:focus-visible { outline: 2px solid var(--color-brand-accent); outline-offset: 2px; }
.app-user__avatar {
width: 32px; height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, var(--color-brand-accent), var(--color-brand-500));
color: var(--color-neutral-0);
display: grid; place-items: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.app-user__meta { min-width: 0; }
.app-user__name {
color: var(--color-neutral-0);
font-size: 12.5px;
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-user__role {
color: rgba(255, 255, 255, 0.5);
font-size: 10.5px;
font-family: var(--font-mono);
margin-top: 1px;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-user__menu-btn {
color: rgba(255, 255, 255, 0.5);
padding: var(--space-xs);
border-radius: var(--radius-sm);
}
.app-user__menu-btn:hover {
background: rgba(255, 255, 255, 0.08);
color: var(--color-neutral-0);
}
/* --- Main (content) ------------------------------------ */
.app-main {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow: hidden;
background: var(--color-bg);
}
.app-main__scroll {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.app-main__inner {
max-width: var(--shell-content-max-width);
margin: 0 auto;
width: 100%;
}
.app-main__inner--fill {
flex: 1;
min-height: 0;
display: flex;
flex-direction: column;
overflow-y: auto;
}
.app-page {
padding: 40px var(--space-3xl);
max-width: var(--shell-content-max-width);
}
/* --- Page header ---------------------------------------- */
.page-crumbs {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-bottom: var(--space-sm);
letter-spacing: var(--letter-spacing-wide);
}
.page-crumbs__current { color: var(--color-text-primary); }
.page-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: 20px;
margin-bottom: 28px;
}
.page-header__actions {
display: flex; gap: var(--space-sm);
align-items: center;
flex-shrink: 0;
}
.page-title {
font-size: var(--font-size-3xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: var(--line-height-tight);
max-width: 720px;
}
.page-lede {
font-size: var(--font-size-lg);
color: var(--color-text-secondary);
max-width: 620px;
margin-top: 10px;
line-height: 1.55;
}
/* --- KPI strip ----------------------------------------- */
.kpi-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
border-top: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
padding: 20px 0;
margin: var(--space-2xl) 0;
}
.kpi {
padding: 0 var(--space-xl);
border-right: 1px solid var(--color-border);
}
.kpi:last-child { border-right: none; }
.kpi:first-child { padding-left: 0; }
.kpi__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.kpi__value {
font-size: 30px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
margin-top: 6px;
line-height: 1;
font-feature-settings: "tnum";
}
.kpi__delta {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
margin-top: 6px;
font-family: var(--font-mono);
}
/* ============================================================
4. COMPONENTS
============================================================ */
/* --- Button --------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
height: 34px;
padding: 0 14px;
border: 1px solid transparent;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
line-height: var(--line-height-snug);
white-space: nowrap;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.btn:focus-visible {
outline: none;
box-shadow: var(--focus-ring);
}
.btn[disabled], .btn:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.btn--sm { height: 28px; padding: 0 10px; font-size: var(--font-size-sm); }
.btn--lg { height: 40px; padding: 0 18px; font-size: var(--font-size-md); }
/* variants */
.btn--primary {
background: var(--color-brand);
color: var(--color-text-inverse);
border-color: var(--color-brand);
}
.btn--primary:hover:not(:disabled) { background: var(--color-brand-hover); border-color: var(--color-brand-hover); }
.btn--primary:active:not(:disabled) { background: var(--color-brand-active); border-color: var(--color-brand-active); }
.btn--secondary {
background: var(--color-surface);
color: var(--color-text-primary);
border-color: var(--color-border-strong);
}
.btn--secondary:hover:not(:disabled) { background: var(--color-neutral-50); border-color: var(--color-neutral-400); }
.btn--secondary:active:not(:disabled) { background: var(--color-neutral-100); }
.btn--ghost {
background: transparent;
color: var(--color-text-secondary);
border-color: transparent;
}
.btn--ghost:hover:not(:disabled) { background: var(--color-neutral-100); color: var(--color-text-primary); }
.btn--ghost:active:not(:disabled) { background: var(--color-neutral-200); }
.btn--danger {
background: var(--color-danger-500);
color: var(--color-text-inverse);
border-color: var(--color-danger-500);
}
.btn--danger:hover:not(:disabled) { background: var(--color-danger-700); border-color: var(--color-danger-700); }
.btn--icon {
width: 34px; padding: 0;
}
.btn--icon.btn--sm { width: 28px; }
/* loading state */
.btn--loading { position: relative; color: transparent !important; pointer-events: none; }
.btn--loading::after {
content: "";
position: absolute;
inset: 0;
margin: auto;
width: 14px; height: 14px;
border: 2px solid currentColor;
border-bottom-color: transparent;
border-radius: 50%;
color: var(--color-text-inverse);
animation: btn-spin 0.7s linear infinite;
}
.btn--secondary.btn--loading::after,
.btn--ghost.btn--loading::after { color: var(--color-text-primary); }
@keyframes btn-spin { to { transform: rotate(360deg); } }
/* --- Icon button (naked) ------------------------------- */
.icon-btn {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
color: var(--color-text-muted);
display: inline-grid; place-items: center;
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.icon-btn:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.icon-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.icon-btn[disabled] { opacity: 0.4; cursor: not-allowed; }
/* --- Input / Textarea / Select ------------------------ */
.field {
display: flex;
flex-direction: column;
gap: 6px;
}
.field__label {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-xs);
}
.field__label--required::after {
content: "*";
color: var(--color-danger-500);
font-weight: var(--font-weight-regular);
}
.field__hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: var(--line-height-snug);
}
.field__error {
font-size: var(--font-size-xs);
color: var(--color-danger-500);
line-height: var(--line-height-snug);
display: flex; align-items: center; gap: 5px;
}
.input,
.textarea,
.select {
width: 100%;
height: 34px;
padding: 0 10px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--color-text-primary);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.input::placeholder, .textarea::placeholder { color: var(--color-text-muted); }
.input:hover:not(:disabled):not([readonly]),
.textarea:hover:not(:disabled):not([readonly]),
.select:hover:not(:disabled) { border-color: var(--color-neutral-400); }
.input:focus,
.textarea:focus,
.select:focus {
outline: none;
border-color: var(--color-border-focus);
box-shadow: var(--focus-ring);
}
.input:disabled, .textarea:disabled, .select:disabled {
background: var(--color-neutral-100);
color: var(--color-text-muted);
cursor: not-allowed;
}
.input[readonly], .textarea[readonly] {
background: var(--color-neutral-50);
color: var(--color-text-secondary);
cursor: default;
}
.input.is-error,
.textarea.is-error,
.select.is-error {
border-color: var(--color-danger-500);
}
.input.is-error:focus,
.textarea.is-error:focus,
.select.is-error:focus {
box-shadow: 0 0 0 var(--focus-ring-width) rgba(196, 43, 28, 0.2);
}
.textarea { height: auto; min-height: 80px; padding: var(--space-sm) 10px; line-height: var(--line-height-normal); resize: vertical; }
.select {
appearance: none;
padding-right: 28px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
cursor: pointer;
}
/* Search input (with icon slot) */
.input--search {
padding-left: 30px;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: 10px center;
}
/* Checkbox / Radio */
.checkbox, .radio {
width: 16px; height: 16px;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-xs);
background: var(--color-surface);
display: inline-grid; place-items: center;
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
appearance: none;
flex-shrink: 0;
}
.radio { border-radius: 50%; }
.checkbox:hover, .radio:hover { border-color: var(--color-neutral-400); }
.checkbox:focus-visible, .radio:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.checkbox:checked, .radio:checked {
background: var(--color-brand);
border-color: var(--color-brand);
}
.checkbox:checked::after {
content: "";
width: 9px; height: 5px;
border: 2px solid var(--color-neutral-0);
border-top: none; border-right: none;
transform: translateY(-1px) rotate(-45deg);
}
.radio:checked::after {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-neutral-0);
}
.checkbox:disabled, .radio:disabled { opacity: 0.5; cursor: not-allowed; }
/* --- Badge / Chip ------------------------------------- */
.badge {
display: inline-flex;
align-items: center;
gap: var(--space-xs);
height: 20px;
padding: 0 var(--space-sm);
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-family: var(--font-mono);
white-space: nowrap;
}
.badge--neutral { background: var(--color-neutral-100); color: var(--color-text-secondary); }
.badge--brand { background: var(--color-brand-50); color: var(--color-brand-700); }
.badge--success { background: var(--color-success-50); color: var(--color-success-700); }
.badge--warning { background: var(--color-warning-50); color: var(--color-warning-700); }
.badge--danger { background: var(--color-danger-50); color: var(--color-danger-700); }
.badge--info { background: var(--color-info-50); color: var(--color-info-700); }
/* Permission chip (None / Read / Write / Admin) */
.perm-chip {
display: inline-flex;
align-items: center;
gap: 5px;
height: 22px;
padding: 0 10px;
border-radius: var(--radius-full);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
}
.perm-chip--none { background: var(--color-neutral-100); color: var(--color-text-muted); }
.perm-chip--user { background: var(--color-primary-50); color: var(--color-primary-700); }
.perm-chip--admin { background: var(--color-success-50); color: var(--color-success-700); }
/* --- Alert ----------------------------------------------- */
.alert {
display: grid;
grid-template-columns: 20px 1fr;
gap: 12px;
padding: var(--space-md) var(--space-lg);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
align-items: start;
}
.alert__icon { color: var(--color-text-muted); flex-shrink: 0; margin-top: 2px; }
.alert__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
margin-bottom: 3px;
}
.alert__body {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-normal);
}
.alert--info { background: var(--color-info-50); border-color: var(--color-info-100); }
.alert--info .alert__icon { color: var(--color-info-500); }
.alert--success { background: var(--color-success-50); border-color: var(--color-success-100); }
.alert--success .alert__icon { color: var(--color-success-500); }
.alert--warning { background: var(--color-warning-50); border-color: var(--color-warning-100); }
.alert--warning .alert__icon { color: var(--color-warning-500); }
.alert--danger { background: var(--color-danger-50); border-color: var(--color-danger-100); }
.alert--danger .alert__icon { color: var(--color-danger-500); }
/* --- Card ----------------------------------------------- */
.card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
transition: transform var(--duration-normal) var(--ease-out),
box-shadow var(--duration-normal) var(--ease-out),
border-color var(--duration-normal) var(--ease-out);
}
.card--link {
cursor: pointer;
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
}
.card--link:hover {
transform: translateY(-1px);
box-shadow: var(--shadow-md);
border-color: var(--color-border-strong);
text-decoration: none;
}
.card--link:focus-visible { outline: none; box-shadow: var(--focus-ring); border-color: var(--color-border-focus); }
.card__icon {
width: 40px; height: 40px;
border-radius: 9px;
background: var(--color-brand-50);
color: var(--color-brand-700);
display: grid; place-items: center;
margin-bottom: 14px;
}
.card__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
}
.card__body {
font-size: var(--font-size-base);
color: var(--color-text-secondary);
line-height: 1.55;
margin-top: 6px;
}
.card__foot {
margin-top: auto;
padding-top: var(--space-lg);
display: flex;
justify-content: space-between;
align-items: center;
font-size: var(--font-size-sm);
color: var(--color-text-muted);
border-top: 1px solid var(--color-neutral-100);
}
.card__foot-cta { color: var(--color-text-link); font-weight: var(--font-weight-medium); }
/* --- Table ----------------------------------------------- */
.table-wrap {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: var(--font-size-base);
}
.table th, .table td {
padding: var(--space-md) var(--space-lg);
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.table th {
background: var(--color-neutral-50);
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
white-space: nowrap;
}
.table tbody tr {
transition: background var(--duration-fast) var(--ease-out);
}
.table tbody tr:hover { background: var(--color-neutral-50); }
.table tbody tr:last-child td { border-bottom: none; }
.table tbody tr.is-selected { background: var(--color-brand-50); }
.table tbody tr.is-selected:hover { background: var(--color-brand-100); }
/* wiersz z niezapisanymi zmianami */
.table tbody tr.is-dirty {
background: var(--color-warning-50);
position: relative;
}
.table tbody tr.is-dirty td:first-child {
box-shadow: inset 3px 0 0 var(--color-warning-500);
}
.table tbody tr.is-dirty:hover { background: var(--color-warning-100); }
.table__empty {
padding: var(--space-4xl) var(--space-xl);
text-align: center;
color: var(--color-text-muted);
}
/* --- Modal ----------------------------------------------- */
.modal-overlay {
position: fixed;
inset: 0;
background: rgba(15, 29, 54, 0.4);
display: grid;
place-items: center;
z-index: var(--z-modal);
padding: var(--space-xl);
}
.modal {
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: 100%;
max-width: 480px;
max-height: 90vh;
display: flex;
flex-direction: column;
}
.modal__head {
padding: var(--space-xl) var(--space-xl) var(--space-md);
display: flex;
justify-content: space-between;
align-items: start;
gap: var(--space-md);
}
.modal__title {
font-size: var(--font-size-xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
}
.modal__body {
padding: 0 var(--space-xl) var(--space-xl);
font-size: var(--font-size-md);
color: var(--color-text-secondary);
line-height: var(--line-height-relaxed);
overflow-y: auto;
}
.modal__foot {
padding: var(--space-lg) var(--space-xl);
border-top: 1px solid var(--color-border);
display: flex;
justify-content: flex-end;
gap: var(--space-sm);
}
/* --- Auth / Login (split) ------------------------------- */
.auth-layout {
min-height: 100vh;
height: 100vh;
display: grid;
grid-template-columns: 50% 50%;
grid-template-rows: 100%;
background: var(--color-bg);
width: 100%;
max-width: 100%;
overflow: hidden;
}
.auth-layout > * { min-width: 0; min-height: 0; height: 100%; }
/* --- LEFT: hero with grid pattern, bottom-aligned content -- */
.auth-hero {
position: relative;
overflow: hidden;
color: var(--color-neutral-0);
background-color: #0a1628;
display: flex;
flex-direction: column;
justify-content: flex-end;
padding: 64px;
}
.auth-hero__bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
transform: scale(1.15);
transform-origin: center;
}
.auth-hero__content {
position: relative;
z-index: 1;
display: flex;
flex-direction: column;
}
.auth-hero__eyebrow {
display: inline-flex; align-items: center; gap: 8px;
font-size: 11px;
font-family: var(--font-mono);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: rgba(255,255,255,.6);
margin-bottom: var(--space-md);
}
.auth-hero__eyebrow::before {
content: ""; width: 6px; height: 6px; border-radius: 50%;
background: #9ef0c8; box-shadow: 0 0 0 3px rgba(158,240,200,.22);
}
.auth-hero__brand {
display: flex; align-items: center; gap: var(--space-sm);
margin-bottom: var(--space-lg);
}
.auth-hero__logo {
width: 32px; height: 32px; border-radius: var(--radius-md);
background: rgba(255,255,255,.12);
border: 1px solid rgba(255,255,255,.24);
display: grid; place-items: center;
font-weight: var(--font-weight-bold); font-size: var(--font-size-md);
color: var(--color-neutral-0);
}
.auth-hero__brand-name { font-weight: var(--font-weight-semibold); font-size: var(--font-size-md); }
.auth-hero__brand-meta { color: rgba(255,255,255,.56); font-size: var(--font-size-sm); }
.auth-hero__title {
font-size: 40px;
line-height: 1.1;
letter-spacing: var(--letter-spacing-tight);
font-weight: var(--font-weight-semibold);
text-wrap: pretty;
max-width: 520px;
margin-bottom: var(--space-lg);
}
.auth-hero__lede {
font-size: var(--font-size-md);
color: rgba(255,255,255,.66);
line-height: var(--line-height-relaxed);
max-width: 440px;
margin-bottom: var(--space-2xl);
}
.auth-hero__modules {
display: flex; flex-direction: column; gap: var(--space-sm);
max-width: 420px;
}
.auth-hero__module {
display: grid;
grid-template-columns: 92px 1fr;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-sm);
color: rgba(255,255,255,.82);
}
.auth-hero__module-tag {
font-family: var(--font-mono);
font-size: 10px;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: rgba(255,255,255,.7);
background: rgba(255,255,255,.08);
border: 1px solid rgba(255,255,255,.18);
border-radius: var(--radius-sm);
padding: 4px 8px;
text-align: center;
font-weight: var(--font-weight-medium);
white-space: nowrap;
justify-self: start;
}
/* --- RIGHT: form panel ------------------- */
.auth-pane {
display: flex; align-items: center; justify-content: center;
padding: var(--space-3xl) var(--space-2xl);
background: var(--color-neutral-0);
}
.auth-card {
width: 100%;
max-width: 400px;
padding: 0;
border: 0;
box-shadow: none;
background: transparent;
}
.auth-card__brand {
display: flex;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-2xl);
}
.auth-card__logo {
width: 36px; height: 36px;
border-radius: var(--radius-lg);
background: var(--color-brand-700);
color: var(--color-neutral-0);
display: grid; place-items: center;
font-weight: var(--font-weight-bold);
font-size: var(--font-size-lg);
}
.auth-card__title {
font-size: 28px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
margin-bottom: 6px;
}
.auth-card__subtitle {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
margin-bottom: var(--space-2xl);
}
.auth-card__row {
display: flex; justify-content: space-between; align-items: center;
font-size: var(--font-size-sm);
}
.auth-card__link {
color: var(--color-brand-700);
text-decoration: none;
font-weight: var(--font-weight-medium);
}
.auth-card__link:hover { text-decoration: underline; }
.auth-form { display: flex; flex-direction: column; gap: var(--space-lg); }
.auth-foot {
margin-top: var(--space-2xl);
padding-top: var(--space-lg);
border-top: 1px solid var(--color-border);
display: flex; justify-content: space-between;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
@media (max-width: 767px) {
.auth-layout {
display: block;
position: relative;
}
.auth-hero {
position: fixed;
inset: 0;
width: 100%;
height: 100%;
}
.auth-hero__content {
display: none;
}
.auth-pane {
position: relative;
z-index: 1;
min-height: 100vh;
background: transparent;
padding: var(--space-2xl) var(--space-lg);
}
.auth-card {
background: var(--color-neutral-0);
border-radius: var(--radius-xl);
padding: var(--space-2xl) var(--space-xl);
box-shadow: 0 8px 40px rgba(0,0,0,0.35);
max-width: 400px;
}
}
/* ============================================================
5. MODULE: CHAT
============================================================ */
.chat-layout {
display: grid;
grid-template-columns: var(--chat-convo-sidebar-width) 1fr;
height: 100%;
min-height: 0;
background: var(--color-bg);
}
.chat-convos {
border-right: 1px solid var(--color-border);
display: flex;
flex-direction: column;
background: var(--color-bg-sub);
min-height: 0;
}
.chat-convos__top {
padding: var(--space-lg) var(--space-lg) var(--space-md);
display: flex; flex-direction: column;
gap: 10px;
border-bottom: 1px solid var(--color-border);
}
.chat-convos__list {
flex: 1;
overflow-y: auto;
padding: var(--space-sm) var(--space-sm) var(--space-lg);
}
.chat-convos__group-label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
padding: var(--space-md) 10px var(--space-xs);
}
.chat-convo {
display: block;
padding: 9px 11px;
border-radius: var(--radius-md);
cursor: pointer;
line-height: var(--line-height-snug);
text-decoration: none;
color: inherit;
}
.chat-convo:hover { background: rgba(15, 29, 54, 0.04); text-decoration: none; }
.chat-convo.is-active,
.chat-convo[aria-current="true"] {
background: var(--color-surface);
border: 1px solid var(--color-border);
box-shadow: var(--shadow-xs);
}
.chat-convo__title {
font-size: 12.5px;
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-medium);
}
.chat-convo:not(.is-active):not([aria-current="true"]) .chat-convo__title {
font-weight: var(--font-weight-regular);
color: var(--color-text-secondary);
}
.chat-convo__meta {
font-size: 10.5px;
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 2px;
}
/* Main chat area */
.chat-main {
display: grid;
grid-template-rows: auto 1fr auto;
min-height: 0;
}
.chat-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 18px var(--space-2xl);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
}
.chat-bar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }
.chat-bar__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.chat-scroll { overflow-y: auto; padding: var(--space-xl) 0 var(--space-2xl); }
.chat-wrap { max-width: var(--chat-message-max-width); margin: 0 auto; padding: 0 var(--space-2xl); }
.chat-msg {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--space-lg);
padding: 20px 0;
}
.chat-msg + .chat-msg { border-top: 1px solid var(--color-border); }
.chat-msg__avatar {
width: 32px; height: 32px;
border-radius: var(--radius-lg);
display: grid; place-items: center;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
}
.chat-msg--user .chat-msg__avatar {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.chat-msg--bot .chat-msg__avatar {
background: var(--color-brand-700);
color: var(--color-neutral-0);
font-family: var(--font-mono);
font-size: var(--font-size-md);
}
.chat-msg__head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 4px; }
.chat-msg__author { font-weight: var(--font-weight-semibold); font-size: var(--font-size-base); }
.chat-msg__time { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); }
.chat-msg__body {
font-size: 14.5px;
line-height: var(--line-height-relaxed);
color: var(--color-text-primary);
}
.chat-msg__body p + p { margin-top: 10px; }
.chat-msg__body ul { margin: var(--space-sm) 0; padding-left: 22px; }
.chat-msg__body li { margin: 3px 0; }
.chat-msg__body code {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
background: var(--color-neutral-100);
padding: 1px 5px;
border-radius: var(--radius-xs);
border: 1px solid var(--color-border);
}
.citation-pill {
display: inline-flex;
align-items: center;
height: 16px;
padding: 0 5px;
margin: 0 1px;
vertical-align: 1px;
border-radius: var(--radius-xs);
background: var(--color-brand-50);
color: var(--color-brand-700);
border: 1px solid var(--color-brand-100);
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
font-weight: var(--font-weight-semibold);
cursor: pointer;
text-decoration: none;
line-height: 1;
}
.citation-pill:hover { background: var(--color-brand-100); text-decoration: none; }
.citations { margin-top: 14px; display: flex; flex-direction: column; gap: var(--space-sm); }
.citation-card {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: var(--space-md);
align-items: center;
padding: 10px 14px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
text-decoration: none;
color: inherit;
}
.citation-card:hover { border-color: var(--color-border-strong); text-decoration: none; }
.citation-card__thumb {
width: 44px; height: 44px;
border-radius: 5px;
border: 1px solid var(--color-border);
background: repeating-linear-gradient(45deg, var(--color-neutral-100), var(--color-neutral-100) 4px, var(--color-neutral-200) 4px, var(--color-neutral-200) 8px);
display: grid; place-items: center;
color: var(--color-text-muted);
font-size: 9px;
font-family: var(--font-mono);
}
.citation-card__title {
font-size: var(--font-size-base);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.citation-card__sub {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 2px;
}
.citation-card__n {
width: 22px; height: 22px;
border-radius: 5px;
background: var(--color-brand-50);
color: var(--color-brand-700);
display: grid; place-items: center;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
}
.citation-card__sku {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
display: block;
text-align: right;
margin-top: 3px;
}
.chat-msg__actions {
display: flex;
gap: 2px;
margin-top: var(--space-md);
color: var(--color-text-muted);
}
/* Composer */
.composer-wrap {
padding: var(--space-lg) var(--space-2xl) var(--space-xl);
border-top: 1px solid var(--color-border);
background: var(--color-bg);
}
.composer {
max-width: var(--chat-message-max-width);
margin: 0 auto;
border: 1px solid var(--color-border-strong);
border-radius: 14px;
background: var(--color-surface);
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
display: flex;
flex-direction: row;
align-items: flex-end;
gap: var(--space-sm);
transition: border-color var(--duration-fast) var(--ease-out), box-shadow var(--duration-fast) var(--ease-out);
}
.composer:focus-within {
border-color: var(--color-border-focus);
box-shadow: var(--focus-ring);
}
.composer__textarea {
flex: 1;
font-size: 14.5px;
color: var(--color-text-primary);
border: none;
outline: none;
resize: none;
background: transparent;
font-family: inherit;
line-height: var(--line-height-normal);
field-sizing: content;
min-height: 22px;
max-height: 66px;
overflow-y: auto;
padding: 6px 0;
}
.composer__send {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: var(--radius-full);
background: var(--color-brand);
color: white;
border: none;
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: background var(--duration-fast);
}
.composer__send:hover { background: var(--color-brand-hover); }
.composer__send:disabled { opacity: 0.4; cursor: not-allowed; }
/* ============================================================
6. MODULE: ACCESS MATRIX
============================================================ */
.access-toolbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-md);
margin-bottom: var(--space-lg);
}
.access-toolbar__search { flex: 1; max-width: 320px; }
.access-save-bar {
position: sticky;
bottom: 0;
background: var(--color-surface);
border-top: 1px solid var(--color-border);
padding: var(--space-md) var(--space-xl);
display: flex;
justify-content: space-between;
align-items: center;
box-shadow: var(--shadow-md);
z-index: var(--z-sticky);
}
.access-save-bar__summary {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.access-save-bar__summary strong { color: var(--color-warning-700); font-weight: var(--font-weight-semibold); }
.access-save-bar__actions { display: flex; gap: var(--space-sm); }
/* ============================================================
7. MODULE: DATAQUALITY
============================================================ */
/* --- Status colors (4 states of (leaf, attribute) pair) --- */
:root {
--dq-global: var(--color-success-500);
--dq-global-bg: var(--color-success-50);
--dq-global-border: var(--color-success-100);
--dq-diff: var(--color-info-500);
--dq-diff-bg: var(--color-info-50);
--dq-diff-border: var(--color-info-100);
--dq-partial: var(--color-warning-500);
--dq-partial-bg: var(--color-warning-50);
--dq-partial-border: var(--color-warning-100);
--dq-missing: var(--color-neutral-400);
--dq-missing-bg: var(--color-neutral-100);
--dq-missing-border: var(--color-neutral-200);
--dq-optional: #7c5cf2;
--dq-optional-bg: #f1edfd;
--dq-optional-border: #dccff9;
--dq-optional-text: #4f2db4;
}
/* Full-bleed workbench layout — catalog, gaps use this instead of .app-page */
.app-main__workbench {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
overflow: hidden;
}
.dq-workbench-head {
padding: 20px var(--space-2xl) var(--space-md);
border-bottom: 1px solid var(--color-border);
display: flex;
justify-content: space-between;
align-items: flex-end;
gap: var(--space-xl);
flex-shrink: 0;
}
.dq-workbench-head__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
line-height: 1.15;
}
.dq-workbench-head__crumbs {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: 4px;
}
.dq-workbench-head__lede {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
margin-top: 4px;
max-width: 720px;
}
.dq-workbench-head__meta {
display: flex;
align-items: center;
gap: var(--space-lg);
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
}
.dq-workbench-head__meta strong {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-left: 4px;
}
/* --- Status badge (Global / Differentiating / Partial / Missing) --- */
.dq-status {
display: inline-flex;
align-items: center;
gap: 5px;
height: 20px;
padding: 0 var(--space-sm) 0 7px;
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-family: var(--font-mono);
white-space: nowrap;
border: 1px solid transparent;
}
.dq-status::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.dq-status--global { background: var(--dq-global-bg); color: var(--color-success-700); border-color: var(--dq-global-border); }
.dq-status--global::before { background: var(--dq-global); }
.dq-status--diff { background: var(--dq-diff-bg); color: var(--color-info-700); border-color: var(--dq-diff-border); }
.dq-status--diff::before { background: var(--dq-diff); }
.dq-status--partial { background: var(--dq-partial-bg); color: var(--color-warning-700); border-color: var(--dq-partial-border); }
.dq-status--partial::before { background: var(--dq-partial); }
.dq-status--missing { background: var(--dq-missing-bg); color: var(--color-text-secondary); border-color: var(--dq-missing-border); }
.dq-status--missing::before { background: var(--dq-missing); }
.dq-status--ignored { background: var(--color-neutral-100); color: var(--color-neutral-600); border-color: var(--color-neutral-300); }
.dq-status--ignored::before { background: var(--color-neutral-400); }
.dq-status--optional { background: var(--dq-optional-bg); color: var(--dq-optional-text); border-color: var(--dq-optional-border); }
.dq-status--optional::before { background: var(--dq-optional); }
/* --- Department badge (mały tag obok nazwy liścia) --- */
.dq-dept-badge {
display: inline-block;
margin-left: 6px;
padding: 1px 6px;
font-size: 10px;
font-family: var(--font-mono);
font-weight: var(--font-weight-medium);
letter-spacing: var(--letter-spacing-wide);
background: var(--color-brand-50);
color: var(--color-brand-700);
border: 1px solid var(--color-brand-100);
border-radius: var(--radius-xs);
vertical-align: middle;
}
/* --- Coverage / Completeness bar --- */
.dq-bar {
display: inline-grid;
grid-template-columns: 1fr 56px;
align-items: center;
gap: var(--space-md);
width: 100%;
}
.dq-bar__track {
height: 6px;
border-radius: var(--radius-full);
background: var(--color-neutral-100);
overflow: hidden;
position: relative;
}
.dq-bar__fill {
height: 100%;
border-radius: var(--radius-full);
background: var(--color-brand-500);
transition: width var(--duration-slow) var(--ease-out);
}
.dq-bar__fill--global { background: var(--dq-global); }
.dq-bar__fill--diff { background: var(--dq-diff); }
.dq-bar__fill--partial { background: var(--dq-partial); }
.dq-bar__fill--missing { background: var(--dq-missing); }
.dq-bar__fill--optional { background: var(--dq-optional); }
.dq-bar__fill--danger { background: var(--color-danger-500); }
/* Segmented bar (global / diff / partial / missing breakdown) */
.dq-bar-seg {
display: flex;
height: 8px;
border-radius: var(--radius-full);
overflow: hidden;
background: var(--color-neutral-100);
width: 100%;
}
.dq-bar-seg__segment { height: 100%; transition: flex-basis var(--duration-slow) var(--ease-out); }
.dq-bar-seg__segment--global { background: var(--dq-global); }
.dq-bar-seg__segment--diff { background: var(--dq-diff); }
.dq-bar-seg__segment--partial { background: var(--dq-partial); }
.dq-bar-seg__segment--missing { background: var(--dq-missing); }
.dq-bar-seg__segment--ignored { background: var(--color-neutral-400); }
.dq-bar-seg__segment--optional { background: var(--dq-optional); }
.dq-bar__value {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
/* --- Hierarchy path breadcrumb --- */
.dq-path {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
line-height: var(--line-height-snug);
letter-spacing: 0;
display: inline-flex;
align-items: center;
flex-wrap: wrap;
}
.dq-path__sep {
color: var(--color-neutral-300);
margin: 0 5px;
flex-shrink: 0;
}
.dq-path__leaf {
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
}
.dq-path--truncate {
display: inline-block;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 100%;
}
/* --- KPI grid (DQ-specific denser variant) --- */
.dq-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: 0;
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
margin-bottom: var(--space-xl);
}
.dq-stat {
padding: 14px var(--space-lg);
border-right: 1px solid var(--color-border);
border-bottom: 1px solid var(--color-border);
}
.dq-stat:last-child { border-right: none; }
.dq-stat__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.dq-stat__value {
font-size: 26px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
margin-top: 4px;
line-height: 1.05;
font-feature-settings: "tnum";
display: flex;
align-items: baseline;
gap: 6px;
}
.dq-stat__value-sub {
font-size: var(--font-size-sm);
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
font-family: var(--font-mono);
}
.dq-stat__foot {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
margin-top: 6px;
}
.dq-stat__foot .dq-status { vertical-align: 1px; }
.dq-stat--emphasis { background: var(--color-brand-50); }
.dq-stat--emphasis .dq-stat__value { color: var(--color-brand-700); }
/* --- Split layouts ---------------------------------------- */
/* Catalog: three-pane (categories | tree | detail) */
.dq-split-3 {
flex: 1;
display: grid;
grid-template-columns: 280px 340px 1fr;
min-height: 0;
overflow: hidden;
}
.dq-split-3 > * { min-height: 0; min-width: 0; }
/* Gaps: master-detail (list | selected leaf) */
.dq-split-2 {
flex: 1;
display: grid;
grid-template-columns: 520px 1fr;
min-height: 0;
overflow: hidden;
}
.dq-split-2 > * { min-height: 0; min-width: 0; }
.dq-pane {
display: flex;
flex-direction: column;
min-height: 0;
background: var(--color-bg);
border-right: 1px solid var(--color-border);
}
.dq-pane:last-child { border-right: none; }
.dq-pane--muted { background: var(--color-neutral-50); }
.dq-pane__head {
padding: 12px var(--space-lg);
border-bottom: 1px solid var(--color-border);
display: flex;
flex-direction: column;
gap: var(--space-sm);
flex-shrink: 0;
background: var(--color-surface);
}
.dq-pane__title {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
display: flex;
justify-content: space-between;
align-items: center;
}
.dq-pane__title-count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
letter-spacing: var(--letter-spacing-wide);
}
.dq-pane__body {
flex: 1;
overflow-y: auto;
min-height: 0;
}
.dq-pane__body--padded { padding: var(--space-lg) var(--space-xl) var(--space-2xl); }
/* --- Category row (flat list column A) --- */
.dq-cat-row {
display: grid;
grid-template-columns: 44px 1fr auto;
gap: 10px;
padding: 9px var(--space-lg);
cursor: pointer;
border-bottom: 1px solid var(--color-neutral-100);
align-items: center;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-cat-row:hover { background: var(--color-neutral-50); }
.dq-cat-row.is-active {
background: var(--color-brand-50);
box-shadow: inset 3px 0 0 var(--color-brand-500);
}
.dq-cat-row__code {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
background: var(--color-neutral-100);
padding: 3px 6px;
border-radius: var(--radius-xs);
text-align: center;
letter-spacing: 0;
}
.dq-cat-row.is-active .dq-cat-row__code {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.dq-cat-row__name {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-cat-row__count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* --- Tree node (column B) --- */
.dq-tree { padding: var(--space-sm) 0; }
.dq-tree__node {
display: grid;
grid-template-columns: 16px 1fr auto;
gap: 6px;
align-items: center;
padding: 5px var(--space-lg) 5px 0;
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.dq-tree__node:hover { background: var(--color-neutral-50); }
.dq-tree__node.is-active {
background: var(--color-brand-50);
color: var(--color-brand-700);
font-weight: var(--font-weight-medium);
}
.dq-tree__node.is-active::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2px;
background: var(--color-brand-500);
}
.dq-tree__toggle {
color: var(--color-text-muted);
display: grid;
place-items: center;
width: 16px; height: 16px;
flex-shrink: 0;
}
.dq-tree__toggle--leaf { visibility: hidden; }
.dq-tree__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-tree__label--leaf {
color: inherit;
}
.dq-tree__label--inner {
color: var(--color-text-secondary);
}
.dq-tree__leaf-dot {
width: 4px; height: 4px;
border-radius: 50%;
background: var(--color-brand-400);
display: inline-block;
margin-right: 6px;
vertical-align: 2px;
}
.dq-tree__count {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.dq-tree__count strong {
color: var(--color-text-secondary);
font-weight: var(--font-weight-semibold);
}
.dq-tree__children {
border-left: 1px dashed var(--color-neutral-200);
margin-left: 14px;
padding-left: 2px;
}
.dq-tree__children--l2 { margin-left: 28px; }
.dq-tree__children--l3 { margin-left: 42px; }
/* --- Attribute row (reused Catalog + Gaps detail) --- */
.dq-attr-row {
display: grid;
grid-template-columns: 16px 1fr 120px 140px 110px;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-lg);
border-bottom: 1px solid var(--color-neutral-100);
}
.dq-attr-row:last-child { border-bottom: none; }
.dq-attr-row:hover { background: var(--color-neutral-50); }
.dq-attr-row__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.dq-attr-row__type {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
letter-spacing: 0;
flex-shrink: 0;
}
.dq-attr-row__val {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-attr-row__val strong {
color: var(--color-success-700);
font-weight: var(--font-weight-semibold);
}
/* --- Parameter pill (global parameter name=value) --- */
.dq-param {
display: inline-flex;
align-items: baseline;
gap: 6px;
padding: 4px 10px;
background: var(--color-success-50);
border: 1px solid var(--color-success-100);
border-radius: var(--radius-md);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-success-700);
line-height: var(--line-height-snug);
}
.dq-param__key {
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
white-space: nowrap;
flex-shrink: 0;
}
.dq-param__eq { color: var(--color-neutral-400); white-space: nowrap; flex-shrink: 0; }
.dq-param__val {
color: var(--color-text-primary);
font-family: var(--font-sans);
font-size: var(--font-size-sm);
}
.dq-param--diff {
background: var(--color-info-50);
border-color: var(--color-info-100);
color: var(--color-info-700);
max-width: 420px;
overflow: hidden;
}
.dq-param--diff .dq-param__val {
color: var(--color-info-700);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
.dq-param--optional {
background: var(--dq-optional-bg);
border-color: var(--dq-optional-border);
color: var(--dq-optional-text);
}
.dq-param--optional .dq-param__val { color: var(--dq-optional-text); }
/* --- Ready leaf card --- */
.dq-ready-group {
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-lg);
margin-bottom: var(--space-md);
overflow: hidden;
}
.dq-ready-group__head {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-xl);
background: var(--color-neutral-50);
border-bottom: 1px solid var(--color-border);
cursor: pointer;
}
.dq-ready-group__title {
display: flex;
align-items: center;
gap: var(--space-md);
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.dq-ready-group__caret {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
}
.dq-ready-group.is-open .dq-ready-group__caret { transform: rotate(90deg); }
.dq-ready-group__count {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.dq-ready-group__body { display: none; }
.dq-ready-group.is-open .dq-ready-group__body { display: block; }
/* --- Ready leaf (v2 — z listą produktów) --- */
.dq-ready-leaf {
padding: var(--space-md) var(--space-xl);
border-bottom: 1px solid var(--color-neutral-100);
position: relative;
}
.dq-ready-leaf:last-child { border-bottom: none; }
.dq-ready-leaf__top {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-lg);
align-items: start;
}
.dq-ready-leaf__head { min-width: 0; }
.dq-ready-leaf__name {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
letter-spacing: var(--letter-spacing-snug);
}
.dq-ready-leaf__meta { margin-top: 3px; margin-bottom: 4px; }
.dq-ready-leaf__params {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin: 8px 0 0;
max-height: 64px;
overflow: hidden;
position: relative;
transition: max-height var(--duration-base) var(--ease-out);
}
.dq-ready-leaf__params.is-expanded { max-height: 600px; }
.dq-ready-leaf__params-toggle {
display: block;
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-link);
background: none;
border: 0;
padding: 4px 0;
cursor: pointer;
}
.dq-ready-leaf__params-toggle:hover { text-decoration: underline; }
.dq-ready-leaf__diff {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
margin-top: 10px;
padding-top: 10px;
border-top: 1px dashed var(--color-neutral-100);
}
.dq-ready-leaf__diff-label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin-right: 4px;
}
.dq-ready-leaf__stats {
text-align: right;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
}
.dq-ready-leaf__stats strong {
display: block;
font-family: var(--font-sans);
font-size: var(--font-size-lg);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
letter-spacing: -0.01em;
font-feature-settings: "tnum";
}
.dq-ready-leaf__stats-ax {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
}
.dq-ready-leaf__toggle {
margin-top: 12px;
display: inline-flex;
align-items: center;
gap: 8px;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 6px 12px 6px 10px;
font-family: inherit;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
cursor: pointer;
transition: all var(--duration-fast) var(--ease-out);
}
.dq-ready-leaf__toggle:hover {
border-color: var(--color-border-strong);
color: var(--color-text-primary);
background: var(--color-neutral-50);
}
.dq-ready-leaf__toggle svg {
transition: transform var(--duration-fast) var(--ease-out);
color: var(--color-text-muted);
flex-shrink: 0;
}
.dq-ready-leaf.is-open .dq-ready-leaf__toggle svg { transform: rotate(90deg); }
.dq-ready-leaf.is-open .dq-ready-leaf__toggle {
background: var(--color-brand-50);
border-color: var(--color-brand-100);
color: var(--color-brand-700);
}
.dq-ready-leaf__toggle-count {
font-family: var(--font-mono);
color: var(--color-text-muted);
font-size: var(--font-size-2xs);
}
.dq-ready-leaf.is-open .dq-ready-leaf__toggle-count { color: var(--color-brand-500); }
/* --- Products list inside leaf (Ready view) --- */
.dq-leaf-products {
display: none;
margin-top: var(--space-md);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.dq-ready-leaf.is-open .dq-leaf-products { display: block; }
.dq-leaf-products__head,
.dq-leaf-products__row {
display: grid;
grid-template-columns: 28px 100px minmax(0,1fr) 16px;
gap: var(--space-md);
align-items: center;
padding: 8px var(--space-md);
font-size: var(--font-size-xs);
}
.dq-leaf-products__head {
background: var(--color-neutral-50);
border-bottom: 1px solid var(--color-neutral-100);
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.dq-leaf-products__head > div {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dq-leaf-products__row {
border-bottom: 1px solid var(--color-neutral-100);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.dq-leaf-products__row:last-child { border-bottom: none; }
.dq-leaf-products__row:hover { background: var(--color-neutral-50); }
.dq-leaf-products__row.is-active { background: var(--color-brand-50); }
.dq-leaf-products__row.is-active::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--color-brand-500);
}
.dq-leaf-products__thumb {
width: 28px; height: 28px;
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
display: flex; align-items: center; justify-content: center;
font-family: var(--font-mono);
font-size: 7px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.dq-leaf-products__sap {
font-family: var(--font-mono);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
font-size: var(--font-size-2xs);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-leaf-products__name {
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: var(--font-weight-medium);
}
.dq-leaf-products__brand {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.dq-leaf-products__brand--own {
color: var(--color-brand-700);
background: var(--color-brand-50);
padding: 2px 6px;
border-radius: var(--radius-xs);
font-weight: var(--font-weight-semibold);
display: inline-block;
}
.dq-leaf-products__diffval {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-info-700);
background: var(--color-info-50);
border: 1px solid var(--color-info-100);
border-radius: var(--radius-xs);
padding: 2px 6px;
display: inline-block;
font-weight: var(--font-weight-semibold);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 150px;
}
.dq-leaf-products__chev {
color: var(--color-text-muted);
display: flex; align-items: center; justify-content: flex-end;
justify-self: end;
}
.dq-leaf-products__row:hover .dq-leaf-products__chev { color: var(--color-text-primary); }
.dq-leaf-products__more {
padding: 10px var(--space-md);
text-align: center;
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-link);
background: var(--color-neutral-50);
border-top: 1px solid var(--color-border);
cursor: pointer;
}
.dq-leaf-products__more:hover { background: var(--color-brand-50); }
.dq-leaf-products__loading {
padding: var(--space-md) var(--space-xl);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
/* --- Gaps master list (leaf row) --- */
.dq-leaf-row {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
padding: 12px var(--space-lg);
border-bottom: 1px solid var(--color-neutral-100);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
position: relative;
}
.dq-leaf-row:hover { background: var(--color-neutral-50); }
.dq-leaf-row.is-ready { opacity: 0.6; }
.dq-leaf-row.is-ready .dq-leaf-row__name { color: var(--color-text-secondary); }
.dq-leaf-row.is-ready:hover { opacity: 0.85; }
.dq-leaf-row.is-active {
background: var(--color-brand-50);
}
.dq-leaf-row.is-active::before {
content: "";
position: absolute;
left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--color-brand-500);
}
.dq-leaf-row__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-leaf-row__path {
margin-top: 2px;
}
.dq-leaf-row__stats {
display: flex;
gap: var(--space-md);
margin-top: 8px;
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
}
.dq-leaf-row__stat {
display: flex;
align-items: center;
gap: 4px;
}
.dq-leaf-row__stat-num {
font-size: var(--font-size-sm);
font-family: var(--font-sans);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
letter-spacing: 0;
text-transform: none;
}
.dq-leaf-row__severity {
width: 28px;
height: 4px;
border-radius: var(--radius-full);
background: linear-gradient(to right, var(--color-warning-500), var(--color-danger-500));
opacity: 0.9;
margin-top: 10px;
}
.dq-leaf-row__severity--low { background: var(--color-success-500); opacity: 0.5; }
.dq-leaf-row__severity--med { background: var(--color-warning-500); opacity: 0.75; }
.dq-leaf-row__severity--high { background: var(--color-danger-500); opacity: 0.9; }
/* --- Detail section headers --- */
.dq-section {
margin-bottom: var(--space-xl);
}
.dq-section__head {
display: flex;
justify-content: space-between;
align-items: baseline;
padding: var(--space-sm) 0 10px;
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-sm);
}
.dq-section__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
letter-spacing: var(--letter-spacing-snug);
display: flex;
align-items: center;
gap: var(--space-sm);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
font-size: var(--font-size-xs);
}
.dq-section__desc {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.dq-section__content {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-section--globals .dq-section__title { color: var(--color-success-700); }
.dq-section--partials .dq-section__title { color: var(--color-warning-700); }
.dq-section--ignored .dq-section__title { color: var(--color-text-muted); }
.dq-attr-row--ignored { opacity: 0.85; }
.dq-attr-row--ignored:hover { background: transparent; }
.dq-attr-row--ignored .dq-attr-row__name { color: var(--color-text-muted); }
/* Tag "globalny" w kolumnie hint dla ignorowanych globalnie */
.dq-tag-global {
display: inline-flex;
align-items: center;
font-family: var(--font-mono);
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
border-radius: 3px;
padding: 2px 6px;
line-height: 1;
}
/* Body expand uproszczony — tylko akcje w stopce, wyśrodkowane pionowo, do prawej.
Wyższa specyficzność (.dq-attr-expand__body.dq-attr-expand__body--simple) niż
baza .dq-attr-expand__body żeby nadpisać jej padding 0/12/12/44. */
.dq-attr-expand__body.dq-attr-expand__body--simple {
padding: var(--space-md) var(--space-lg);
}
.dq-attr-expand__actions {
display: flex;
gap: var(--space-sm);
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
}
/* Akcje widoczne dopiero przy hoverze wiersza (dla flat rows Ignored / Optional) */
.dq-attr-row__hover {
display: flex;
gap: var(--space-sm);
justify-content: flex-end;
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.dq-attr-expand__head:hover .dq-attr-row__hover { opacity: 1; }
/* Flat row (bez OnToggle) — nie ma kursora pointer (hover background zostawiamy żeby ujawnić akcje) */
.dq-attr-expand--flat .dq-attr-expand__head { cursor: default; }
/* Expandable attr row for partials — shows missing products */
.dq-attr-expand {
border-bottom: 1px solid var(--color-neutral-100);
}
.dq-attr-expand:last-child { border-bottom: none; }
.dq-attr-expand__head {
display: grid;
grid-template-columns: 16px 1fr 120px 140px 110px;
gap: var(--space-md);
align-items: center;
padding: var(--space-md) var(--space-lg);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-attr-expand__head:hover { background: var(--color-neutral-50); }
.dq-attr-expand__caret {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
}
.dq-attr-expand.is-open .dq-attr-expand__caret { transform: rotate(90deg); }
.dq-attr-expand__name {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
align-items: center;
gap: var(--space-sm);
min-width: 0;
}
.dq-attr-expand__body {
display: none;
padding: 0 var(--space-lg) var(--space-md) 44px;
background: var(--color-neutral-50);
border-top: 1px solid var(--color-neutral-100);
}
.dq-attr-expand.is-open .dq-attr-expand__body { display: block; }
.dq-attr-expand__prods {
padding: var(--space-md) 0 var(--space-sm);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
font-weight: var(--font-weight-semibold);
}
.dq-sku-list {
display: flex;
flex-wrap: wrap;
gap: 5px;
}
.dq-sku {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xs);
padding: 3px 7px;
color: var(--color-text-secondary);
}
/* --- Toggle switch (IsRequired) --- */
.dq-switch {
position: relative;
display: inline-block;
width: 30px;
height: 16px;
flex-shrink: 0;
}
.dq-switch input {
opacity: 0;
width: 0; height: 0;
}
.dq-switch__slider {
position: absolute;
inset: 0;
background: var(--color-neutral-300);
border-radius: var(--radius-full);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-switch__slider::before {
content: "";
position: absolute;
height: 12px; width: 12px;
left: 2px; top: 2px;
background: var(--color-surface);
border-radius: 50%;
transition: transform var(--duration-fast) var(--ease-out);
box-shadow: var(--shadow-xs);
}
.dq-switch input:checked + .dq-switch__slider {
background: var(--color-success-500);
}
.dq-switch input:checked + .dq-switch__slider::before {
transform: translateX(14px);
}
.dq-switch input:focus-visible + .dq-switch__slider {
box-shadow: var(--focus-ring);
}
/* --- Ready header strip --- */
.dq-ready-header {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-xl);
margin-bottom: var(--space-xl);
display: grid;
grid-template-columns: 1fr 280px;
gap: var(--space-2xl);
align-items: center;
}
.dq-ready-header__num {
font-size: 44px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
line-height: 1;
font-feature-settings: "tnum";
color: var(--color-text-primary);
}
.dq-ready-header__num-of {
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
font-size: 28px;
}
.dq-ready-header__caption {
font-size: var(--font-size-md);
color: var(--color-text-secondary);
margin-top: var(--space-sm);
max-width: 520px;
}
.dq-ready-header__progress-label {
font-size: var(--font-size-xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin-bottom: 10px;
display: flex;
justify-content: space-between;
align-items: baseline;
}
.dq-ready-header__progress-label strong {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
.dq-ready-header__legend {
display: flex;
gap: var(--space-md);
margin-top: var(--space-md);
font-size: var(--font-size-2xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
flex-wrap: wrap;
}
.dq-ready-header__legend-item {
display: flex; align-items: center; gap: 5px;
}
.dq-ready-header__legend-sw {
width: 8px; height: 8px; border-radius: 2px;
}
/* --- Product preview list (Catalog column C bottom) --- */
.dq-product-list {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-product-row {
display: grid;
grid-template-columns: 100px 1fr auto;
gap: var(--space-md);
padding: 8px var(--space-md);
border-bottom: 1px solid var(--color-neutral-100);
align-items: center;
font-size: var(--font-size-xs);
}
.dq-product-row:last-child { border-bottom: none; }
.dq-product-row:hover { background: var(--color-neutral-50); }
.dq-product-row__sku {
font-family: var(--font-mono);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.dq-product-row__name {
color: var(--color-text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.dq-product-row__brand {
font-family: var(--font-mono);
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
}
.dq-product-row__brand--own {
color: var(--color-brand-700);
background: var(--color-brand-50);
padding: 2px 6px;
border-radius: var(--radius-xs);
font-weight: var(--font-weight-semibold);
}
/* --- Gaps toolbar (sort / filter) --- */
.dq-toolbar {
display: flex;
align-items: center;
gap: var(--space-sm);
padding: var(--space-sm) var(--space-lg);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
}
.dq-toolbar__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin-right: var(--space-sm);
}
.dq-sort-group {
display: flex;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
overflow: hidden;
}
.dq-sort-group__btn {
padding: 5px 10px;
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-secondary);
background: var(--color-surface);
border-right: 1px solid var(--color-border);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.dq-sort-group__btn:last-child { border-right: none; }
.dq-sort-group__btn:hover { background: var(--color-neutral-50); }
.dq-sort-group__btn.is-active {
background: var(--color-brand-700);
color: var(--color-neutral-0);
}
/* --- Detail header (Gaps right pane) --- */
.dq-detail-head {
padding: var(--space-xl) var(--space-2xl) var(--space-md);
border-bottom: 1px solid var(--color-border);
flex-shrink: 0;
}
.dq-detail-head__path { margin-bottom: var(--space-sm); }
.dq-detail-head__title {
font-size: var(--font-size-2xl);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
line-height: 1.15;
margin-bottom: var(--space-sm);
}
.dq-detail-head__row {
display: flex;
gap: var(--space-xl);
margin-top: var(--space-md);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.dq-detail-head__row strong {
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
margin-right: 4px;
}
.dq-detail-head__row .dq-bar-seg { margin-top: 4px; max-width: 340px; }
/* --- Differentiating: value chips --- */
.dq-attr-expand__body--diff {
padding: var(--space-md) var(--space-lg) var(--space-md) 44px;
}
.dq-attr-expand__body--diff .dq-attr-expand__prods {
padding-top: 4px;
padding-bottom: 10px;
}
.dq-value-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
.dq-value-chip {
display: inline-flex;
align-items: stretch;
border: 1px solid var(--color-border);
background: var(--color-surface);
border-radius: var(--radius-sm);
overflow: hidden;
font-size: var(--font-size-xs);
line-height: 1;
cursor: default;
transition: border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.dq-value-chip__label {
padding: 6px 9px;
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
white-space: nowrap;
}
.dq-value-chip__count {
padding: 6px 9px;
background: var(--color-neutral-50);
border-left: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
display: inline-flex;
align-items: center;
}
/* --- Partial: clickable SKU chips --- */
.dq-sku--clickable {
cursor: pointer;
transition: border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.dq-sku--clickable:hover {
border-color: var(--color-brand-500);
background: var(--color-brand-50);
color: var(--color-brand-700);
}
.dq-sku--clickable.is-active {
border-color: var(--color-brand-500);
background: var(--color-brand-700);
color: var(--color-neutral-0);
}
/* ============================================================
Product Modal (shared chrome + card content)
============================================================ */
.pm-overlay {
position: fixed;
inset: 0;
background: rgba(15, 29, 54, 0.4);
display: grid;
grid-template-columns: 1fr;
place-items: center;
z-index: var(--z-modal);
padding: var(--space-xl);
animation: pm-overlay-in var(--duration-base) var(--ease-out);
}
@keyframes pm-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
.pm-modal {
background: var(--color-surface);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
width: min(820px, calc(100% - 64px));
max-height: 90vh;
display: grid;
grid-template-rows: auto auto 1fr auto;
overflow: hidden;
animation: pm-modal-in var(--duration-base) var(--ease-out);
}
.pm-modal--narrow { width: min(640px, calc(100% - 64px)); }
@keyframes pm-modal-in {
from { transform: translateY(10px); opacity: 0; }
to { transform: translateY(0); opacity: 1; }
}
.pm-head {
padding: 12px 16px 12px 18px;
border-bottom: 1px solid var(--color-border);
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 12px;
background: var(--color-surface);
grid-row: 1;
}
.pm-head__nav { display: flex; align-items: center; gap: 2px; }
.pm-head__nav-btn {
width: 28px; height: 28px;
border-radius: var(--radius-sm);
color: var(--color-text-secondary);
display: inline-grid; place-items: center;
cursor: pointer; background: transparent; border: none; padding: 0;
}
.pm-head__nav-btn:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.pm-head__nav-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.pm-head__counter {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
padding: 0 6px; white-space: nowrap;
}
.pm-head__title {
font-size: 13px; font-weight: 500; color: var(--color-text-secondary);
overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
display: flex; align-items: center; gap: 8px; min-width: 0;
}
.pm-head__title strong { color: var(--color-text-primary); font-weight: 600; }
.pm-head__badge {
display: inline-flex; align-items: center; gap: 5px;
height: 20px; padding: 0 8px 0 7px; border-radius: 999px;
font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
text-transform: uppercase; font-family: var(--font-mono);
white-space: nowrap; border: 1px solid transparent; flex-shrink: 0;
}
.pm-head__badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; }
.pm-head__badge--ready { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.pm-head__badge--ready::before { background: var(--color-success-500); }
.pm-head__badge--gaps { background: var(--color-warning-50); color: var(--color-warning-700); border-color: var(--color-warning-100); }
.pm-head__badge--gaps::before { background: var(--color-warning-500); }
.pm-head__close {
width: 28px; height: 28px; border-radius: var(--radius-sm);
color: var(--color-text-muted); display: inline-grid; place-items: center;
cursor: pointer; background: transparent; border: none; padding: 0;
}
.pm-head__close:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.pm-strip {
display: flex; padding: 8px 14px 10px;
border-bottom: 1px solid var(--color-border);
background: var(--color-bg); grid-row: 2; min-width: 0;
}
.pm-strip__scroll {
display: flex; gap: 6px; overflow-x: auto; scrollbar-width: thin;
padding: 2px 2px 4px; flex: 1;
}
.pm-strip__item {
flex-shrink: 0; width: 56px;
display: flex; flex-direction: column; align-items: center; gap: 3px;
padding: 4px; border-radius: 6px; border: 1px solid transparent;
cursor: pointer; transition: background 120ms, border-color 120ms; background: transparent;
}
.pm-strip__item:hover { background: var(--color-neutral-100); }
.pm-strip__item.is-active { border-color: var(--color-brand-500); background: var(--color-brand-50); }
.pm-strip__thumb {
width: 40px; height: 40px; border-radius: 4px;
border: 1px solid var(--color-border);
background: repeating-linear-gradient(45deg,
var(--color-neutral-100), var(--color-neutral-100) 4px,
var(--color-neutral-200) 4px, var(--color-neutral-200) 8px);
display: grid; place-items: center; position: relative;
}
.pm-strip__item.is-active .pm-strip__thumb { border-color: var(--color-brand-500); }
.pm-strip__dot {
position: absolute; top: -3px; right: -3px;
width: 10px; height: 10px; border-radius: 50%;
border: 2px solid var(--color-surface);
}
.pm-strip__dot--ready { background: var(--color-success-500); }
.pm-strip__dot--gaps { background: var(--color-warning-500); }
.pm-strip__sap {
font-family: var(--font-mono); font-size: 9px; color: var(--color-text-muted);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
width: 100%; text-align: center;
}
.pm-strip__item.is-active .pm-strip__sap { color: var(--color-brand-700); font-weight: 600; }
.pm-body {
overflow-y: auto; overflow-x: hidden; background: var(--color-surface);
padding: 22px 28px 28px; grid-row: 3; min-height: 0;
}
.pm-modal__loading {
padding: var(--space-2xl); text-align: center;
color: var(--color-text-muted); font-size: var(--font-size-sm); font-family: var(--font-mono);
}
.pm-foot {
padding: 10px 18px; border-top: 1px solid var(--color-border);
display: flex; justify-content: space-between; align-items: center;
background: var(--color-bg); gap: 12px; grid-row: 4;
}
.pm-foot__shortcuts {
display: flex; align-items: center; gap: 14px;
font-size: 11px; color: var(--color-text-muted);
}
.pm-foot__shortcuts kbd {
font-family: var(--font-mono); font-size: 10px;
background: var(--color-surface);
border: 1px solid var(--color-border-strong); border-bottom-width: 2px;
border-radius: 3px; padding: 1px 5px; color: var(--color-text-secondary); margin: 0 1px;
}
.pm-foot__actions { display: flex; gap: 8px; }
.pm-hero {
display: grid; grid-template-columns: 140px 1fr; gap: 20px;
padding-bottom: 18px; border-bottom: 1px solid var(--color-border);
}
.pm-hero__thumb {
width: 140px; height: 140px; border-radius: 6px;
border: 1px solid var(--color-border);
background: repeating-linear-gradient(45deg,
var(--color-neutral-100), var(--color-neutral-100) 6px,
var(--color-neutral-200) 6px, var(--color-neutral-200) 12px);
display: grid; place-items: center;
color: var(--color-text-muted); font-family: var(--font-mono); font-size: 10px;
}
.pm-hero__category {
font-family: var(--font-mono); font-size: 10px; color: var(--color-text-muted);
text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; margin-bottom: 6px;
}
.pm-hero__title {
font-size: 18px; font-weight: 600; color: var(--color-text-primary);
line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 8px;
}
.pm-hero__sap {
font-family: var(--font-mono); font-size: 11px; color: var(--color-text-secondary);
background: var(--color-neutral-100); border: 1px solid var(--color-border);
border-radius: 3px; padding: 2px 7px; display: inline-block;
}
.pm-hero__metrics {
display: flex; gap: 28px; margin-top: 12px;
padding-top: 12px; border-top: 1px dashed var(--color-border);
}
.pm-hero__metric-label {
font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em;
color: var(--color-text-muted); font-family: var(--font-mono); font-weight: 600; margin-bottom: 4px;
}
.pm-hero__metric-value {
font-size: 17px; font-weight: 600; color: var(--color-brand-700); letter-spacing: -0.01em;
}
.pm-hero__metric-value--warning { color: var(--color-warning-700); }
.pm-hero__metric-value--muted { color: var(--color-text-muted); font-size: 14px; }
.pm-section { margin-top: 20px; }
.pm-section__head {
display: flex; justify-content: space-between; align-items: baseline;
padding-bottom: 6px; margin-bottom: 10px; border-bottom: 1px solid var(--color-border);
}
.pm-section__title {
font-size: 11px; font-weight: 600; color: var(--color-text-primary);
text-transform: uppercase; letter-spacing: 0.08em; font-family: var(--font-mono);
}
.pm-section__hint { font-size: 10px; color: var(--color-text-muted); font-family: var(--font-mono); }
.pm-attrs { display: grid; grid-template-columns: 180px 1fr; column-gap: 16px; }
.pm-attrs > dt,
.pm-attrs > dd {
padding: 7px 0; border-bottom: 1px solid var(--color-neutral-100); font-size: 12px; margin: 0;
}
.pm-attrs > dt {
color: var(--color-text-secondary); text-transform: uppercase;
font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.05em;
padding-top: 9px; font-weight: 600;
}
.pm-attrs > dd { color: var(--color-text-primary); }
.pm-attrs > dt.is-empty { color: var(--color-warning-700); }
.pm-attrs > dd.is-empty { color: var(--color-warning-700); font-family: var(--font-mono); font-size: 11px; }
.pm-attrs > dt.is-empty,
.pm-attrs > dd.is-empty {
background: var(--color-warning-50); border-bottom-color: var(--color-warning-100);
padding-left: 8px; padding-right: 8px; margin-left: -8px; margin-right: -8px;
}
.pm-attrs > dt.pm-attrs__focus,
.pm-attrs > dd.pm-attrs__focus { box-shadow: inset 2px 0 0 var(--color-warning-500); }
.pm-gap-callout {
margin-top: 14px; padding: 12px 14px;
background: var(--color-warning-50); border: 1px solid var(--color-warning-100);
border-radius: 6px;
display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.pm-gap-callout__text { font-size: 12px; color: var(--color-warning-700); line-height: 1.5; }
.pm-gap-callout__text strong { font-weight: 600; }
/* ============================================================
7. UTILITIES (minimal — prefer komponenty)
============================================================ */
.u-visually-hidden {
position: absolute !important;
width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap;
border: 0;
}
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-gap-sm { gap: var(--space-sm); }
.u-gap-md { gap: var(--space-md); }
.u-gap-lg { gap: var(--space-lg); }
.u-mt-sm { margin-top: var(--space-sm); }
.u-mt-md { margin-top: var(--space-md); }
.u-mt-lg { margin-top: var(--space-lg); }
.u-mt-xl { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }
/* ============================================================
8. MODULE: LEARNING
============================================================ */
/* ---- Conversations list (.learn-*) ----------------------- */
.learn-toolbar {
display: grid;
grid-template-columns: 1fr auto auto auto auto;
gap: var(--space-sm);
align-items: center;
margin-bottom: var(--space-lg);
}
.learn-toolbar .input--search { max-width: none; }
.learn-toolbar .select { min-width: 0; }
.learn-success {
display: inline-flex;
align-items: center;
gap: 6px;
height: 22px;
padding: 0 10px 0 8px;
border-radius: var(--radius-full);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
font-family: var(--font-mono);
white-space: nowrap;
border: 1px solid transparent;
}
.learn-success::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
flex-shrink: 0;
}
.learn-success--ok { background: var(--color-success-50); color: var(--color-success-700); border-color: var(--color-success-100); }
.learn-success--ok::before { background: var(--color-success-500); }
.learn-success--fail { background: var(--color-danger-50); color: var(--color-danger-700); border-color: var(--color-danger-100); }
.learn-success--fail::before { background: var(--color-danger-500); }
.learn-success--pending { background: var(--color-neutral-100); color: var(--color-text-secondary); border-color: var(--color-border); }
.learn-success--pending::before { background: var(--color-neutral-400); }
.learn-manual-dot {
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-info-500);
margin-left: 6px;
vertical-align: middle;
}
.learn-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.learn-tag {
display: inline-flex;
align-items: center;
height: 18px;
padding: 0 7px;
border-radius: var(--radius-sm);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-size: 10.5px;
font-weight: var(--font-weight-medium);
letter-spacing: 0;
white-space: nowrap;
}
.learn-tag--alert { background: var(--color-warning-50); border-color: var(--color-warning-100); color: var(--color-warning-700); }
.learn-tag--danger { background: var(--color-danger-50); border-color: var(--color-danger-100); color: var(--color-danger-700); }
.learn-meta-cell {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.learn-meta-cell strong {
font-family: var(--font-sans);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
.learn-q {
font-size: var(--font-size-base);
color: var(--color-text-primary);
line-height: var(--line-height-snug);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
max-width: 360px;
}
.learn-user { display: flex; align-items: center; gap: 9px; white-space: nowrap; }
.learn-user__avatar {
width: 26px; height: 26px;
border-radius: 50%;
background: var(--color-brand-100);
color: var(--color-brand-700);
display: grid; place-items: center;
font-size: 10.5px;
font-weight: var(--font-weight-semibold);
flex-shrink: 0;
}
.learn-user__name { font-size: var(--font-size-sm); font-weight: var(--font-weight-medium); }
.learn-user__role { font-size: 10.5px; color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 1px; }
.learn-row { cursor: pointer; }
.learn-row td:first-child {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.learn-strip {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: var(--space-md);
margin-bottom: var(--space-xl);
}
.learn-strip__cell {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: 14px var(--space-lg);
}
.learn-strip__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.learn-strip__value {
font-size: 24px;
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-tight);
margin-top: 4px;
font-feature-settings: "tnum";
line-height: 1.1;
}
.learn-strip__delta { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.learn-strip__delta--good { color: var(--color-success-700); }
.learn-strip__delta--bad { color: var(--color-danger-700); }
.learn-pager {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: var(--space-md);
padding: var(--space-sm) var(--space-xs);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
}
.learn-pager__pages { display: flex; gap: 2px; }
.learn-pager__btn {
min-width: 28px; height: 28px;
padding: 0 8px;
border-radius: var(--radius-sm);
border: 1px solid transparent;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
cursor: pointer;
background: transparent;
}
.learn-pager__btn:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.learn-pager__btn.is-active {
background: var(--color-surface);
border-color: var(--color-border-strong);
color: var(--color-text-primary);
font-weight: var(--font-weight-semibold);
}
/* ---- Conversation detail (.ld-*) ------------------------- */
.ld-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
height: 100%;
min-height: 0;
}
.ld-main {
display: flex;
flex-direction: column;
min-width: 0;
min-height: 0;
background: var(--color-bg);
}
.ld-side {
border-left: 1px solid var(--color-border);
background: var(--color-surface);
display: flex;
flex-direction: column;
min-height: 0;
overflow-y: auto;
}
.ld-bar {
padding: 14px var(--space-2xl);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-lg);
flex-shrink: 0;
}
.ld-bar__back {
display: inline-flex; align-items: center; gap: 6px;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
margin-bottom: 4px;
text-decoration: none;
}
.ld-bar__back:hover { color: var(--color-text-primary); text-decoration: none; }
.ld-bar__title { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); line-height: 1.2; }
.ld-bar__meta { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 3px; }
.ld-bar__nav { display: flex; gap: var(--space-xs); flex-shrink: 0; align-items: center; }
.ld-scroll {
flex: 1;
overflow-y: auto;
padding: var(--space-xl) 0 var(--space-2xl);
min-height: 0;
}
.ld-wrap {
max-width: var(--chat-message-max-width);
margin: 0 auto;
padding: 0 var(--space-2xl);
}
.ld-step {
display: grid;
grid-template-columns: 32px 1fr;
gap: var(--space-lg);
padding: var(--space-md) 0;
position: relative;
}
.ld-step + .chat-msg { border-top: 1px solid var(--color-border); }
.chat-msg + .ld-step { border-top: 1px solid var(--color-border); }
.ld-step__rail {
display: flex;
align-items: stretch;
justify-content: center;
position: relative;
}
.ld-step__icon {
width: 26px; height: 26px;
border-radius: 7px;
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
display: grid; place-items: center;
color: var(--color-text-secondary);
flex-shrink: 0;
margin-top: 2px;
}
.ld-step__icon--llm { background: var(--color-brand-50); border-color: var(--color-brand-100); color: var(--color-brand-700); }
.ld-step__icon--filter { background: var(--color-info-50); border-color: var(--color-info-100); color: var(--color-info-700); }
.ld-step__icon--retrieval { background: var(--color-warning-50); border-color: var(--color-warning-100); color: var(--color-warning-700); }
.ld-step__card {
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
background: var(--color-surface);
overflow: hidden;
}
.ld-step__head {
padding: 10px 14px;
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: var(--space-md);
cursor: pointer;
user-select: none;
}
.ld-step__head:hover { background: var(--color-neutral-50); }
.ld-step__chev {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
}
.ld-step.is-open .ld-step__chev { transform: rotate(90deg); }
.ld-step__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
display: flex; align-items: center; gap: 8px;
}
.ld-step__kind {
font-family: var(--font-mono);
font-size: 10.5px;
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-neutral-100);
border-radius: var(--radius-sm);
padding: 1px 6px;
font-weight: var(--font-weight-medium);
}
.ld-step__metrics {
display: flex;
align-items: center;
gap: 12px;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.ld-step__metric strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-family: var(--font-mono); }
.ld-step__body {
border-top: 1px solid var(--color-border);
padding: var(--space-md) var(--space-lg) var(--space-lg);
display: none;
background: var(--color-neutral-50);
}
.ld-step.is-open .ld-step__body { display: block; }
.ld-step__sub {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
margin: 12px 0 6px;
}
.ld-step__sub:first-child { margin-top: 0; }
.ld-code {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: 10px 12px;
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.55;
color: var(--color-text-primary);
white-space: pre-wrap;
word-break: break-word;
}
.ld-code--muted { color: var(--color-text-secondary); }
.ld-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.ld-pill {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px;
border-radius: var(--radius-full);
background: var(--color-surface);
border: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-secondary);
}
.ld-pill strong { color: var(--color-text-primary); font-family: var(--font-mono); }
.ld-pill.is-picked { background: var(--color-brand-50); border-color: var(--color-brand-100); color: var(--color-brand-700); }
.ld-split { display: grid; grid-template-columns: minmax(0,1fr) 360px; min-height: 0; flex: 1; }
.ld-split__rail {
border-left: 1px solid var(--color-border);
background: var(--color-bg-sub);
overflow-y: auto;
padding: var(--space-md);
min-height: 0;
}
.ld-split__title {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
padding: 6px 8px 10px;
}
.ld-rail-step {
position: relative;
padding: 10px 12px 10px 30px;
border-radius: var(--radius-md);
cursor: pointer;
margin-bottom: 4px;
transition: background var(--duration-fast) var(--ease-out);
}
.ld-rail-step::before {
content: "";
position: absolute;
left: 14px; top: 14px; bottom: -4px;
width: 1px;
background: var(--color-border-strong);
}
.ld-rail-step:last-child::before { display: none; }
.ld-rail-step::after {
content: "";
position: absolute;
left: 11px; top: 12px;
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-neutral-300);
border: 2px solid var(--color-bg-sub);
z-index: 1;
}
.ld-rail-step--ok::after { background: var(--color-success-500); }
.ld-rail-step--llm::after { background: var(--color-brand-500); }
.ld-rail-step--filter::after { background: var(--color-info-500); }
.ld-rail-step:hover { background: rgba(15,29,54,0.04); }
.ld-rail-step.is-active { background: var(--color-surface); box-shadow: var(--shadow-xs); }
.ld-rail-step__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
display: flex;
justify-content: space-between;
gap: 8px;
}
.ld-rail-step__time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.ld-rail-step__meta {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
margin-top: 3px;
display: flex;
gap: 10px;
}
.chat-msg.is-linked {
background: linear-gradient(90deg, var(--color-brand-50), transparent 80%);
margin: 0 calc(var(--space-2xl) * -1);
padding-left: var(--space-2xl);
padding-right: var(--space-2xl);
border-radius: 0;
}
.ld-eval { padding: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.ld-eval__group { display: flex; flex-direction: column; gap: var(--space-sm); }
.ld-eval__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.ld-eval__hint {
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
line-height: var(--line-height-snug);
}
.ld-segmented {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
}
.ld-segmented__btn {
padding: 8px 10px;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
display: flex; align-items: center; justify-content: center; gap: 6px;
border-top: none; border-bottom: none; border-left: none;
border-right: 1px solid var(--color-border);
background: transparent;
transition: background var(--duration-fast) var(--ease-out);
}
.ld-segmented__btn:last-child { border-right: none; }
.ld-segmented__btn:hover { background: var(--color-neutral-50); }
.ld-segmented__btn.is-active { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.ld-segmented__btn--ok.is-active { background: var(--color-success-50); color: var(--color-success-700); }
.ld-segmented__btn--fail.is-active { background: var(--color-danger-50); color: var(--color-danger-700); }
.ld-tag-grid { display: flex; flex-wrap: wrap; gap: 5px; }
.ld-tag-toggle {
padding: 4px 9px;
border-radius: var(--radius-sm);
border: 1px solid var(--color-border);
background: var(--color-surface);
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-secondary);
cursor: pointer;
}
.ld-tag-toggle:hover { border-color: var(--color-border-strong); }
.ld-tag-toggle.is-on {
background: var(--color-warning-50);
border-color: var(--color-warning-100);
color: var(--color-warning-700);
font-weight: var(--font-weight-semibold);
}
.ld-tag-toggle.is-on--danger {
background: var(--color-danger-50);
border-color: var(--color-danger-100);
color: var(--color-danger-700);
}
.ld-haiku-card {
background: var(--color-neutral-50);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
}
.ld-haiku-card__head {
display: flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-weight: var(--font-weight-semibold);
margin-bottom: 6px;
}
.ld-haiku-card__head::before {
content: "";
width: 6px; height: 6px;
border-radius: 50%;
background: var(--color-brand-500);
}
.ld-haiku-card__body {
font-size: var(--font-size-sm);
color: var(--color-text-primary);
line-height: var(--line-height-normal);
}
.ld-divider { height: 1px; background: var(--color-border); margin: 0; }
.ld-cta { display: grid; gap: var(--space-sm); }
.ld-cta .btn { width: 100%; }
.ld-msg-divider {
display: flex;
align-items: center;
gap: var(--space-md);
padding: var(--space-sm) 0;
font-size: var(--font-size-2xs);
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wider);
text-transform: uppercase;
}
.ld-msg-divider::before, .ld-msg-divider::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
/* ============================================================
9. BLAZOR COMPONENT HELPERS
============================================================ */
/* Blazor reconnect overlay — opóźnienie 1500 ms ukrywa flash przy przejściach między modułami.
Po upływie czasu modal pojawia się normalnie (prawdziwa utrata połączenia). */
#components-reconnect-modal.components-reconnect-show {
animation: reconnect-show 200ms ease-out 1500ms both;
}
@keyframes reconnect-show {
from { opacity: 0; }
to { opacity: 1; }
}
#components-reconnect-modal.components-reconnect-failed,
#components-reconnect-modal.components-reconnect-rejected {
animation: none;
opacity: 1;
}
/* UserMenu dropdown (details/summary wrapper) */
.app-user-details { position: relative; list-style: none; }
.app-user-details > summary { list-style: none; }
.app-user-details > summary::-webkit-details-marker { display: none; }
.app-user-dropdown {
position: absolute;
bottom: calc(100% + var(--space-xs));
left: 0; right: 0;
background: var(--color-surface);
border: 1px solid var(--color-border-strong);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
padding: var(--space-xs);
z-index: var(--z-dropdown);
}
/* W topnavie dropdown otwiera się w dół */
.app-topnav .app-user-dropdown {
bottom: auto;
top: calc(100% + var(--space-xs));
left: auto;
right: 0;
min-width: 180px;
}
.app-user-dropdown__item {
display: block;
width: 100%;
text-align: left;
text-decoration: none;
}
.app-user-dropdown__lang {
display: flex;
gap: var(--space-xs);
padding: var(--space-xs);
border-bottom: 1px solid var(--color-border);
margin-bottom: var(--space-xs);
}
.app-user-dropdown__lang-btn {
flex: 1;
display: flex;
align-items: center;
justify-content: center;
gap: 5px;
padding: 5px var(--space-sm);
border-radius: var(--radius-md);
border: 1px solid var(--color-border);
background: transparent;
font-size: var(--font-size-sm);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.1s, border-color 0.1s, color 0.1s;
line-height: 1;
}
.app-user-dropdown__lang-btn:hover {
background: var(--color-neutral-100);
color: var(--color-text-primary);
}
.app-user-dropdown__lang-btn--active {
background: var(--color-brand-50);
border-color: var(--color-brand-200);
color: var(--color-brand-700);
font-weight: var(--font-weight-semibold);
}
/* ============================================================
CHAT RENDERER — wspólne style dla modułów Chat i Learning.
Renderer = sekwencja "turns" z bańkami narzędzi (tool-use).
Tryby:
[data-mode="chat"] → bańki w kompaktowym stylu, bez metryk.
[data-mode="learning"] → bańki z metrykami (ms / tok / $).
Stany bańki:
.is-running → animowana kropka, brak chevrona
.is-open → body widoczne, chevron obrócony
.has-error → akcent danger
============================================================ */
.cr {
--cr-rail-w: 28px;
--cr-msg-gap: 18px;
--cr-bot-gap: 10px;
display: flex;
flex-direction: column;
gap: var(--cr-msg-gap);
}
/* =================== MESSAGE (user / bot) =================== */
.cr-msg {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
}
.cr-msg__avatar {
width: 32px; height: 32px;
border-radius: 50%;
display: grid; place-items: center;
font-size: 11px;
font-weight: 600;
font-family: var(--font-sans);
flex-shrink: 0;
user-select: none;
}
.cr-msg--user .cr-msg__avatar {
background: var(--color-brand-100);
color: var(--color-brand-700);
}
.cr-msg--bot .cr-msg__avatar {
background: var(--color-brand-700);
color: var(--color-neutral-0);
font-weight: 700;
}
.cr-msg__col { min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.cr-msg__head {
display: flex; align-items: baseline; gap: 8px;
font-size: 12px;
}
.cr-msg__author {
font-weight: 600;
color: var(--color-text-primary);
}
.cr-msg__time {
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: 10.5px;
font-variant-numeric: tabular-nums;
}
.cr-msg__body {
color: var(--color-text-primary);
font-size: 14px;
line-height: 1.55;
}
.cr-msg__body > p { margin: 0 0 8px; }
.cr-msg__body > p:last-child { margin-bottom: 0; }
.cr-msg__body > ul {
margin: 6px 0 8px;
padding-left: 20px;
display: flex; flex-direction: column; gap: 3px;
}
.cr-msg__body code {
background: var(--color-neutral-100);
padding: 1px 5px;
border-radius: 3px;
font-size: 12.5px;
font-family: var(--font-mono);
}
.cr-msg__body > ol {
margin: 6px 0 8px;
padding-left: 22px;
display: flex; flex-direction: column; gap: 3px;
}
.cr-msg__body > ol:last-child,
.cr-msg__body > ul:last-child { margin-bottom: 0; }
.cr-msg__body h3, .cr-msg__body h4 {
font-size: 13.5px;
font-weight: 700;
color: var(--color-text-primary);
margin: 12px 0 4px;
line-height: 1.3;
}
.cr-msg__body h3:first-child,
.cr-msg__body h4:first-child { margin-top: 0; }
.cr-msg__body pre {
background: var(--color-neutral-100);
border-radius: 4px;
padding: 10px 12px;
overflow-x: auto;
margin: 6px 0 8px;
}
.cr-msg__body pre code {
background: none;
padding: 0;
font-size: 12px;
}
.cr-msg__body table {
border-collapse: collapse;
font-size: 13px;
margin: 6px 0 8px;
width: 100%;
}
.cr-msg__body th, .cr-msg__body td {
border: 1px solid var(--color-neutral-200);
padding: 4px 8px;
text-align: left;
vertical-align: top;
}
.cr-msg__body th {
background: var(--color-neutral-50);
font-weight: 600;
}
.cr-msg__body blockquote {
border-left: 3px solid var(--color-neutral-300);
margin: 6px 0;
padding: 2px 0 2px 12px;
color: var(--color-text-secondary);
}
/* =================== TOOL BUBBLE =================== */
.cr-tools {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: var(--cr-bot-gap);
}
.cr-tools:empty { display: none; }
.cr-msg__col > .cr-tools:last-child { margin-bottom: 0; }
.cr-tool {
border: 1px solid var(--color-border);
border-radius: 8px;
background: var(--color-surface);
overflow: hidden;
transition: border-color 120ms;
}
.cr-tool:hover { border-color: var(--color-border-strong); }
.cr-tool.is-open { border-color: var(--color-border-strong); }
.cr-tool.has-error { border-color: var(--color-danger-100); background: var(--color-danger-50); }
.cr-tool__head {
display: flex;
align-items: center;
gap: 9px;
padding: 7px 10px 7px 9px;
cursor: pointer;
user-select: none;
font-size: 12.5px;
}
.cr-tool__title { flex: 1; min-width: 0; }
.cr-tool__status { margin-left: auto; }
.cr-tool__metrics + .cr-tool__chev,
.cr-tool__metrics + .cr-tool__status,
.cr-tool__chev + .cr-tool__status { margin-left: 0; }
.cr-tool__head:hover { background: var(--color-neutral-50); }
.cr-tool__icon {
width: 22px; height: 22px;
border-radius: 5px;
display: grid; place-items: center;
flex-shrink: 0;
}
.cr-tool__icon--prefilter { background: var(--color-info-50); color: var(--color-info-700); }
.cr-tool__icon--retrieval { background: var(--color-warning-50); color: var(--color-warning-700); }
.cr-tool__icon--product { background: var(--color-brand-50); color: var(--color-brand-700); }
.cr-tool__icon--show-modal { background: #f1ecfa; color: #5a3aa5; }
.cr-tool__icon--params { background: #ecfdf5; color: #065f46; }
.cr-tool__icon--display { background: var(--color-warning-50); color: var(--color-warning-700); }
.cr-tool__icon--analyze { background: #f1ecfa; color: #5a3aa5; }
.cr-tool__icon--system { background: var(--color-neutral-100); color: var(--color-text-muted); }
.cr-tool__icon--llm { background: #eef2ff; color: #3730a3; }
.cr-tool__title {
display: flex; align-items: center; gap: 8px;
min-width: 0;
color: var(--color-text-primary);
font-weight: 500;
}
.cr-tool__name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cr-tool__kind {
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.06em;
text-transform: uppercase;
color: var(--color-text-muted);
background: var(--color-neutral-100);
border-radius: 3px;
padding: 1px 5px;
font-weight: 500;
flex-shrink: 0;
}
.cr-tool__summary {
color: var(--color-text-secondary);
font-size: 12px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 400;
}
.cr-tool__summary strong {
color: var(--color-text-primary);
font-weight: 600;
}
.cr-tool__metrics {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
.cr-tool__metric strong {
color: var(--color-text-secondary);
font-weight: 600;
}
.cr-tool__call-metrics {
display: flex;
flex-wrap: wrap;
gap: 14px;
padding: 7px 0 9px;
margin-bottom: 8px;
border-bottom: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.cr-tool__call-metrics strong { color: var(--color-text-primary); font-weight: 600; }
.cr-tool__call-metric-label { margin-right: 2px; }
.cr-tool__chev {
color: var(--color-text-muted);
transition: transform 120ms ease-out;
flex-shrink: 0;
}
.cr-tool.is-open .cr-tool__chev { transform: rotate(90deg); }
.cr-tool__status {
width: 11px; height: 11px;
flex-shrink: 0;
display: inline-flex;
align-items: center;
justify-content: center;
}
.cr-tool__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-success-500);
animation: none;
margin: auto;
}
.cr-tool.is-running .cr-tool__dot {
background: var(--color-info-500);
animation: cr-pulse 1.1s ease-in-out infinite;
}
.cr-tool.has-error .cr-tool__dot { background: var(--color-danger-500); }
@keyframes cr-pulse {
0%, 100% { transform: scale(0.85); opacity: 0.6; }
50% { transform: scale(1.15); opacity: 1; }
}
.cr-tool.is-running .cr-tool__chev { display: none; }
.cr-tool__body {
display: none;
border-top: 1px solid var(--color-border);
padding: 10px 12px 12px;
background: var(--color-bg-sub);
font-size: 12.5px;
color: var(--color-text-primary);
}
.cr-tool.is-open .cr-tool__body { display: block; }
.cr-tool__sub {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
font-weight: 600;
font-family: var(--font-mono);
margin: 10px 0 4px;
}
.cr-tool__sub:first-child { margin-top: 0; }
.cr-code {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 5px;
padding: 8px 10px;
font-family: var(--font-mono);
font-size: 11.5px;
line-height: 1.5;
color: var(--color-text-primary);
white-space: pre-wrap;
word-break: break-word;
overflow-x: auto;
}
.cr-code--muted { color: var(--color-text-secondary); }
.cr-pills { display: flex; flex-wrap: wrap; gap: 5px; }
.cr-pill {
display: inline-flex; align-items: center; gap: 4px;
padding: 2px 7px;
border-radius: 999px;
background: var(--color-surface);
border: 1px solid var(--color-border);
font-family: var(--font-mono);
font-size: 10px;
color: var(--color-text-secondary);
}
.cr-pill strong { color: var(--color-text-primary); font-family: var(--font-mono); font-weight: 600; }
.cr-pill.is-picked {
background: var(--color-brand-50);
border-color: var(--color-brand-100);
color: var(--color-brand-700);
}
/* =================== "show-modal" tool — przyciskowa bańka =================== */
.cr-tool--action {
background: linear-gradient(0deg, #faf7ff, var(--color-surface));
border-color: #e3daf3;
}
.cr-tool--action:hover { border-color: #c8b8e6; }
.cr-tool--action .cr-tool__action-cta {
font-family: var(--font-mono);
font-size: 10.5px;
color: #5a3aa5;
letter-spacing: 0.04em;
font-weight: 600;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* =================== V2: between-msgs — bańki jako osobne wpisy w timeline =================== */
.cr-event {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: 12px;
align-items: flex-start;
}
.cr-event__rail {
display: flex; justify-content: center;
position: relative;
align-self: stretch;
}
.cr-event__rail::before {
content: "";
position: absolute;
top: 28px;
bottom: calc(var(--cr-msg-gap) * -1 - 4px);
left: 15.5px;
width: 1px;
background: var(--color-border);
}
.cr-event.is-last .cr-event__rail::before { display: none; }
.cr-event__node {
width: 22px; height: 22px;
border-radius: 5px;
display: grid; place-items: center;
position: relative;
z-index: 1;
margin-top: 3px;
flex-shrink: 0;
}
.cr-event__node.is-running {
animation: cr-ring 1.6s ease-out infinite;
}
@keyframes cr-ring {
0% { box-shadow: 0 0 0 0 rgba(21, 114, 203, 0.45); }
70% { box-shadow: 0 0 0 7px rgba(21, 114, 203, 0); }
100% { box-shadow: 0 0 0 0 rgba(21, 114, 203, 0); }
}
/* W V2 ikona w nagłówku bańki jest redundantna — niesie ją rail */
.cr-event .cr-tool__head > .cr-tool__icon { display: none; }
/* Chat mode = bańki nierozwijalne */
.cr[data-mode="chat"] .cr-tool { cursor: default; }
.cr[data-mode="chat"] .cr-tool__head { cursor: default; }
.cr[data-mode="chat"] .cr-tool__head:hover { background: transparent; }
.cr[data-mode="chat"] .cr-tool__chev { display: none; }
.cr[data-mode="chat"] .cr-tool__body { display: none !important; }
.cr[data-mode="chat"] .cr-tool.is-open { border-color: var(--color-border); }
.cr[data-mode="chat"] .cr-tool:hover { border-color: var(--color-border); }
/* =================== GROUPED placement ===================
Wszystko (tools + reasoning + finalna odpowiedź) w jednej kolumnie
pod awatarem bota. Warianty: accent / card / timeline. */
.cr[data-placement="grouped"] {
--cr-msg-gap: 22px;
}
.cr-msg--grouped .cr-grouped {
display: flex;
flex-direction: column;
gap: 12px;
}
.cr-thinking {
display: flex;
flex-direction: column;
}
.cr-thinking__steps {
display: flex;
flex-direction: column;
gap: 8px;
}
/* Reasoning text — krótki, wyciszony tekst przed tool callem */
.cr-reasoning {
font-size: 13px;
line-height: 1.55;
color: var(--color-text-secondary);
padding: 2px 0 0 2px;
}
.cr-reasoning::before {
content: "›";
color: var(--color-text-muted);
margin-right: 6px;
font-family: var(--font-mono);
font-weight: 600;
}
/* Reasoning przed tool callem — mniejszy gap */
.cr-thinking__steps > .cr-reasoning + .cr-tool {
margin-top: -2px;
}
/* Final answer block */
.cr-final {
display: flex;
flex-direction: column;
gap: 8px;
}
.cr-final .cr-msg__body {
font-size: 14px;
}
/* ---------- WARIANT: accent ----------
Myślenie wcięte z lewej, z pionowym akcentem brand.
Odpowiedź pod separatorem, bez karty. */
.cr-msg--grouped[data-variant="accent"] .cr-thinking {
position: relative;
padding: 4px 0 8px 16px;
margin-left: 2px;
}
.cr-msg--grouped[data-variant="accent"] .cr-thinking::before {
content: "";
position: absolute;
left: 0; top: 4px; bottom: 8px;
width: 2px;
background: var(--color-brand-200);
border-radius: 1px;
}
.cr-msg--grouped[data-variant="accent"] .cr-thinking__steps {
gap: 6px;
}
.cr-msg--grouped[data-variant="accent"] .cr-thinking + .cr-final {
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
/* ---------- WARIANT: card ----------
Cała wypowiedź bota w jednej karcie z subtelnym tłem. */
.cr-msg--grouped[data-variant="card"] .cr-grouped {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: 10px;
padding: 14px 16px;
gap: 0;
}
.cr-msg--grouped[data-variant="card"] .cr-thinking {
padding-bottom: 14px;
border-bottom: 1px dashed var(--color-border);
margin-bottom: 14px;
}
.cr-msg--grouped[data-variant="card"] .cr-thinking:last-child {
padding-bottom: 0;
border-bottom: 0;
margin-bottom: 0;
}
.cr-msg--grouped[data-variant="card"] .cr-thinking .cr-tool {
background: var(--color-bg);
}
.cr-msg--grouped[data-variant="card"] .cr-thinking .cr-tool__head {
font-size: 12px;
padding: 6px 10px 6px 8px;
}
.cr-msg--grouped[data-variant="card"] .cr-thinking .cr-tool__name {
font-weight: 500;
color: var(--color-text-secondary);
}
.cr-msg--grouped[data-variant="card"] .cr-reasoning {
font-size: 12.5px;
}
/* ---------- WARIANT: timeline ----------
Bez karty. Myślenie jako oś czasu (kropki + pionowa linia). */
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps {
position: relative;
padding-left: 20px;
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps::before {
content: "";
position: absolute;
left: 5px; top: 10px; bottom: 10px;
width: 1px;
background: var(--color-border-strong);
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps > * {
position: relative;
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps > .cr-tool::before {
content: "";
position: absolute;
left: -20px; top: 9px;
width: 11px; height: 11px;
border-radius: 50%;
background: var(--color-surface);
border: 2px solid var(--color-border-strong);
box-sizing: border-box;
z-index: 1;
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps > .cr-tool.is-running::before {
border-color: var(--color-info-500);
background: var(--color-info-50);
animation: cr-pulse 1.1s ease-in-out infinite;
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps > .cr-tool.has-error::before {
border-color: var(--color-danger-500);
background: var(--color-danger-50);
}
.cr-msg--grouped[data-variant="timeline"] .cr-thinking__steps > .cr-reasoning {
padding-left: 4px;
}
.cr-msg--grouped[data-variant="timeline"] .cr-final {
margin-top: 14px;
padding-top: 12px;
border-top: 1px solid var(--color-border);
}
.cr-msg--grouped[data-variant="timeline"] .cr-final .cr-msg__body {
font-size: 14.5px;
line-height: 1.6;
}
/* =================== Response metrics (pod finalną odpowiedzią) =================== */
.cr-response-metrics {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
.cr-response-metrics strong {
color: var(--color-text-secondary);
font-weight: 600;
}
.cr-response-metrics__model {
color: var(--color-brand-600);
font-weight: 600;
margin-right: 2px;
}
/* =================== Inline product chip =================== */
.cr-sku {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 1px 7px 1px 5px;
border-radius: 4px;
background: var(--color-brand-50);
border: 1px solid var(--color-brand-100);
color: var(--color-brand-700);
font-family: var(--font-mono);
font-size: 11.5px;
font-weight: 600;
cursor: pointer;
text-decoration: none;
white-space: nowrap;
vertical-align: baseline;
transition: background 120ms, border-color 120ms;
}
.cr-sku:hover {
background: var(--color-brand-100);
border-color: var(--color-brand-200);
}
.cr-sku::before {
content: "";
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-success-500);
flex-shrink: 0;
}
.cr-sku--gaps::before { background: var(--color-warning-500); }
.cr-sku__arrow {
width: 10px; height: 10px;
opacity: 0.6;
}
/* =================== Products block (pod wiadomością bota) =================== */
.cr-products { margin-top: 8px; }
.cr-products__label {
font-size: 10.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--color-text-muted);
font-weight: 600;
font-family: var(--font-mono);
margin-bottom: 6px;
display: flex;
align-items: center;
gap: 6px;
}
.cr-products__label-count {
background: var(--color-neutral-100);
padding: 1px 6px;
border-radius: 999px;
font-size: 10px;
color: var(--color-text-secondary);
}
.cr-products--slider {
display: flex;
gap: 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
padding: 2px 0 8px;
scroll-snap-type: x proximity;
-webkit-overflow-scrolling: touch;
}
.cr-products--slider::-webkit-scrollbar { height: 6px; }
.cr-products--slider::-webkit-scrollbar-thumb {
background: var(--color-neutral-200);
border-radius: 3px;
}
.cr-products--slider::-webkit-scrollbar-thumb:hover {
background: var(--color-neutral-300);
}
.cr-product-card {
flex-shrink: 0;
width: 124px;
border: 1px solid var(--color-border);
border-radius: 7px;
background: var(--color-surface);
padding: 8px;
cursor: pointer;
display: flex;
flex-direction: column;
gap: 6px;
scroll-snap-align: start;
transition: border-color 120ms, background 120ms, transform 120ms;
position: relative;
}
.cr-product-card:hover {
border-color: var(--color-border-strong);
background: var(--color-neutral-50);
}
.cr-product-card:active { transform: translateY(1px); }
.cr-product-card__thumb {
width: 100%;
aspect-ratio: 1;
border-radius: 4px;
border: 1px solid var(--color-border);
background:
repeating-linear-gradient(45deg,
var(--color-neutral-100),
var(--color-neutral-100) 5px,
var(--color-neutral-200) 5px,
var(--color-neutral-200) 10px);
display: grid; place-items: center;
color: var(--color-text-muted);
font-family: var(--font-mono);
font-size: 9px;
position: relative;
}
.cr-product-card__status {
position: absolute;
top: 4px; right: 4px;
width: 8px; height: 8px;
border-radius: 50%;
border: 2px solid var(--color-surface);
}
.cr-product-card__status--ready { background: var(--color-success-500); }
.cr-product-card__status--gaps { background: var(--color-warning-500); }
.cr-product-card__sap {
font-family: var(--font-mono);
font-size: 10px;
font-weight: 600;
color: var(--color-brand-700);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cr-product-card__name {
font-size: 11.5px;
line-height: 1.35;
color: var(--color-text-primary);
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-weight: 500;
}
.cr-product-card__price {
font-size: 11px;
color: var(--color-text-secondary);
font-family: var(--font-mono);
font-variant-numeric: tabular-nums;
margin-top: auto;
}
.cr-product-card__price strong {
color: var(--color-text-primary);
font-weight: 600;
}
.cr-product-card--more {
background: var(--color-neutral-50);
border-style: dashed;
align-items: center;
justify-content: center;
text-align: center;
color: var(--color-text-secondary);
font-size: 11px;
gap: 8px;
}
.cr-product-card--more:hover {
background: var(--color-brand-50);
border-color: var(--color-brand-200);
color: var(--color-brand-700);
border-style: solid;
}
.cr-product-card--more svg {
width: 20px; height: 20px;
color: var(--color-text-muted);
}
.cr-product-card--more:hover svg { color: var(--color-brand-700); }
.cr-product-card--more strong {
font-family: var(--font-sans);
font-size: 12.5px;
color: var(--color-text-primary);
font-weight: 600;
}
.cr-product-card--more:hover strong { color: var(--color-brand-700); }
/* =================== Streaming cursor =================== */
.cr-typing {
display: inline-block;
width: 7px; height: 14px;
background: var(--color-text-primary);
vertical-align: text-bottom;
margin-left: 2px;
animation: cr-blink 1s steps(2) infinite;
}
@keyframes cr-blink {
0%, 49% { opacity: 1; }
50%, 100% { opacity: 0; }
}
/* =================== Action footer for bot reply =================== */
.cr-msg__actions {
display: flex;
gap: 4px;
margin-top: 6px;
opacity: 0;
transition: opacity 120ms;
}
.cr-msg:hover .cr-msg__actions { opacity: 1; }
.cr-msg__action {
width: 24px; height: 24px;
border-radius: 4px;
color: var(--color-text-muted);
display: inline-grid; place-items: center;
cursor: pointer;
background: none;
border: none;
padding: 0;
}
.cr-msg__action:hover {
background: var(--color-neutral-100);
color: var(--color-text-primary);
}
/* =================== Prefilter matches table =================== */
.cr-prefilter-matches {
display: flex;
flex-direction: column;
gap: 3px;
margin-top: 4px;
}
.cr-prefilter-match {
display: flex;
align-items: baseline;
gap: 8px;
padding: 3px 6px;
border-radius: 4px;
font-size: 12px;
line-height: 1.4;
}
.cr-prefilter-match:hover { background: var(--color-neutral-50); }
.cr-prefilter-match__score {
font-family: var(--font-mono);
font-size: 11px;
font-weight: 700;
color: var(--color-info-700);
background: var(--color-info-50);
border-radius: 3px;
padding: 1px 5px;
min-width: 28px;
text-align: right;
flex-shrink: 0;
font-variant-numeric: tabular-nums;
}
.cr-prefilter-match__name {
color: var(--color-text-primary);
font-weight: 500;
flex: 1;
min-width: 0;
}
.cr-prefilter-match__tokens {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
white-space: nowrap;
flex-shrink: 0;
}
/* ============================================================
LEARNING · FEW-SHOTY / NARZĘDZIA / PROMPT
============================================================ */
/* --- Few-shoty: tabela ------------------------------------ */
.fs-name {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fs-name__id {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-variant-numeric: tabular-nums;
}
.fs-name__title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
line-height: 1.25;
}
.fs-q {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-snug);
max-width: 380px;
}
.fs-source {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--font-size-xs);
color: var(--color-text-secondary);
font-family: var(--font-mono);
white-space: nowrap;
}
.fs-source__icon {
width: 14px; height: 14px;
color: var(--color-text-muted);
flex-shrink: 0;
}
.fs-source__link {
color: var(--color-text-link);
text-decoration: none;
border-bottom: 1px dotted var(--color-border-strong);
}
.fs-source__link:hover { color: var(--color-brand-hover); }
.fs-source__meta {
display: block;
font-size: 10.5px;
color: var(--color-text-muted);
margin-top: 2px;
letter-spacing: var(--letter-spacing-wide);
}
/* Toggle switch — reused in fewshots AND tools */
.fs-switch {
position: relative;
display: inline-flex;
align-items: center;
gap: var(--space-sm);
cursor: pointer;
user-select: none;
background: none;
border: none;
padding: 0;
}
.fs-switch__track {
width: 32px;
height: 18px;
border-radius: var(--radius-full);
background: var(--color-neutral-200);
position: relative;
transition: background var(--duration-fast) var(--ease-out);
flex-shrink: 0;
}
.fs-switch__track::after {
content: "";
position: absolute;
top: 2px; left: 2px;
width: 14px; height: 14px;
border-radius: 50%;
background: var(--color-neutral-0);
box-shadow: var(--shadow-xs);
transition: transform var(--duration-fast) var(--ease-out);
}
.fs-switch.is-on .fs-switch__track { background: var(--color-success-500); }
.fs-switch.is-on .fs-switch__track::after { transform: translateX(14px); }
.fs-switch__label {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
font-weight: var(--font-weight-semibold);
min-width: 32px;
}
.fs-switch.is-on .fs-switch__label { color: var(--color-success-700); }
.fs-row td { vertical-align: top; }
.fs-row__id {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-wide);
}
/* --- Narzędzia: karty ------------------------------------- */
.tools-list { display: flex; flex-direction: column; gap: var(--space-md); }
.tool-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.tool-card.is-off { background: var(--color-bg-sub); }
.tool-card.is-off .tool-card__head { opacity: .72; }
.tool-card__head {
display: grid;
grid-template-columns: auto 1fr auto auto;
gap: var(--space-md);
align-items: center;
padding: 14px var(--space-lg);
cursor: pointer;
user-select: none;
}
.tool-card__head:hover { background: var(--color-neutral-50); }
.tool-card.is-off .tool-card__head:hover { background: var(--color-neutral-100); }
.tool-card__chev {
color: var(--color-text-muted);
transition: transform var(--duration-fast) var(--ease-out);
display: grid; place-items: center;
width: 22px; height: 22px;
}
.tool-card.is-open .tool-card__chev { transform: rotate(90deg); }
.tool-card__title {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.tool-card__name {
font-family: var(--font-mono);
font-size: var(--font-size-base);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
line-height: 1.2;
}
.tool-card__paren {
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
}
.tool-card__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-snug);
max-width: 720px;
}
.tool-card__body {
display: none;
border-top: 1px solid var(--color-border);
background: var(--color-bg-sub);
padding: var(--space-lg) var(--space-lg) var(--space-xl);
}
.tool-card.is-open .tool-card__body { display: block; }
.tool-section {
display: flex;
flex-direction: column;
gap: var(--space-sm);
margin-top: var(--space-lg);
}
.tool-section:first-child { margin-top: 0; }
.tool-section__label {
font-size: var(--font-size-2xs);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
}
.tool-params {
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
overflow: hidden;
background: var(--color-surface);
font-size: var(--font-size-sm);
}
.tool-params__row {
display: grid;
grid-template-columns: 200px 110px 90px 1fr;
gap: var(--space-md);
padding: 10px var(--space-md);
border-bottom: 1px solid var(--color-border);
align-items: start;
}
.tool-params__row:last-child { border-bottom: none; }
.tool-params__row--head {
background: var(--color-neutral-50);
font-size: var(--font-size-2xs);
font-weight: var(--font-weight-semibold);
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
padding: 8px var(--space-md);
}
.tool-params__name {
font-family: var(--font-mono);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.tool-params__type {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-info-700);
background: var(--color-info-50);
border: 1px solid var(--color-info-100);
border-radius: var(--radius-sm);
padding: 1px 6px;
align-self: start;
width: fit-content;
}
.tool-params__req {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
}
.tool-params__req--required { color: var(--color-danger-700); }
.tool-params__req--optional { color: var(--color-text-muted); }
.tool-params__desc {
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
line-height: var(--line-height-snug);
}
.tool-call-example {
background: var(--color-brand-700);
color: rgba(255,255,255,0.92);
border-radius: var(--radius-md);
padding: var(--space-md) var(--space-lg);
font-family: var(--font-mono);
font-size: var(--font-size-sm);
line-height: 1.6;
overflow-x: auto;
white-space: pre;
margin: 0;
}
.tool-dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-success-500);
flex-shrink: 0;
}
.tool-card.is-off .tool-dot { background: var(--color-neutral-300); }
.tool-used-in {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
padding: 1px 6px;
border-radius: var(--radius-sm);
white-space: nowrap;
}
.tool-card-name-wrap {
display: inline-flex;
align-items: center;
gap: var(--space-sm);
}
/* --- Prompt: edytor + sidebar ----------------------------- */
.prompt-grid {
display: grid;
grid-template-columns: minmax(0, 1fr) 340px;
gap: var(--space-2xl);
margin-top: var(--space-lg);
align-items: start;
}
.prompt-editor {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
display: flex;
flex-direction: column;
}
.prompt-editor__bar {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--space-md);
align-items: center;
padding: 12px var(--space-lg);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-sub);
}
.prompt-editor__meta {
display: flex;
gap: var(--space-md);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
letter-spacing: var(--letter-spacing-wide);
flex-wrap: wrap;
align-items: center;
}
.prompt-editor__meta strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); }
.prompt-editor__actions { display: flex; gap: var(--space-sm); }
.prompt-edit-banner {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 10px var(--space-lg);
background: var(--color-warning-50);
border-bottom: 1px solid var(--color-warning-100);
color: var(--color-warning-700);
font-size: var(--font-size-sm);
}
.prompt-edit-banner__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--color-warning-500, #d99a16);
animation: prompt-pulse 2s infinite;
flex-shrink: 0;
}
@keyframes prompt-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
.prompt-textarea {
width: 100%;
padding: var(--space-xl) var(--space-2xl);
border: 0;
background: var(--color-surface);
font-family: var(--font-mono);
font-size: 13.5px;
line-height: 1.75;
color: var(--color-text-primary);
resize: vertical;
outline: none;
white-space: pre-wrap;
tab-size: 2;
box-sizing: border-box;
}
.prompt-textarea[readonly] { background: var(--color-bg-sub); cursor: default; }
.prompt-textarea:focus:not([readonly]) { background: var(--color-surface); }
.prompt-editor__foot {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px var(--space-lg);
border-top: 1px solid var(--color-border);
background: var(--color-bg-sub);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.prompt-editor__foot strong { color: var(--color-text-primary); font-weight: var(--font-weight-semibold); font-family: var(--font-mono); }
.prompt-side {
display: flex;
flex-direction: column;
gap: var(--space-lg);
position: sticky;
top: 24px;
}
.prompt-side__card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
overflow: hidden;
}
.prompt-side__head {
padding: 12px var(--space-md);
display: flex;
justify-content: space-between;
align-items: center;
gap: var(--space-sm);
border-bottom: 1px solid var(--color-border);
background: var(--color-bg-sub);
}
.prompt-side__head-title {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
}
.prompt-side__head-count {
font-family: var(--font-mono);
font-size: var(--font-size-xs);
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
.prompt-side__head-link {
font-size: var(--font-size-xs);
font-family: var(--font-mono);
color: var(--color-text-link);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
letter-spacing: var(--letter-spacing-wide);
}
.prompt-side__head-link:hover { color: var(--color-brand-hover); }
.prompt-side__list { display: flex; flex-direction: column; }
.prompt-side__item {
display: grid;
grid-template-columns: 8px 1fr auto;
align-items: center;
gap: 10px;
padding: 9px var(--space-md);
border-bottom: 1px solid var(--color-border);
font-size: var(--font-size-sm);
}
.prompt-side__item:last-child { border-bottom: none; }
.prompt-side__item.is-off { opacity: .55; }
.prompt-side__dot {
width: 7px; height: 7px;
border-radius: 50%;
background: var(--color-success-500);
}
.prompt-side__item.is-off .prompt-side__dot { background: var(--color-neutral-300); }
.prompt-side__name { min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.prompt-side__name-main {
font-family: var(--font-mono);
font-size: var(--font-size-sm);
color: var(--color-text-primary);
font-weight: var(--font-weight-medium);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.prompt-side__name-sub {
font-size: 10.5px;
color: var(--color-text-muted);
font-family: var(--font-mono);
letter-spacing: var(--letter-spacing-wide);
}
.prompt-side__chip {
font-family: var(--font-mono);
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wide);
color: var(--color-text-muted);
padding: 2px 6px;
border-radius: var(--radius-sm);
background: var(--color-neutral-100);
}
.prompt-side__chip--on {
background: var(--color-success-50);
color: var(--color-success-700);
}
.prompt-side__hint {
padding: 10px var(--space-md);
background: var(--color-info-50);
border-top: 1px solid var(--color-info-100);
font-size: var(--font-size-xs);
color: var(--color-info-700);
line-height: var(--line-height-snug);
}
.prompt-side__hint strong { font-weight: var(--font-weight-semibold); }
.prompt-meta-card {
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-lg);
padding: var(--space-md);
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px var(--space-md);
}
.prompt-meta-card__cell { display: flex; flex-direction: column; gap: 2px; }
.prompt-meta-card__label {
font-size: 10px;
text-transform: uppercase;
letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
font-weight: var(--font-weight-semibold);
font-family: var(--font-mono);
}
.prompt-meta-card__value {
font-size: var(--font-size-sm);
font-weight: var(--font-weight-semibold);
color: var(--color-text-primary);
font-variant-numeric: tabular-nums;
}
.prompt-meta-card__value--mono { font-family: var(--font-mono); }
.prompt-meta-card__value--sub {
font-size: 10.5px;
color: var(--color-text-muted);
font-weight: var(--font-weight-regular);
font-family: var(--font-mono);
}
.prompt-version-badge {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-brand-700);
background: var(--color-brand-50);
border: 1px solid var(--color-brand-100);
border-radius: var(--radius-sm);
padding: 2px 8px;
text-transform: uppercase;
}
.prompt-version-badge::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-brand-500);
}
/* ── Dropdown wyboru wersji prompta ────────────────────────── */
.prompt-version-picker {
position: relative;
}
.prompt-version-picker__btn {
display: inline-flex;
align-items: center;
gap: 6px;
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
color: var(--color-brand-700);
background: var(--color-brand-50);
border: 1px solid var(--color-brand-100);
border-radius: var(--radius-sm);
padding: 2px 8px;
text-transform: uppercase;
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.prompt-version-picker__btn:hover { background: var(--color-brand-100); border-color: var(--color-brand-200); }
.prompt-version-picker.is-open .prompt-version-picker__btn { background: var(--color-brand-100); border-color: var(--color-brand-300); }
.prompt-version-picker__caret {
margin-left: 2px;
transition: transform 0.15s;
}
.prompt-version-picker.is-open .prompt-version-picker__caret { transform: rotate(180deg); }
.prompt-version-picker__dot {
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-brand-500);
flex-shrink: 0;
}
.prompt-version-picker__dot.is-history { background: var(--color-neutral-400); }
.prompt-version-picker__menu {
position: absolute;
top: calc(100% + 4px);
left: 0;
z-index: 100;
min-width: 220px;
background: var(--color-surface-raised);
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
box-shadow: var(--shadow-md);
padding: 4px;
}
.prompt-version-picker__item {
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 6px 10px;
background: none;
border: none;
border-radius: var(--radius-sm);
font-family: var(--font-mono);
font-size: var(--font-size-xs);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-wide);
text-transform: uppercase;
color: var(--color-text-primary);
cursor: pointer;
text-align: left;
transition: background 0.1s;
}
.prompt-version-picker__item:hover { background: var(--color-neutral-50); }
.prompt-version-picker__item.is-active { background: var(--color-brand-50); color: var(--color-brand-700); }
.prompt-version-picker__meta {
margin-left: auto;
font-family: var(--font-sans);
font-size: 11px;
font-weight: var(--font-weight-regular);
letter-spacing: normal;
text-transform: none;
color: var(--color-text-muted);
}
/* ── Banner podglądu historycznej wersji ───────────────────── */
.prompt-history-banner {
display: flex;
align-items: center;
gap: var(--space-md);
padding: 10px var(--space-lg);
background: var(--color-neutral-50);
border-bottom: 1px solid var(--color-border);
color: var(--color-text-secondary);
font-size: var(--font-size-sm);
}
.prompt-history-banner strong { color: var(--color-text-primary); }
.prompt-history-banner__back {
margin-left: auto;
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-sm);
padding: 3px 10px;
font-size: var(--font-size-xs);
font-weight: var(--font-weight-medium);
color: var(--color-text-secondary);
cursor: pointer;
transition: background 0.12s, border-color 0.12s;
}
.prompt-history-banner__back:hover { background: var(--color-neutral-100); border-color: var(--color-border-strong); color: var(--color-text-primary); }
/* ── ChatRenderer: separator nowej rozmowy ─────────────────── */
.cr-new-chat-separator {
display: flex;
align-items: center;
gap: var(--space-md);
margin: var(--space-2xl) 0;
color: var(--color-text-muted);
font-size: var(--font-size-xs);
}
.cr-new-chat-separator::before,
.cr-new-chat-separator::after {
content: "";
flex: 1;
height: 1px;
background: var(--color-border);
}
.cr-new-chat-separator__label {
white-space: nowrap;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* ── ChatRenderer: separator progu kosztu ─────────────────── */
.cr-cost-threshold {
display: flex;
align-items: center;
gap: var(--space-sm);
margin: var(--space-xl) 0;
padding: var(--space-xs) var(--space-md);
border-radius: var(--radius-md);
font-size: var(--font-size-xs);
border: 1px solid;
}
.cr-cost-threshold--warning {
background: var(--color-warning-50);
border-color: var(--color-warning-200);
color: var(--color-warning-700);
}
.cr-cost-threshold--block {
background: var(--color-danger-50);
border-color: var(--color-danger-200);
color: var(--color-danger-700);
}
/* ============================================================
USER VIEW — minimalny pasek z ikonami narzędzi (ToolDock).
Brak metryk, brak rozwijania, brak kosztów.
============================================================ */
.cru-dock {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 4px 12px 4px 6px;
border-radius: 999px;
background: var(--color-neutral-100);
border: 1px solid var(--color-border);
align-self: flex-start;
font-size: 12px;
color: var(--color-text-secondary);
max-width: 100%;
user-select: none;
transition: background 0.35s ease, border-color 0.35s ease, color 0.35s ease;
}
.cru-dock.is-running {
background: var(--color-info-50);
border-color: var(--color-info-100);
color: var(--color-info-700);
}
.cru-dock.is-running.cru-dock--params { background: #ecfdf5; border-color: #a7f3d0; color: #065f46; }
.cru-dock.is-running.cru-dock--display { background: #fffbeb; border-color: #fde68a; color: #92400e; }
.cru-dock.is-running.cru-dock--analyze { background: #f5f3ff; border-color: #ddd6fe; color: #5b21b6; }
.cru-dock.is-running.cru-dock--system { background: var(--color-neutral-100); border-color: var(--color-border); color: var(--color-text-secondary); }
.cru-dock.has-error {
background: var(--color-danger-50);
border-color: var(--color-danger-100);
color: var(--color-danger-700);
}
.cru-dock__icons {
display: inline-flex;
align-items: center;
}
.cru-dock__icon {
width: 22px; height: 22px;
border-radius: 5px;
display: grid; place-items: center;
margin-left: -6px;
border: 2px solid var(--color-neutral-100);
position: relative;
animation: cru-pop 280ms cubic-bezier(.34,1.56,.64,1) both;
}
.cru-dock__icon:first-child { margin-left: 0; }
.cru-dock.is-running .cru-dock__icon { border-color: var(--color-info-50); }
.cru-dock.has-error .cru-dock__icon { border-color: var(--color-danger-50); }
/* ostatnia ikona w trakcie pracy — pulsuje */
.cru-dock.is-running .cru-dock__icon:last-child {
animation: cru-pop 280ms cubic-bezier(.34,1.56,.64,1) both, cru-pulse 1.2s ease-in-out 300ms infinite;
}
/* Stan inicjalny — trzy kropki + „Myślę…" */
.cru-dock--initial {
padding-left: 12px;
}
.cru-dock__thinking {
display: inline-flex;
align-items: center;
gap: 4px;
}
.cru-dock__think-dot {
width: 5px; height: 5px;
border-radius: 50%;
background: currentColor;
opacity: 0.6;
display: inline-block;
animation: cru-think 1.1s ease-in-out infinite;
}
.cru-dock__think-dot:nth-child(2) { animation-delay: 0.15s; }
.cru-dock__think-dot:nth-child(3) { animation-delay: 0.30s; }
@keyframes cru-think {
0%, 80%, 100% { transform: translateY(0); opacity: 0.5; }
40% { transform: translateY(-3px); opacity: 1; }
}
@keyframes cru-pop {
0% { transform: scale(0.4) translateX(-4px); opacity: 0; }
60% { transform: scale(1.1); opacity: 1; }
100% { transform: scale(1); opacity: 1; }
}
@keyframes cru-pulse {
0%, 100% { box-shadow: 0 0 0 0 rgba(21, 114, 203, 0.0); }
50% { box-shadow: 0 0 0 4px rgba(21, 114, 203, 0.18); }
}
.cru-dock__label {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
font-weight: 500;
margin-left: 2px;
}
.cru-dock__time {
font-family: var(--font-mono);
font-size: 10.5px;
color: var(--color-text-muted);
font-variant-numeric: tabular-nums;
}
/* ============================================================
ADMIN VIEW — szczegółowy widok wywołań.
LLM calls pierwszorzędne, tool calls drugorzędne.
============================================================ */
.cra .cr-msg--admin-view .cr-msg__col {
gap: 10px;
}
/* ---------- Pasek podsumowujący na górze tury bota ---------- */
.cra-summary {
display: inline-flex;
align-items: center;
gap: 10px;
padding: 6px 12px;
border-radius: 7px;
background: var(--color-bg-sub);
border: 1px solid var(--color-border);
font-size: 11.5px;
color: var(--color-text-secondary);
align-self: flex-start;
font-variant-numeric: tabular-nums;
}
.cra-summary__group {
display: inline-flex;
align-items: center;
gap: 5px;
}
.cra-summary__group strong {
color: var(--color-text-primary);
font-weight: 600;
font-family: var(--font-mono);
font-size: 12px;
}
.cra-summary__group--strong strong {
color: var(--color-brand-700);
font-size: 13px;
}
.cra-summary__label {
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-size: 10px;
font-family: var(--font-mono);
font-weight: 600;
}
.cra-summary__sub {
color: var(--color-text-muted);
font-size: 10.5px;
font-family: var(--font-mono);
}
.cra-summary__sep {
width: 1px;
height: 14px;
background: var(--color-border-strong);
display: inline-block;
}
/* ---------- Lista zdarzeń (tool + llm calls) ---------- */
.cra-events {
display: flex;
flex-direction: column;
gap: 8px;
}
/* ---------- LLM Bubble ---------- */
.cra-llm {
border: 1px solid var(--color-border);
border-radius: 9px;
background: var(--color-surface);
overflow: hidden;
}
.cra-llm.is-open { border-color: var(--color-border-strong); }
.cra-llm.has-error { border-color: var(--color-danger-100); background: var(--color-danger-50); }
.cra-llm__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px 8px 10px;
cursor: pointer;
user-select: none;
}
.cra-llm__head:hover { background: var(--color-neutral-50); }
.cra-llm__head-l {
display: flex;
align-items: center;
gap: 9px;
min-width: 0;
}
.cra-llm__head-r {
display: flex;
align-items: center;
gap: 10px;
flex-shrink: 0;
}
.cra-llm__badge {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 7px 2px 6px;
border-radius: 4px;
background: var(--color-brand-700);
color: var(--color-neutral-0);
font-family: var(--font-mono);
font-size: 9.5px;
letter-spacing: 0.08em;
font-weight: 700;
text-transform: uppercase;
flex-shrink: 0;
}
.cra-llm__model {
font-family: var(--font-mono);
font-size: 12px;
color: var(--color-brand-700);
font-weight: 600;
flex-shrink: 0;
}
.cra-llm__name {
font-size: 13px;
color: var(--color-text-primary);
font-weight: 500;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.cra-llm__metric {
display: inline-flex;
align-items: center;
gap: 4px;
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
.cra-llm__metric strong {
color: var(--color-text-primary);
font-weight: 600;
}
.cra-llm__metric-unit {
color: var(--color-text-muted);
font-size: 10px;
}
.cra-llm__metric--strong strong {
color: var(--color-brand-700);
font-size: 12.5px;
}
.cra-llm__chev {
color: var(--color-text-muted);
transition: transform 120ms;
display: inline-grid;
place-items: center;
}
.cra-llm.is-open .cra-llm__chev { transform: rotate(180deg); }
/* Grid 4 metryk */
.cra-llm__grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
background: var(--color-surface);
border-top: 1px solid var(--color-border);
}
.cra-llm__cell {
padding: 9px 12px 10px;
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.cra-llm__cell + .cra-llm__cell {
border-left: 1px solid var(--color-border);
}
.cra-llm__cell-label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--color-text-muted);
font-weight: 600;
font-family: var(--font-mono);
}
.cra-llm__cell-tok {
font-family: var(--font-mono);
font-size: 15px;
color: var(--color-text-primary);
font-weight: 600;
font-variant-numeric: tabular-nums;
display: flex;
align-items: baseline;
gap: 3px;
}
.cra-llm__cell-unit {
font-size: 10px;
color: var(--color-text-muted);
font-weight: 400;
}
.cra-llm__cell-cost {
font-family: var(--font-mono);
font-size: 11px;
color: var(--color-text-secondary);
font-variant-numeric: tabular-nums;
}
/* Body (rozwinięty payload) */
.cra-llm__body {
display: none;
border-top: 1px solid var(--color-border);
padding: 12px;
background: var(--color-bg-sub);
font-size: 12.5px;
}
.cra-llm.is-open .cra-llm__body { display: block; }
/* ---------- Final answer wrapper ---------- */
.cra-final {
margin-top: 4px;
padding: 12px 14px;
border-radius: 8px;
border: 1px solid var(--color-success-100);
background: linear-gradient(180deg, var(--color-success-50) 0%, #ffffff 60%);
}
.cra-final__label {
font-size: 9.5px;
text-transform: uppercase;
letter-spacing: 0.08em;
font-weight: 600;
font-family: var(--font-mono);
color: var(--color-success-700);
margin-bottom: 6px;
display: inline-flex;
align-items: center;
gap: 6px;
}
.cra-final__label::before {
content: "";
width: 5px; height: 5px;
border-radius: 50%;
background: var(--color-success-500);
}
/* W admin view tool bubble — pokaż metryki, pozwól rozwijać */
.cra .cr-tool__metrics { display: inline-flex; }
.cra .cr-tool__chev { display: inline-flex; }
/* ── Prompt: podgląd żądania ────────────────────────────────── */
.prompt-preview-section {
margin-top: var(--space-2xl);
}
.prompt-preview-toggle {
display: flex;
align-items: center;
gap: var(--space-sm);
background: none;
border: 1px solid var(--color-border);
border-radius: var(--radius-md);
padding: var(--space-sm) var(--space-md);
cursor: pointer;
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
width: 100%;
}
.prompt-preview-toggle:hover {
background: var(--color-neutral-50);
color: var(--color-text-primary);
}
.prompt-preview-toggle__hint {
margin-left: auto;
font-size: var(--font-size-xs);
color: var(--color-text-muted);
}
.prompt-preview-stats {
display: flex;
align-items: center;
gap: var(--space-md);
margin: var(--space-md) 0 var(--space-sm);
font-size: var(--font-size-sm);
color: var(--color-text-secondary);
}
.prompt-preview-stats__sep {
color: var(--color-text-muted);
}
.prompt-textarea--preview {
font-size: var(--font-size-xs);
background: var(--color-neutral-50);
}
/* ============================================================
9. CHAT — Standalone app shell (no ZARYS topnav/subnav)
Used by /assistant (user-facing), responsive desktop + mobile.
Admin pages at /assistant/admin/... keep AssistantModuleLayout.
============================================================ */
/* Outer frame: fills viewport, centres the card */
/* Wrapper clips the scaled video so it never overflows past the viewport.
Dark background shows instantly before the video frame arrives. */
.chat-frame-bg-wrap {
position: fixed;
inset: 0;
overflow: hidden;
background: #0a1628;
z-index: 0;
}
.chat-frame-bg {
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
object-fit: cover;
/* Scale up ~15 % to push letterbox bars out of view */
transform: translate(-50%, -50%) scale(1.15);
}
.chat-frame {
min-height: 100vh;
min-height: 100dvh;
display: flex;
align-items: center;
justify-content: center;
padding: 28px 32px;
box-sizing: border-box;
position: relative;
z-index: 1;
}
/* Card: max-width, rounded, elevated */
.chat-app {
width: 100%;
max-width: 1080px;
height: calc(100vh - 56px);
height: calc(100dvh - 56px);
display: flex;
flex-direction: column;
background: var(--color-surface);
border-radius: var(--radius-2xl);
border: 1px solid var(--color-border);
box-shadow:
0 20px 48px rgba(15, 29, 54, 0.10),
0 4px 12px rgba(15, 29, 54, 0.06);
overflow: hidden;
position: relative;
}
/* ── Top bar ──────────────────────────────────────────────── */
.chat-app-bar {
height: 52px;
padding: 0 var(--space-md);
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-sm);
border-bottom: 1px solid var(--color-border);
background: var(--color-surface);
flex-shrink: 0;
z-index: var(--z-sticky);
position: relative;
}
.chat-app-bar__left { justify-self: start; display: flex; align-items: center; gap: 4px; }
.chat-app-bar__center{ justify-self: center; display: flex; align-items: center; }
.chat-app-bar__right { justify-self: end; display: flex; align-items: center; gap: var(--space-sm); }
/* Brand */
.chat-brand {
display: inline-flex; align-items: center; gap: var(--space-sm);
height: 32px; padding: 0 var(--space-sm); border-radius: var(--radius-md);
user-select: none;
}
.chat-brand__logo {
width: 22px; height: 22px;
background: var(--color-brand); color: white;
border-radius: 5px; display: grid; place-items: center;
font-size: var(--font-size-xs); font-weight: var(--font-weight-bold);
flex-shrink: 0;
}
.chat-brand__name {
font-weight: var(--font-weight-semibold);
font-size: var(--font-size-base);
color: var(--color-text-primary);
}
/* "Historia" title shown in place of brand on mobile when drawer open */
.chat-app-bar__hist-title {
font-size: var(--font-size-md);
font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug);
display: none;
}
/* Icon button (toggle drawer, compose) */
.chat-iconbtn {
width: 34px; height: 34px;
display: grid; place-items: center;
background: transparent; border: none;
border-radius: var(--radius-full);
color: var(--color-text-secondary); cursor: pointer;
transition: background var(--duration-fast), color var(--duration-fast);
flex-shrink: 0;
}
.chat-iconbtn:hover { background: var(--color-neutral-100); color: var(--color-text-primary); }
.chat-iconbtn.is-active { background: var(--color-neutral-100); color: var(--color-text-primary); }
.chat-iconbtn:disabled { opacity: 0.4; cursor: not-allowed; }
/* History/close icon swap inside toggle button */
.chat-bar-toggle__close { display: none; }
/* "New conversation" text button — desktop only */
.chat-new-btn {
display: inline-flex; align-items: center; gap: 6px;
height: 30px; padding: 0 var(--space-md);
background: var(--color-neutral-100); border: 1px solid transparent;
border-radius: var(--radius-md);
color: var(--color-text-primary);
font-size: var(--font-size-sm); font-weight: var(--font-weight-medium);
cursor: pointer; white-space: nowrap;
transition: background var(--duration-fast);
}
.chat-new-btn:hover { background: var(--color-neutral-200); }
.chat-new-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.chat-new-btn__icon { color: var(--color-text-secondary); display: inline-flex; }
/* Compose icon button — mobile only (hidden on desktop) */
.chat-new-iconbtn { display: none; }
/* Avatar button */
.chat-avatar {
width: 30px; height: 30px;
border-radius: var(--radius-full);
background: linear-gradient(135deg, var(--color-brand-accent), #2e5594);
color: white; display: grid; place-items: center;
font-size: var(--font-size-xs); font-weight: var(--font-weight-semibold);
cursor: pointer; border: 1.5px solid transparent;
transition: border-color var(--duration-fast);
flex-shrink: 0;
}
.chat-avatar.is-active { border-color: var(--color-brand-accent); }
/* Transparent backdrop — closes account menu on outside click */
.chat-backdrop {
position: fixed; inset: 0; z-index: calc(var(--z-dropdown) - 1);
background: transparent;
}
/* Account dropdown */
.chat-account-menu {
position: absolute; top: 50px; right: var(--space-md);
width: 244px;
background: var(--color-surface);
border: 1px solid var(--color-border);
border-radius: var(--radius-xl);
box-shadow: var(--shadow-xl);
padding: 6px;
z-index: var(--z-dropdown);
animation: chatMenuIn 0.15s var(--ease-out);
}
@keyframes chatMenuIn {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
.chat-account-menu__head {
padding: var(--space-sm) var(--space-md);
border-bottom: 1px solid var(--color-border);
margin-bottom: 4px;
}
.chat-account-menu__name { font-size: var(--font-size-base); font-weight: var(--font-weight-semibold); }
.chat-account-menu__role { font-size: var(--font-size-xs); color: var(--color-text-muted); font-family: var(--font-mono); margin-top: 2px; }
.chat-account-menu__item {
display: flex; align-items: center; gap: var(--space-sm);
padding: 7px var(--space-md); width: 100%;
background: transparent; border: none;
border-radius: var(--radius-md);
font-size: var(--font-size-base);
color: var(--color-text-primary); cursor: pointer;
text-align: left; text-decoration: none;
transition: background var(--duration-fast);
}
.chat-account-menu__item:hover { background: var(--color-neutral-100); text-decoration: none; }
.chat-account-menu__item--danger { color: var(--color-danger-500); }
.chat-account-menu__item--admin { font-weight: var(--font-weight-medium); }
.chat-account-menu__item--admin:hover { background: var(--color-brand-50); }
.chat-account-menu__sep { height: 1px; background: var(--color-border); margin: 4px 6px; }
.chat-account-menu__lang {
display: flex; gap: 4px; padding: 6px var(--space-md);
}
.chat-account-menu__lang-btn {
flex: 1; height: 30px; display: flex; align-items: center; justify-content: center; gap: 4px;
border: 1px solid var(--color-border); border-radius: var(--radius-md);
font-size: var(--font-size-sm); cursor: pointer; background: transparent;
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.chat-account-menu__lang-btn:hover { background: var(--color-neutral-100); }
.chat-account-menu__lang-btn--active {
background: var(--color-brand-50); border-color: var(--color-brand-200);
color: var(--color-brand-700); font-weight: var(--font-weight-medium);
}
/* ── Body (drawer + main) ────────────────────────────────── */
.chat-app__body {
flex: 1; display: flex; min-height: 0;
position: relative; overflow: hidden;
}
/* ── Drawer (conversation history sidebar) ───────────────── */
.chat-app__drawer {
width: var(--chat-convo-sidebar-width);
min-width: 0;
background: var(--color-neutral-50);
border-right: 1px solid var(--color-border);
display: flex; flex-direction: column;
flex-shrink: 0; overflow: hidden;
transition: width 0.28s var(--ease-out);
}
.chat-app[data-drawer="closed"] .chat-app__drawer { width: 0; }
.chat-app[data-drawer="open"] .chat-app__drawer { width: var(--chat-convo-sidebar-width); }
.chat-drawer__search-wrap { padding: var(--space-lg) var(--space-lg) var(--space-sm); flex-shrink: 0; }
.chat-drawer__search { position: relative; }
.chat-drawer__search input {
width: 100%; height: 32px;
background: var(--color-neutral-100); border: 1px solid transparent;
border-radius: var(--radius-md); padding: 0 var(--space-sm) 0 30px;
font-size: var(--font-size-sm); outline: none; color: var(--color-text-primary);
transition: background var(--duration-fast), border-color var(--duration-fast);
}
.chat-drawer__search input:focus { background: white; border-color: var(--color-border-strong); }
.chat-drawer__search-icon {
position: absolute; left: var(--space-sm); top: 50%; transform: translateY(-50%);
color: var(--color-text-muted); pointer-events: none; display: flex; align-items: center;
}
.chat-drawer__list { flex: 1; overflow-y: auto; padding-bottom: var(--space-sm); }
.chat-drawer__group {
font-family: var(--font-mono); font-size: var(--font-size-2xs);
letter-spacing: var(--letter-spacing-wider); text-transform: uppercase;
color: var(--color-text-muted);
padding: var(--space-lg) var(--space-lg) 6px;
display: flex; justify-content: space-between;
}
.chat-drawer__row {
display: grid; grid-template-columns: 3px 1fr auto;
gap: var(--space-md); padding: var(--space-sm) var(--space-md);
cursor: pointer; align-items: center;
}
.chat-drawer__row + .chat-drawer__row { border-top: 1px solid var(--color-neutral-100); }
.chat-drawer__row:hover { background: var(--color-neutral-100); }
.chat-drawer__row.is-active { background: var(--color-brand-50); }
.chat-drawer__row.is-active .chat-drawer__row-title {
color: var(--color-brand-700); font-weight: var(--font-weight-semibold);
}
.chat-drawer__row-bar {
width: 3px; height: 22px; border-radius: var(--radius-xs); background: var(--color-neutral-300);
}
.chat-drawer__row.is-active .chat-drawer__row-bar { background: var(--color-brand-500); }
.chat-drawer__row-title {
font-size: var(--font-size-base); font-weight: var(--font-weight-medium);
color: var(--color-text-primary);
white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
}
.chat-drawer__row-time {
font-family: var(--font-mono); font-size: var(--font-size-xs);
color: var(--color-text-muted); white-space: nowrap;
display: flex; align-items: center; gap: 2px;
}
/* ── Main area ───────────────────────────────────────────── */
.chat-app__main {
flex: 1; min-width: 0; display: flex; flex-direction: column;
background: var(--color-surface);
}
.chat-app__scroll { flex: 1; overflow-y: auto; }
.chat-app__inner {
max-width: var(--chat-message-max-width); margin: 0 auto;
padding: var(--space-sm) var(--space-2xl) var(--space-2xl);
}
/* ── Empty / new conversation state ─────────────────────── */
.chat-empty {
flex: 1; display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: var(--space-2xl); text-align: center;
}
.chat-empty__logo {
width: 56px; height: 56px; background: var(--color-brand); color: white;
border-radius: 14px; display: grid; place-items: center;
font-weight: var(--font-weight-bold); font-size: 22px;
margin-bottom: var(--space-xl); flex-shrink: 0;
}
.chat-empty__greeting {
font-size: 22px; font-weight: var(--font-weight-semibold);
letter-spacing: var(--letter-spacing-snug); margin: 0 0 6px;
}
.chat-empty__sub {
font-size: var(--font-size-base); color: var(--color-text-secondary);
margin: 0 0 var(--space-2xl); max-width: 440px; line-height: var(--line-height-normal);
}
.chat-empty__suggestions {
display: grid; grid-template-columns: 1fr 1fr;
gap: var(--space-sm); max-width: 520px; width: 100%;
}
.chat-empty__sug {
text-align: left; padding: var(--space-md) var(--space-lg);
background: var(--color-surface); border: 1px solid var(--color-border);
border-radius: var(--radius-xl); cursor: pointer;
display: flex; flex-direction: column; gap: 2px; font-family: inherit;
transition: border-color var(--duration-fast), background var(--duration-fast);
}
.chat-empty__sug:hover { border-color: var(--color-border-strong); background: var(--color-neutral-50); }
.chat-empty__sug-cat {
font-family: var(--font-mono); font-size: var(--font-size-2xs);
text-transform: uppercase; letter-spacing: var(--letter-spacing-wider);
color: var(--color-text-muted);
}
.chat-empty__sug-title {
font-size: var(--font-size-base); color: var(--color-text-primary);
font-weight: var(--font-weight-medium); line-height: var(--line-height-snug);
}
/* ── Responsive composer: desktop vs mobile ──────────────── */
.chat-composer-mobile { display: none; }
/* Mobile pill composer */
.composer-m {
border: 1px solid var(--color-border-strong); border-radius: var(--radius-full);
padding: var(--space-sm) var(--space-sm) var(--space-sm) var(--space-lg);
display: flex; align-items: center; gap: var(--space-sm);
background: var(--color-surface);
transition: border-color var(--duration-fast), box-shadow var(--duration-fast);
}
.composer-m:focus-within { border-color: var(--color-border-focus); box-shadow: var(--focus-ring); }
.composer-m input {
flex: 1; border: none; outline: none;
font-size: var(--font-size-md); background: transparent; color: var(--color-text-primary);
}
.composer-m__send {
width: 32px; height: 32px; border-radius: var(--radius-full);
background: var(--color-brand); color: white; border: none;
display: grid; place-items: center; cursor: pointer; flex-shrink: 0;
transition: background var(--duration-fast);
}
.composer-m__send:hover { background: var(--color-brand-hover); }
.composer-m__send:disabled { opacity: 0.4; cursor: not-allowed; }
/* ============================================================
9a. CHAT standalone — MOBILE overrides (≤ 767px)
============================================================ */
@media (max-width: 767px) {
/* Frame: no padding, no centering — full viewport */
.chat-frame {
display: block;
padding: 0;
min-height: 100vh;
min-height: 100dvh;
}
/* Card: stretch to full viewport, no rounding/shadow */
.chat-app {
position: fixed;
inset: 0;
height: auto;
padding-bottom: var(--keyboard-height, 0px);
max-width: none;
border-radius: 0;
border: none;
box-shadow: none;
}
/* Bar sizing */
.chat-app-bar { height: 50px; padding: 0 var(--space-sm); }
.chat-account-menu { top: 48px; right: var(--space-sm); width: 220px; }
/* Touch targets */
.chat-iconbtn { width: 38px; height: 38px; }
.chat-avatar { width: 32px; height: 32px; }
/* Toggle icon: swap history→close when drawer is open */
.chat-app[data-drawer="open"] .chat-bar-toggle__hist { display: none; }
.chat-app[data-drawer="open"] .chat-bar-toggle__close { display: block; }
/* Bar center: swap brand→"Historia" when drawer open */
.chat-app[data-drawer="open"] .chat-brand { display: none; }
.chat-app[data-drawer="open"] .chat-app-bar__hist-title{ display: block; }
/* Right actions hidden when drawer open */
.chat-app[data-drawer="open"] .chat-app-bar__right { visibility: hidden; }
/* Button swap: hide text button, show icon button */
.chat-new-btn { display: none; }
.chat-new-iconbtn { display: grid; }
/* Admin panel link hidden on mobile */
.chat-account-menu__item--admin { display: none; }
.chat-account-menu__sep--admin { display: none; }
/* Drawer: full-screen overlay — [data-drawer] beats desktop width:0 rule */
.chat-app[data-drawer] .chat-app__drawer {
position: absolute; top: 0; left: 0; right: 0; bottom: 0;
width: 100%; border-right: none;
z-index: var(--z-overlay);
transition: transform 0.28s var(--ease-out);
}
.chat-app[data-drawer="closed"] .chat-app__drawer { transform: translateX(-100%); }
.chat-app[data-drawer="open"] .chat-app__drawer { transform: translateX(0); }
/* Feed padding */
.chat-app__inner { padding: var(--space-xs) var(--space-lg) var(--space-xl); }
/* Empty state: single-column suggestions, scrollable from top */
.chat-empty { justify-content: flex-start; padding-top: var(--space-3xl); padding-left: var(--space-lg); padding-right: var(--space-lg); }
.chat-empty__logo { width: 48px; height: 48px; font-size: 20px; margin-bottom: var(--space-lg); }
.chat-empty__greeting { font-size: 18px; }
.chat-empty__suggestions { grid-template-columns: 1fr; max-width: 100%; }
/* Swap composers */
.chat-composer-desktop { display: none; }
.chat-composer-mobile { display: block; }
.chat-composer-mobile .composer-wrap {
padding: var(--space-sm) var(--space-md) var(--space-md);
}
}
/* ============================================================
10. CHAT ADMIN — Dashboard grid
============================================================ */
.chatadm-grid,
.dashboard-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: var(--space-xl);
}
@media (max-width: 720px) {
.chatadm-grid,
.dashboard-grid { grid-template-columns: 1fr; }
}