/* Reset + globalne */
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; }
body {
    font-family: var(--font-sans);
    font-size: var(--fs-16);
    line-height: var(--lh-body);
    color: var(--c-text);
    background: var(--c-bg);
}
:focus-visible { outline: none; box-shadow: var(--focus); border-radius: var(--radius-sm); }
.sr-only {
    position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* Szkielet */
:root { --header-h: 60px; }
.app-shell { display: flex; flex-direction: column; min-height: 100%; }
/* Powłoka czatu/analizy: strona nie scrolluje — wysokość ekranu, scrollują kolumny w środku. */
.app-shell:has(.app-main-flush) { height: 100dvh; }
/* Nagłówek spójny z landingiem (ten sam ciemny pasek, gradientowy znak, marka display) —
   jeden wygląd na landing/czacie/analizie/o-systemie/koncie. */
.app-header {
    display: flex; align-items: center; gap: var(--s-6); flex-shrink: 0;
    min-height: var(--header-h); padding: 0 var(--s-8);
    background: #171B24; border-bottom: 1px solid rgb(199 208 236 / .12);
}
.app-brand { display: flex; align-items: center; gap: 6px; text-decoration: none; color: var(--sl-on-dark); }
.app-title { font-family: var(--sl-font-base); letter-spacing: -0.01em; font-size: var(--fs-20); line-height: 1; }
.app-title .omnia { font-weight: 700; }
.app-title .si { font-weight: 400; color: var(--sl-on-dark-accent); }
.app-logo-mark { width: 30px; height: 30px; flex: none; display: block; }
.app-header a:focus-visible { outline: 2px solid var(--sl-on-dark-accent); outline-offset: 2px; box-shadow: none; }
.app-tag {
    font-size: var(--fs-12); color: var(--c-text-muted);
    background: var(--c-accent-weak); padding: 1px var(--s-2); border-radius: 999px;
}
.app-main { flex: 1; display: flex; justify-content: center; padding: var(--s-6) var(--s-4); }

/* Hamburger (mobile): <details> bez JS — CSP nie dopuszcza skryptów inline, a /konto i landing
   to czysty HTML. Na desktopie ukryty; na wąskim ekranie zastępuje listę linków. */
.nav-burger { display: none; position: relative; margin-left: auto; }
.nav-burger > summary {
    list-style: none; cursor: pointer; user-select: none;
    color: #9BA3B7; font-size: var(--fs-20); line-height: 1;
    padding: var(--s-2) var(--s-3); border-radius: var(--sl-radius-md);
}
.nav-burger > summary::-webkit-details-marker { display: none; }
.nav-burger[open] > summary { color: var(--sl-on-dark); background: rgb(199 208 236 / .12); }
.nav-sheet {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 200; min-width: 220px;
    display: flex; flex-direction: column; gap: var(--s-1); padding: var(--s-2);
    background: #171B24; border: 1px solid rgb(199 208 236 / .18);
    border-radius: var(--sl-radius-lg); box-shadow: var(--sl-shadow-lg);
}
.nav-sheet a { color: #9BA3B7; text-decoration: none; font-size: var(--fs-15); font-weight: 500;
    padding: var(--s-2) var(--s-3); border-radius: var(--sl-radius-md); white-space: nowrap; }
.nav-sheet a:hover { color: var(--sl-on-dark); background: rgb(199 208 236 / .1); }
.nav-sheet a.active { color: var(--sl-on-dark); font-weight: 600; }
.nav-sheet .app-who { padding: var(--s-2) var(--s-3); }

@media (max-width: 720px) {
    .app-header { gap: var(--s-4); padding: 0 var(--s-4); }
    .app-nav { display: none; }
    .nav-burger { display: block; }
}

/* Czat */
.chat { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: var(--s-4); }
.chat-log { display: flex; flex-direction: column; gap: var(--s-4); }
.empty { text-align: center; color: var(--c-text-muted); padding: var(--s-12) var(--s-4); }
.empty-title { font-size: var(--fs-18); font-weight: 600; color: var(--c-text); margin: 0 0 var(--s-2); }
.empty-hint { margin: 0; }

.msg { padding: var(--s-3) var(--s-4); border-radius: var(--sl-radius-xl); }
.msg-user { align-self: flex-end; max-width: 85%; background: var(--sl-gradient); color: var(--sl-text-inverse);
    box-shadow: 0 4px 12px -2px rgb(37 99 235 / 0.25); }
.msg-assistant { background: var(--sl-surface); border: none; box-shadow: var(--sl-shadow-card); }
.answer > :first-child { margin-top: 0; } .answer > :last-child { margin-bottom: 0; }
.answer :is(h1,h2,h3) { font-size: var(--fs-18); }
.answer pre { background: var(--c-bg); padding: var(--s-2); border-radius: var(--radius-sm); overflow-x: auto; }
.typing { color: var(--c-text-muted); }

/* Pasek etapu pracy (Zadanie 2/3 planu ROU): odpowiedź trwa dziesiątki sekund, a jedynym sygnałem
   było „…" na przycisku. Etykieta + liczba + licznik sekund = dowód, że system pracuje. */
.work-stage {
    display: inline-flex; align-items: center; gap: var(--s-2); align-self: flex-start;
    font-size: var(--fs-13); color: var(--sl-text-secondary);
    padding: var(--s-2) var(--s-4); margin: var(--s-2) 0;
    background: var(--sl-bg-secondary);
    border-radius: var(--sl-radius-full);
}
.work-stage-label { flex: 1 1 auto; }
.work-stage-count, .work-stage-time {
    font-variant-numeric: tabular-nums; /* licznik nie skacze przy zmianie cyfr */
    flex: 0 0 auto; opacity: .75;
}
.work-stage-count::before { content: "≈ "; }
/* Spinner = znak marki, nie generyczny obrócony pierścień (decyzja 2026-09-01: marka robi coś
   prawdziwego w momencie, gdy system faktycznie myśli, zamiast być czystą dekoracją logo). Dwa
   niezależne, spokojne ruchy: pierścień się obraca, węzeł pulsuje — nie stroboskop. */
.work-spinner { flex: 0 0 auto; width: 1.1rem; height: 1.1rem; overflow: visible; }
.work-spinner-ring {
    transform-origin: 50px 50px;
    animation: work-spin 3.2s linear infinite;
}
.work-spinner-node {
    transform-origin: 50px 18px;
    animation: work-node-pulse 1.6s ease-in-out infinite;
}
@keyframes work-spin { to { transform: rotate(360deg); } }
@keyframes work-node-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .55; transform: scale(1.25); } }
@media (prefers-reduced-motion: reduce) {
    .work-spinner-ring, .work-spinner-node { animation: none; }
}

/* Klikalne cytowania [n] → karta źródła (cite.js otwiera panel, scrolluje i podświetla) */
.answer a.cite {
    color: var(--c-accent); font-weight: 700; text-decoration: none;
    padding: 0 2px; border-radius: var(--radius-sm);
}
.answer a.cite:hover, .answer a.cite:focus-visible { background: var(--c-accent); color: #fff; }
@keyframes cite-flash { from { outline-color: var(--c-accent); background: var(--c-warn-weak); } to { outline-color: transparent; } }
.source-card.cite-flash { outline: 2px solid transparent; animation: cite-flash 1.6s ease-out; }

/* Załącznik PDF (DOC-5) */
.chat-attach { display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap; font-size: var(--fs-14); }
.attach-btn { cursor: pointer; color: var(--c-text-muted); }
.attach-btn input[type=file] { display: none; }
.attach-btn:hover { color: var(--c-accent); }
.attach-chip {
    display: inline-flex; align-items: center; gap: var(--s-1);
    background: var(--c-bg); border: 1px solid var(--c-border); border-radius: 999px;
    padding: 2px var(--s-3); font-size: var(--fs-12);
}
.attach-remove { border: none; background: none; cursor: pointer; color: var(--c-text-muted); }
.attach-remove:hover { color: var(--c-danger); }
.attach-notice { color: var(--c-warn); font-size: var(--fs-12); }

/* Baner „do weryfikacji" + badge cytatów */
.verify-banner {
    margin-top: var(--s-3); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
    background: var(--c-warn-weak); color: var(--c-warn); font-size: var(--fs-14);
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
}
/* Odpowiedź BEZ retrievalu (router: to nie pytanie prawne). Mocniejszy kontur niż zwykły baner —
   to jedyna odpowiedź w systemie nieoparta na źródłach, więc nie może wyglądać jak reszta. */
.verify-banner.no-retrieval { border: 1px dashed var(--c-warn); font-weight: 600; }

/* Grupowanie źródeł po dokumencie (plan SAS) — przy rozszerzeniu sąsiedztwa aktu źródeł bywa
   kilkadziesiąt, więc płaska lista przestaje być czytelna. */
.source-group-head {
    display: flex; align-items: center; gap: var(--s-2); flex-wrap: wrap;
    margin: var(--s-3) 0 var(--s-1); padding-bottom: var(--s-1);
    border-bottom: 1px solid var(--c-border);
    font-size: var(--fs-13);
}
.source-group-title { font-weight: 600; color: var(--c-text); }
.source-group-count { color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* Artykuł dociągnięty sąsiedztwem — nie był trafieniem wyszukiwania, tylko kontekstem obok niego. */
.source-card.source-neighbour { opacity: .82; border-left-style: dashed; }
.source-neighbour-tag {
    font-size: var(--fs-12); color: var(--c-text-muted);
    border: 1px dashed var(--c-border); border-radius: 999px; padding: 0 var(--s-2);
}

/* Druga runda retrievalu (pętla domykająca lukę) — informacja, nie ostrzeżenie. Na żywo niesie
   spinner („szukam dalej…"), po zakończeniu zostaje jako notka w czasie przeszłym. */
.retry-note {
    display: flex; align-items: flex-start; gap: var(--s-2);
    margin-top: var(--s-2); padding: var(--s-2) var(--s-3); border-radius: var(--radius-sm);
    background: var(--c-surface); border-left: 3px solid var(--c-border);
    font-size: var(--fs-13); color: var(--c-text-muted);
}
.retry-note .work-spinner { margin-top: 3px; }
.retry-note em { color: var(--c-text); font-style: normal; font-weight: 600; }

.badge { font-size: var(--fs-12); padding: 1px var(--s-2); border-radius: 999px; font-weight: 600; }
.badge-ok { background: var(--c-ok-weak); color: var(--c-ok); }
.badge-danger { background: var(--c-danger-weak); color: var(--c-danger); }
.badge-warn { background: var(--c-warn-weak); color: var(--c-warn); }

/* Banery stanu */
.banner { padding: var(--s-3) var(--s-4); border-radius: var(--radius-sm); font-size: var(--fs-14); }
.banner-warn { background: var(--c-warn-weak); color: var(--c-warn); }
.banner-info { background: var(--c-surface-2, #f3f4f6); color: var(--c-text-2, inherit); }
.banner-info > summary { cursor: pointer; }
/* US-3.9: link do zakupu w komunikacie wyczerpanego limitu planu — miejsce konwersji. */
.notice-upgrade { display: inline-block; margin-left: var(--s-2); font-weight: 700; color: var(--sl-accent); text-decoration: none; white-space: nowrap; }
.notice-upgrade:hover { text-decoration: underline; }
.banner-danger { background: var(--c-danger-weak); color: var(--c-danger); }

/* Panel źródeł */
.sources { margin-top: var(--s-3); border-top: 1px solid var(--c-border); padding-top: var(--s-3); }
.sources summary { cursor: pointer; font-weight: 600; font-size: var(--fs-14); color: var(--c-text-muted); }
.source-card { margin-top: var(--s-3); padding: var(--s-3) var(--s-4); background: var(--sl-surface);
    border: 1px solid var(--sl-border); border-left: 3px solid var(--sl-accent); border-radius: var(--sl-radius-lg); }
.source-head { display: flex; align-items: baseline; gap: var(--s-2); flex-wrap: wrap; }
.source-n { color: var(--c-accent); font-weight: 700; }
.source-label { font-weight: 600; font-size: var(--fs-14); }
.source-link { margin-left: auto; font-size: var(--fs-12); color: var(--c-accent); }
.source-snippet {
    margin: var(--s-2) 0 0; padding-left: var(--s-3); border-left: 3px solid var(--c-border);
    color: var(--c-text-muted); font-size: var(--fs-14); white-space: pre-wrap;
}

/* Wejście */
.pii-warn { margin: var(--s-2) 0; }
.chat-input { display: flex; gap: var(--s-2); position: sticky; bottom: 0; }
.chat-input textarea {
    flex: 1; resize: vertical; font: inherit; padding: var(--s-3) var(--s-4);
    border: 1.5px solid var(--sl-border); border-radius: var(--sl-radius-xl); background: var(--sl-surface);
    box-shadow: var(--sl-shadow-md);
}
.chat-input textarea:focus-visible { outline: none; border-color: var(--sl-accent); box-shadow: var(--sl-focus-ring), var(--sl-shadow-md); }
.btn { font: inherit; font-weight: 700; min-height: 44px; padding: var(--s-2) var(--s-5); border-radius: var(--sl-radius-lg);
    border: 1px solid transparent; cursor: pointer; transition: filter var(--sl-transition-fast), transform var(--sl-transition-fast); }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--sl-gradient); color: var(--sl-text-inverse); box-shadow: var(--sl-shadow-accent); }
.btn-primary:hover:not(:disabled) { filter: brightness(1.07); }
.btn-primary:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }

/* Feedback */
.feedback { display: flex; align-items: center; gap: var(--s-2); margin-top: var(--s-3);
    font-size: var(--fs-14); color: var(--c-text-muted); flex-wrap: wrap; }
.feedback-label { font-weight: 600; }
.btn-ghost { font: inherit; font-size: var(--fs-14); background: transparent; border: 1px solid var(--c-border);
    border-radius: 999px; padding: 1px var(--s-3); cursor: pointer; color: var(--c-text); }
.btn-ghost:hover { background: var(--c-accent-weak); border-color: var(--c-accent); }
.feedback-thanks { color: var(--c-ok); }

/* Historia rozmów (sidebar) */
.chat-layout { width: 100%; max-width: 1100px; display: flex; gap: var(--s-6); align-items: flex-start; }
.chat-sidebar {
    width: 240px; flex-shrink: 0; display: flex; flex-direction: column; gap: var(--s-2);
    position: sticky; top: var(--s-6); max-height: calc(100vh - 8rem);
}
.btn-new-chat {
    padding: var(--s-2) var(--s-3); border: 1px solid var(--c-border); border-radius: var(--radius);
    background: var(--c-surface); cursor: pointer; font-size: var(--fs-14); text-align: left;
}
.btn-new-chat:hover:not(:disabled) { background: var(--c-accent-weak); }
.conv-list { display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.conv-item {
    display: flex; flex-direction: column; gap: 1px; padding: var(--s-2) var(--s-3);
    border: 0; border-radius: var(--radius-sm); background: transparent; cursor: pointer; text-align: left;
}
.conv-item:hover:not(:disabled) { background: var(--sl-bg-tertiary); }
.conv-item.active { background: var(--sl-surface); font-weight: 600; box-shadow: var(--sl-shadow-xs); }
.conv-title {
    font-size: var(--fs-14); color: var(--c-text);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 200px;
}
.conv-date { font-size: var(--fs-12); color: var(--c-text-muted); }
.btn-sidebar-toggle { display: none; }
.sidebar-backdrop { display: none; }

@media (max-width: 900px) {
    .app-main { flex-direction: column; align-items: center; justify-content: flex-start; }
    .btn-sidebar-toggle {
        display: block; align-self: flex-start; margin: 0 0 var(--s-3); padding: var(--s-2) var(--s-3);
        border: 1px solid var(--c-border); border-radius: var(--radius); background: var(--c-surface);
        cursor: pointer; font-size: var(--fs-14);
    }
    .chat-sidebar {
        position: fixed; top: 0; left: 0; height: 100vh; width: min(80vw, 300px);
        background: var(--c-surface); box-shadow: var(--shadow); z-index: 50;
        padding: var(--s-4); transform: translateX(-100%); transition: transform .2s ease;
        max-height: none;
    }
    .chat-sidebar.open { transform: translateX(0); }
    .sidebar-backdrop {
        display: block; position: fixed; inset: 0; background: rgba(20, 25, 40, .4); z-index: 40;
    }
}

/* Nawigacja w nagłówku + strona „O systemie" */
/* Nawigacja: flex z odstępami (bez tego linki nachodziły na siebie) + zawijanie na wąskich ekranach. */
.app-nav { margin-left: auto; display: flex; align-items: center; gap: var(--s-5); }
.app-nav a { color: #9BA3B7; font-size: var(--fs-15); font-weight: 500; text-decoration: none; white-space: nowrap; transition: color var(--sl-transition-fast); }
.app-nav a:hover { color: var(--sl-on-dark); }
.app-nav a.active { color: var(--sl-on-dark); font-weight: 600; }
/* O systemie — przebudowa 2026-09-01 w stylistyce sekcji landingu:
   eyebrow + display h1 w hero, siatka kart bento z kickerami, ciemna karta USP (odmowa). */
.about { width: 100%; max-width: 960px; line-height: 1.65; }
.about-hero { text-align: center; padding: var(--s-8) 0 var(--s-10); }
.about-eyebrow {
    display: inline-flex; align-items: center; gap: 10px; padding: 6px 16px;
    border-radius: var(--sl-radius-full); border: 1px solid rgb(37 99 235 / .25);
    background: var(--sl-accent-light); color: var(--sl-accent);
    font-size: var(--fs-13); font-weight: 600;
}
.about-eyebrow i { width: 7px; height: 7px; border-radius: var(--sl-radius-full); background: var(--sl-accent); }
.about-hero h1 {
    font-family: var(--sl-font-display); font-size: clamp(1.9rem, 4.5vw, 2.9rem);
    line-height: 1.15; letter-spacing: -0.015em; margin: var(--s-5) auto 0; max-width: 22ch;
}
.about-lead { font-size: var(--fs-16); color: var(--sl-text-secondary); max-width: 62ch; margin: var(--s-4) auto 0; }
.about-grid { display: grid; gap: var(--s-5); grid-template-columns: 1fr; }
@media (min-width: 900px) {
    .about-grid { grid-template-columns: 1fr 1fr; }
    .about-card-wide { grid-column: span 2; }
}
.about-card {
    background: var(--sl-surface); border-radius: var(--sl-radius-xl); box-shadow: var(--sl-shadow-card);
    padding: var(--s-6) var(--s-8); display: flex; flex-direction: column; gap: var(--s-3);
}
.about-k {
    font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    color: var(--sl-accent);
}
.about-card h2 { font-family: var(--sl-font-display); font-size: var(--fs-24); line-height: 1.25; letter-spacing: -0.01em; margin: 0; }
.about-card ul { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: var(--s-3); }
.about-card li { padding-left: 1.5rem; position: relative; font-size: var(--fs-15); color: var(--sl-text-secondary); }
.about-card li strong { color: var(--sl-text-primary); }
.about-checks li::before { content: "\2713"; position: absolute; left: 0; color: var(--sl-success); font-weight: 700; }
.about-limits li::before { content: "\2013"; position: absolute; left: 0; color: var(--sl-text-tertiary); font-weight: 700; }
.about-card-dark { background: var(--sl-hero-gradient); color: var(--sl-on-dark); box-shadow: var(--sl-shadow-lg); }
.about-card-dark p { margin: 0; color: var(--sl-on-dark-soft); font-size: var(--fs-15); }
.about-card-dark em { color: var(--sl-on-dark); font-style: italic; }
.about-k-dark { color: var(--sl-on-dark-accent); }
.about-cta-row { text-align: center; margin: var(--s-8) 0 var(--s-4); }
.about-cta { display: inline-block; text-decoration: none; padding: var(--s-3) var(--s-6); font-weight: 700; border-radius: var(--sl-radius-lg); }
@media (max-width: 640px) { .about-card { padding: var(--s-4) var(--s-5); } .about-hero { padding: var(--s-5) 0 var(--s-6); } }

/* Diagnostyka: badge tokenów in/out (widoczny tylko z flagą Diagnostics:ShowTokenUsage) */
.badge-tokens { background: var(--c-accent-weak); color: var(--c-text-muted); font-variant-numeric: tabular-nums; }

/* Analiza dokumentów (spike SPK): strona /analiza — raport per jednostka + dopytania */
.analysis { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: var(--s-3); }
.analysis-setup { display: flex; flex-direction: column; gap: var(--s-3); }
.analysis-head {
    display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-3);
    flex-wrap: wrap; padding-bottom: var(--s-2); border-bottom: 1px solid var(--c-border);
}
.analysis-id { font-size: var(--fs-12); color: var(--c-text-muted); }
.analysis-summary { max-width: none; }
.analysis-unit {
    background: var(--c-surface); border: 1px solid var(--c-border); border-radius: var(--radius);
    padding: var(--s-3) var(--s-4);
}
.analysis-unit > summary {
    cursor: pointer; display: flex; align-items: center; gap: var(--s-3); font-size: var(--fs-14);
}
.analysis-followup { margin-top: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3); }

/* Rozumowanie modelu (thinking/CoT) — rozwijana sekcja jak źródła, wizualnie stonowana (pomocnicze) */
.reasoning summary { color: var(--c-text-muted); }
.reasoning-body {
    white-space: pre-wrap; font-size: var(--fs-13); color: var(--c-text-muted);
    background: var(--c-surface); border-left: 3px solid var(--c-border);
    padding: var(--s-2) var(--s-3); margin: var(--s-2) 0; max-height: 22rem; overflow-y: auto;
}

/* Podstawy prawne orzeczenia — chipy na karcie źródła (konkretna informacja bez czytania uzasadnienia) */
.legal-bases { display: flex; flex-wrap: wrap; gap: var(--s-1); align-items: baseline; margin: var(--s-1) 0; }
.legal-bases-label { font-size: var(--fs-12); color: var(--c-text-muted); }
.legal-basis-chip {
    font-size: var(--fs-12); background: var(--c-accent-weak); color: var(--c-text);
    border-radius: var(--radius); padding: .05rem .4rem;
}

/* Wyszukiwarka (retrieval-only) — lista wyników pogrupowana po dokumencie */
.search { width: 100%; max-width: 860px; display: flex; flex-direction: column; gap: var(--s-3); }
.search-intro { display: flex; flex-direction: column; gap: var(--s-1); }
.search-count { font-size: var(--fs-13); color: var(--c-text-muted); margin: 0; }
.search-hit { margin: 0; }

/* Podstawa prawna — sekcja zwijana (domyślnie zwinięta, żeby nie zaciemniać karty) */
.legal-bases-details { margin: var(--s-2) 0 0; font-size: var(--fs-13); }
.legal-bases-details > summary { cursor: pointer; color: var(--c-text-muted); }

/* Wynik wyszukiwarki: klikalny tytuł + „Otwórz dokument" */
.search-hit-title { font-weight: 600; color: var(--c-accent); text-decoration: none; }
.search-hit-title:hover { text-decoration: underline; }
.search-hit-open { display: inline-block; margin-top: var(--s-2); font-size: var(--fs-13); color: var(--c-accent); text-decoration: none; }
.search-hit-open:hover { text-decoration: underline; }

/* Widok pełnego dokumentu (/dokument/{id}) */
/* Podgląd dokumentu — retusz RED-4.4: tytuł display, metadane jako chipy, powrót jak przycisk ghost. */
.docview { width: 100%; max-width: 820px; display: flex; flex-direction: column; gap: var(--s-3); }
.doc-back {
    display: inline-flex; align-items: center; gap: var(--s-1); align-self: flex-start;
    font-size: var(--fs-14); color: var(--sl-text-secondary); text-decoration: none;
    padding: var(--s-1) var(--s-3); border-radius: var(--sl-radius-full);
    transition: color var(--sl-transition-fast), background var(--sl-transition-fast);
}
.doc-back:hover { color: var(--sl-accent); background: var(--sl-accent-light); }
.docview-body { max-width: none; padding: var(--s-6) var(--s-8); }
.docview-title { font-family: var(--sl-font-display); font-size: var(--fs-24); letter-spacing: -0.01em; line-height: 1.25; margin: 0 0 var(--s-3); }
.docview-meta { display: flex; align-items: center; flex-wrap: wrap; gap: var(--s-2); font-size: var(--fs-13); color: var(--sl-text-secondary); margin-bottom: var(--s-4); }
.docview-meta > span {
    display: inline-flex; align-items: center; padding: 2px var(--s-3);
    border-radius: var(--sl-radius-full); background: var(--sl-bg-secondary);
}
.docview-section { font-family: var(--sl-font-display); font-size: var(--fs-18); letter-spacing: -0.01em; margin: var(--s-5) 0 var(--s-1); }
@media (max-width: 640px) { .docview-body { padding: var(--s-4) var(--s-5); } }
.docview-text { white-space: pre-wrap; line-height: 1.6; }
.docview-note { margin-top: var(--s-4); }

/* Konta (E1): kto jest zalogowany, w menu obok odnośnika wylogowania. Skraca się na wąskim ekranie,
   żeby długi adres e-mail nie rozpychał paska. */
/* Chip konta w nagłówku: avatar z inicjałem + imię (bez gołego e-maila — pełna tożsamość w title). */
.app-who { display: inline-flex; align-items: center; gap: var(--s-2); text-decoration: none; color: #9BA3B7; }
.app-who-name {
    font-size: var(--fs-14); font-weight: 600; max-width: 10rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    transition: color var(--sl-transition-fast);
}
.app-avatar {
    width: 30px; height: 30px; border-radius: var(--sl-radius-full); flex-shrink: 0;
    background: rgb(199 208 236 / .15); color: var(--sl-on-dark-soft);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-12); font-weight: 700;
    transition: background var(--sl-transition-fast);
}
a.app-who:hover .app-who-name { color: var(--sl-on-dark); }
a.app-who:hover .app-avatar { background: rgb(199 208 236 / .28); }

/* ══════════ RED-2: powłoka aplikacji czatu/analizy (sidebar + treść + panel źródeł) ══════════ */
/* Strony z własnym sidebarem (MainLayout.IsAppShellPage) — globalny header NAD powłoką (spójna
   nawigacja), bez paddingu; wysokości = reszta ekranu pod headerem (flex), nie 100vh. */
.app-main-flush { padding: 0; display: block; min-height: 0; }
.app-main-flush .chat-layout {
    max-width: none; display: grid; gap: 0; align-items: stretch;
    grid-template-columns: 260px minmax(0, 1fr) auto; /* auto: analiza nie ma panelu źródeł */
    height: 100%;
}
.app-main-flush .chat-sidebar {
    width: 260px; position: static; max-height: none; height: 100%; overflow-y: auto;
    background: var(--sl-bg-secondary); border-right: 1px solid var(--sl-border);
    padding: var(--s-4) var(--s-3); gap: var(--s-2);
}
.app-main-flush .chat,
.app-main-flush .analysis {
    height: 100%; overflow-y: auto; padding: var(--s-6) var(--s-10);
    max-width: none; display: flex; flex-direction: column; gap: var(--s-4);
}
.app-main-flush .chat > *, .app-main-flush .analysis > * { width: 100%; max-width: 760px; margin-inline: auto; }
.app-main-flush .chat-input { background: var(--sl-bg); padding-bottom: var(--s-2); }

/* Przełącznik trybów w sidebarze (marka przeniesiona do globalnego headera, 2026-09-01) */
.side-tabs { display: flex; gap: var(--s-1); padding-bottom: var(--s-2); }
.side-tab {
    flex: 1 1 0; text-align: center; padding: 7px 0; border-radius: 10px;
    font-size: var(--fs-13); font-weight: 500; color: var(--sl-text-secondary); text-decoration: none;
}
.side-tab:hover { background: var(--sl-bg-tertiary); color: var(--sl-text-primary); }
.side-tab.active { font-weight: 700; color: var(--sl-accent); background: var(--sl-surface); box-shadow: var(--sl-shadow-xs); }

/* Stopka użytkownika w sidebarze — wejście do konta */
.side-user {
    margin-top: auto; display: flex; align-items: center; gap: var(--s-2);
    padding: var(--s-3) var(--s-2) var(--s-1); border-top: 1px solid var(--sl-border);
}
.side-avatar {
    width: 30px; height: 30px; border-radius: var(--sl-radius-full); background: var(--sl-bg-tertiary);
    display: inline-flex; align-items: center; justify-content: center;
    font-size: var(--fs-12); font-weight: 700; color: var(--sl-text-secondary); flex-shrink: 0;
}
.side-user-meta { display: flex; flex-direction: column; min-width: 0; }
.side-user-name { font-size: var(--fs-13); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-user-plan { font-size: var(--fs-12); color: var(--sl-text-tertiary); }
.side-user-usage { font-size: var(--fs-12); color: var(--sl-text-tertiary); font-variant-numeric: tabular-nums; }
.side-user-link { margin-left: auto; color: var(--sl-text-tertiary); text-decoration: none; font-size: var(--fs-18); padding: 0 var(--s-2); }
.side-user-link:hover { color: var(--sl-accent); }

/* Stan pusty czatu */
.empty .empty-title { font-family: var(--sl-font-display); font-size: var(--fs-30); letter-spacing: -0.01em; }
.empty-examples { display: flex; gap: var(--s-3); flex-wrap: wrap; justify-content: center; margin: var(--s-4) 0; }
.example-chip {
    font: inherit; font-size: var(--fs-14); color: var(--sl-text-primary); cursor: pointer;
    padding: var(--s-2) var(--s-4); border-radius: var(--sl-radius-full);
    background: var(--sl-surface); border: 1px solid var(--sl-border); box-shadow: var(--sl-shadow-xs);
}
.example-chip:hover:not(:disabled) { border-color: var(--sl-accent); color: var(--sl-accent); }

/* Kotwica „Źródła (n)" pod odpowiedzią — przełącza panel */
.src-anchor {
    font: inherit; font-size: var(--fs-13); font-weight: 600; cursor: pointer;
    display: inline-flex; align-items: center; gap: var(--s-2);
    margin-top: var(--s-3); padding: var(--s-1) var(--s-3);
    border: 1px solid var(--sl-border); border-radius: var(--sl-radius-full);
    background: transparent; color: var(--sl-text-secondary);
}
.src-anchor:hover { border-color: var(--sl-accent); color: var(--sl-accent); }
.src-anchor.active { color: var(--sl-accent); border-color: var(--sl-accent); background: var(--sl-accent-light); }

/* Panel źródeł (kontekstowy — jedna tura naraz) */
.src-panel {
    width: 380px; height: 100%; overflow-y: auto;
    background: var(--sl-surface); border-left: 1px solid var(--sl-border);
    display: flex; flex-direction: column;
}
.src-panel-head { padding: var(--s-5) var(--s-6) var(--s-3); border-bottom: 1px solid var(--sl-border); }
.src-panel-title { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-16); font-weight: 700; }
.src-count {
    display: inline-flex; align-items: center; padding: 2px 9px; border-radius: var(--sl-radius-full);
    background: var(--sl-accent-light); color: var(--sl-accent); font-size: var(--fs-12); font-weight: 700;
}
.src-close { display: none; margin-left: auto; border: 0; background: none; cursor: pointer; font-size: var(--fs-14); color: var(--sl-text-tertiary); }
.src-panel-context { font-size: var(--fs-12); color: var(--sl-text-tertiary); margin-top: var(--s-1); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.src-panel-body { padding: var(--s-4) var(--s-5); }
.src-panel-body .source-card:first-child { margin-top: 0; }
.src-panel-empty { padding: var(--s-6) var(--s-5); font-size: var(--fs-14); color: var(--sl-text-tertiary); line-height: 1.6; }
.src-section-head { font-size: var(--fs-12); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sl-text-tertiary); margin-bottom: var(--s-2); }
.src-backdrop { display: none; }
.chat-disclaimer { text-align: center; font-size: var(--fs-12); color: var(--sl-text-tertiary); margin: var(--s-1) 0 0; }

/* Wąski ekran: panel źródeł = wysuwany arkusz otwierany kotwicą (te same karty, zero utraty) */
@media (max-width: 1199px) {
    .app-main-flush .chat-layout { grid-template-columns: 260px minmax(0, 1fr); }
    .src-panel {
        position: fixed; top: 0; right: 0; z-index: 60; width: min(92vw, 400px); height: 100dvh;
        box-shadow: var(--sl-shadow-lg); transform: translateX(100%); transition: transform .2s ease;
    }
    .src-panel.open { transform: translateX(0); }
    .src-close { display: inline-block; }
    .src-backdrop { display: block; position: fixed; inset: 0; background: rgb(20 36 80 / 0.35); z-index: 55; }
}
@media (max-width: 900px) {
    .app-main-flush .chat-layout { grid-template-columns: minmax(0, 1fr); }
    .app-main-flush .chat, .app-main-flush .analysis { padding: var(--s-4); height: 100%; }
    .app-main-flush .btn-sidebar-toggle { position: fixed; top: calc(var(--header-h) + var(--s-3)); left: var(--s-3); z-index: 30; }
    /* Sidebar = wysuwana szuflada także na powłoce czatu/analizy. Bez tego override'u wygrywała
       desktopowa reguła `.app-main-flush .chat-sidebar { position: static }` (wyższa specyficzność
       niż `.chat-sidebar` w media query) i sidebar zostawał w siatce, zajmując pół ekranu. */
    .app-main-flush .chat-sidebar {
        position: fixed; top: 0; left: 0; height: 100dvh; width: min(80vw, 300px);
        background: var(--c-surface); border-right: 0; box-shadow: var(--shadow); z-index: 50;
        padding: var(--s-4); transform: translateX(-100%); transition: transform .2s ease;
    }
    .app-main-flush .chat-sidebar.open { transform: translateX(0); }
}

/* RED-5.2: ekran zerwanego połączenia Blazora — zamiast surowego szarego modala frameworka. */
#components-reconnect-modal {
    position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center;
    background: rgb(20 36 80 / 0.45); font-family: var(--sl-font-base);
}
#components-reconnect-modal > div, .components-reconnect-dialog {
    background: var(--sl-surface); border-radius: var(--sl-radius-xl); box-shadow: var(--sl-shadow-lg);
    padding: var(--s-8); max-width: 24rem; text-align: center; font-size: var(--fs-14); color: var(--sl-text-secondary);
}

/* Przeklikanie 2026-08-31: zwijany panel źródeł + statusy rozmów w historii */
.src-panel.collapsed { display: none; }
.src-rail {
    position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 20;
    display: flex; flex-direction: column; align-items: center; gap: var(--s-1);
    font: inherit; font-size: var(--fs-12); font-weight: 700; color: var(--sl-accent); cursor: pointer;
    padding: var(--s-3) var(--s-1); border: 1px solid var(--sl-border); border-right: 0;
    border-radius: var(--sl-radius-lg) 0 0 var(--sl-radius-lg);
    background: var(--sl-surface); box-shadow: var(--sl-shadow-md);
}
.src-rail-label { writing-mode: vertical-rl; letter-spacing: .08em; }
.src-rail:hover { background: var(--sl-accent-light); }
@media (max-width: 1199px) { .src-rail { display: none; } .src-panel.collapsed { display: flex; } }

.conv-spinner {
    display: inline-block; width: .7rem; height: .7rem; border-radius: 50%; vertical-align: -1px;
    border: 2px solid var(--sl-border); border-top-color: var(--sl-accent);
    animation: work-spin 900ms linear infinite; margin-right: var(--s-1);
}
.conv-done { color: var(--sl-success); font-weight: 700; margin-right: var(--s-1); }
.conv-item:disabled { cursor: not-allowed; opacity: .75; }

/* Analiza dokumentów (AJ-5): akcjonowalne RYZYKO i nota „poza zakresem" */
.unit-actions { display: grid; grid-template-columns: max-content 1fr; gap: var(--s-1) var(--s-3); margin: var(--s-2) 0; font-size: var(--fs-14); }
.unit-actions dt { font-weight: 600; color: var(--c-danger); }
.unit-actions dd { margin: 0; }
.unit-note { font-size: var(--fs-14); color: var(--c-text-muted); margin: var(--s-2) 0; }

/* Analiza (AJ-6): naglowek mechaniczny nad streszczeniem */
.analysis-headline { margin: var(--s-3) 0 var(--s-2); font-size: var(--fs-16); }

/* Analiza (AJ-12): druk / zapis do PDF — tylko raport, bez nawigacji i formularzy */
.analysis-export { display: inline-flex; gap: var(--s-2); }
/* Awaryjne pole „skopiuj ręcznie" — pokazywane, gdy przeglądarka nie daje schowka (strona po http). */
.analysis-export-fallback { margin: var(--s-2) 0; }
.analysis-export-fallback > summary { font-size: var(--fs-14); color: var(--c-text-muted); cursor: pointer; }
.analysis-export-fallback textarea {
  width: 100%; box-sizing: border-box; margin: var(--s-2) 0; font-family: ui-monospace, monospace;
  font-size: var(--fs-13); border: 1px solid var(--c-border); border-radius: 6px; padding: var(--s-2);
}
@media print {
  .app-header, .chat-sidebar, .sidebar-backdrop, .analysis-export, .analysis-export-fallback, .analysis-id,
  .chat-input, .feedback, .btn-ghost, progress, details.analysis-unit summary::marker { display: none !important; }
  /* .chat-layout MUSI stracić siatkę. Ukrycie sidebara przez display:none zabiera go jako ELEMENT,
     ale ścieżki `260px minmax(0,1fr) auto` zostają — .analysis awansuje na pierwszy element i wpada
     w kolumnę 260px, przez co raport drukował się w wąskim pasku przy lewej krawędzi kartki. */
  .analysis, .app-shell, .app-main, .chat-layout { display: block !important; max-width: none !important; }
  .chat-layout { grid-template-columns: none !important; }
  /* Wysokości z powłoki (100dvh / height:100%) + overflow-y:auto robią z raportu kontener
     przewijany, a druk tnie taki kontener do jednego ekranu — na papierze musi płynąć całość. */
  .app-shell, .app-main, .chat-layout, .analysis, .chat {
    height: auto !important; min-height: 0 !important; overflow: visible !important;
  }
  .analysis > * { max-width: none !important; }
  details.analysis-unit { break-inside: avoid; border: 1px solid #ccc; border-radius: 4px; padding: 6px 10px; margin: 0 0 8px; }
  details.analysis-unit > summary { list-style: none; font-weight: 600; }
  .source-card { break-inside: avoid; }
  /* Źródła na papierze: same nagłówki (numer, tytuł aktu/orzeczenia, link), bez cytowanej treści.
     Zawężone do .sources CELOWO — ta sama klasa niesie treść analizowanego paragrafu
     (Analiza.razor, blok z Truncate(unit.Text)), a tej z raportu wycinać nie wolno. */
  .sources .source-snippet { display: none !important; }
  /* Trójkąt rozwijania jest na papierze bez sensu — nie ma czego kliknąć. Znika przez list-style,
     nie przez ::marker (tak samo jak sąsiednia reguła dla details.analysis-unit > summary). */
  details.sources > summary { list-style: none; }
  /* Karty źródeł, na które fragment się nie powołuje (klasa nadawana w beforeprint). */
  .source-card.print-skip { display: none !important; }
  /* Tylko linki zewnętrzne dopisują adres. Kotwice cytowań (#src-…, #docsrc-…) prowadzą w obrębie
     tej samej strony, więc na papierze dawały wyłącznie szum w rodzaju „[1] (#src-au01a068-2-1)". */
  a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 10px; color: #555; }
}