/* SYSTEM-2 · TOPKEK HUD tokens (zgodnie z topkek-ui-design / reference-tokens) */

:root {
    --menu-surface-bg: rgba(0, 0, 0, 0.72);
    --menu-surface-border: rgba(76, 175, 80, 0.45);
    --menu-surface-radius: 2px;
    --menu-surface-shadow: 0 0 18px rgba(76, 175, 80, 0.18);
    --menu-label-color: rgba(200, 255, 200, 0.82);
    --menu-text-color: #81c784;
    --accent-primary: #4caf50;
    --accent-light: #81c784;
    --canvas-base: #111111;
    --accent-magenta: #e040fb;
    /* Stała wysokość paska SYSTEM (jeden wiersz: glyph · nazwa · log · metryki); bez zmiany przy .active */
    --system-strip-height: 4.75rem;
    /* Wspólne belki nagłówkowe kolumn (JEDNOSTKI · OŚ · RANKING) */
    --panel-header-min-height: 2.75rem;
    --panel-header-padding: 10px 16px;
    /* Easing jak wpisy list (oś / ranking) */
    --ui-motion-emphasis: cubic-bezier(0.22, 1, 0.36, 1);
    /* Wejście wpisu na OŚ ZBIORU — wyraźnie wolniejsze niż ranking / okna */
    --timeline-appear-duration: 1.4s;
    /* Subtelne barwy rozróżniające agentów (lekki tint tła). */
    --agent-chief-rgb: 255, 183, 77;
    --agent-menadzer-rgb: 224, 64, 251;
    --agent-oracle-rgb: 38, 198, 218;
    --agent-system-rgb: 76, 175, 80;
    --agent-katalog-rgb: 102, 187, 106;
    --agent-audytor-rgb: 206, 147, 216;
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    /*
     * Instalacja: czytelny feedback (oś / ranking / rozmiar okien) — krótkie, bez przewijania strony.
     * Wyższa specyficzność + !important niż selektor * — przywraca zamierzone motion.
     */
    .timeline-entry--appear {
        animation: timeline-entry-slide-in var(--timeline-appear-duration) var(--ui-motion-emphasis)
            forwards !important;
    }

    .ranking-row--appear {
        animation: ranking-row-appear 0.42s var(--ui-motion-emphasis) forwards !important;
    }

    .agent-window {
        transition:
            border-color 0.28s ease,
            box-shadow 0.32s ease,
            opacity 0.32s ease,
            max-height 0.48s var(--ui-motion-emphasis),
            min-height 0.48s var(--ui-motion-emphasis),
            padding 0.48s var(--ui-motion-emphasis),
            transform 0.44s var(--ui-motion-emphasis),
            filter 0.32s ease !important;
    }
}

* {
    box-sizing: border-box;
}

html,
body {
    margin: 0;
    height: 100%;
    background: var(--canvas-base);
    color: var(--accent-light);
    font-family: 'Courier New', Courier, monospace;
    overflow: hidden;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 100;
    background: linear-gradient(rgba(18, 16, 16, 0) 50%, rgba(0, 0, 0, 0.22) 50%),
        linear-gradient(90deg, rgba(255, 0, 0, 0.04), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.04));
    background-size: 100% 4px, 6px 100%;
}

#install-header {
    flex-shrink: 0;
    padding: 10px 16px;
    border-bottom: 1px solid var(--menu-surface-border);
    background: var(--menu-surface-bg);
    font-size: 0.7rem;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--menu-label-color);
}

#install-header strong {
    color: var(--accent-primary);
    font-weight: 700;
}

/* Jedna belka SYSTEM na pełną szerokość UI, pod nagłówkiem */
#system-strip {
    flex-shrink: 0;
    width: 100%;
    border-bottom: 1px solid var(--menu-surface-border);
    background: rgba(0, 12, 0, 0.55);
    padding: 6px 12px;
    box-sizing: border-box;
}

/* SYSTEM: stała wysokość — brak „skoku” przy .active; log max 3 linie */
#system-strip .agent-window {
    margin-bottom: 0;
    width: 100%;
    min-height: 0;
    max-height: none;
    height: var(--system-strip-height);
    padding: 6px 10px;
    flex-direction: column;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    transform: none;
    filter: none;
}

#system-strip .agent-window.active {
    height: var(--system-strip-height);
    min-height: 0;
    max-height: none;
    padding: 6px 10px;
    transform: none;
    filter: none;
}

.system-strip-layout {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    min-height: 0;
    flex: 1;
    width: 100%;
}

.system-strip-row {
    flex-shrink: 0;
    min-width: 0;
}

.system-strip-glyph {
    margin: 0;
    font-size: 0.52rem;
    line-height: 0.62rem;
    white-space: pre;
    color: #2e7d32;
    flex-shrink: 0;
}

#system-strip .agent-window.active .system-strip-glyph {
    color: var(--accent-magenta);
    text-shadow: 0 0 6px rgba(224, 64, 251, 0.35);
}

.system-strip-name {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
    flex-shrink: 0;
}

#system-strip .agent-window.active .system-strip-name {
    color: #fff;
}

.system-strip-metrics {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
    flex-wrap: nowrap;
    font-size: 0.62rem;
    letter-spacing: 0.06em;
    color: rgba(129, 199, 132, 0.75);
}

.system-metric .stat-value {
    margin-left: 4px;
}

.system-strip-row--log {
    display: flex;
    flex-direction: row;
    align-items: flex-end;
    gap: 4px;
    min-height: 0;
    min-width: 0;
    flex: 1 1 auto;
}

.log-container--system {
    flex: 1;
    min-height: 0;
    max-height: calc(0.76rem * 1.35 * 3);
    overflow-y: auto;
    font-size: 0.76rem;
    line-height: 1.35;
}

.log-container--system .log-line {
    margin-bottom: 2px;
}

.log-container--system .log-line:last-child {
    margin-bottom: 0;
}

.cursor--system {
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 2px;
}

#outer-wrap {
    display: flex;
    flex-direction: column;
    height: 100vh;
}

#main-container {
    display: flex;
    flex: 1;
    min-height: 0;
    width: 100%;
    overflow: hidden;
}

#agents-panel {
    width: 28%;
    min-width: 280px;
    max-width: 440px;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--menu-surface-border);
    background: var(--menu-surface-bg);
    box-shadow: var(--menu-surface-shadow);
}

#main-container .panel-header {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    flex-wrap: nowrap;
    gap: 10px;
    min-height: var(--panel-header-min-height);
    padding: var(--panel-header-padding);
    border-bottom: 1px solid var(--menu-surface-border);
}

#main-container .panel-header .panel-title {
    font-size: 0.72rem;
    line-height: 1.2;
    letter-spacing: 0.18em;
    min-width: 0;
}

#agents-panel .panel-header {
    justify-content: space-between;
}

#agents-panel .panel-title {
    flex: 1 1 auto;
    color: var(--accent-primary);
}

#agents-panel .panel-badge {
    font-size: 0.62rem;
    color: var(--accent-magenta);
    padding: 3px 8px;
    border: 1px solid var(--accent-magenta);
    border-radius: var(--menu-surface-radius);
}

#dashboard {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 8px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) #0a0a0a;
    display: flex;
    flex-direction: column;
}

#dashboard::-webkit-scrollbar {
    width: 8px;
}

#dashboard::-webkit-scrollbar-track {
    background: #0a0a0a;
    border-radius: 4px;
}

#dashboard::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary), #2e7d32);
    border-radius: 4px;
    border: 1px solid #111;
}

#dashboard::-webkit-scrollbar-thumb:hover {
    background: #66bb6a;
}

#timeline-panel {
    flex: 1;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    background: rgba(0, 0, 0, 0.5);
}

#map-panel {
    width: min(30%, 380px);
    min-width: 220px;
    max-width: 420px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--menu-surface-border);
    border-right: 1px solid var(--menu-surface-border);
    background: rgba(6, 10, 8, 0.85);
    box-shadow: inset 0 0 24px rgba(76, 175, 80, 0.06);
}

#map-panel .panel-header {
    background: rgba(0, 0, 0, 0.45);
}

#map-panel .panel-title {
    color: var(--accent-light);
    letter-spacing: 0.16em;
}

#map-container {
    flex: 1;
    min-height: 0;
    position: relative;
    overflow: hidden;
}

#telemetry-panel {
    flex-shrink: 0;
    border-bottom: 1px solid rgba(76, 175, 80, 0.35);
    background: rgba(0, 0, 0, 0.42);
    padding: 10px 12px 9px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.telemetry-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
}

.telemetry-col {
    border: 1px solid rgba(76, 175, 80, 0.22);
    background: rgba(9, 16, 10, 0.58);
    padding: 8px 9px;
}

.telemetry-col-title {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    color: rgba(200, 255, 200, 0.62);
    margin-bottom: 6px;
}

.telemetry-row {
    font-size: 0.6rem;
    letter-spacing: 0.06em;
    color: rgba(200, 255, 200, 0.78);
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
    margin-top: 3px;
}

.telemetry-row:first-of-type {
    margin-top: 0;
}

.telemetry-value {
    color: #f1fff1;
    font-weight: 700;
    text-align: right;
}

.telemetry-energy {
    border: 1px solid rgba(224, 64, 251, 0.26);
    background: rgba(17, 8, 20, 0.38);
    padding: 8px 9px;
}

.telemetry-value--energy {
    color: #f3d0ff;
}

#map-network {
    position: absolute;
    inset: 0;
    min-height: 160px;
}

.map-empty {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 12px;
    z-index: 1;
    pointer-events: none;
}

.map-empty .ascii-art {
    font-size: 0.58rem;
    line-height: 1.35;
    color: rgba(129, 199, 132, 0.42);
    margin: 0;
}

#map-panel.has-graph .map-empty {
    display: none;
}

#ranking-panel {
    width: min(30%, 380px);
    min-width: 240px;
    max-width: 440px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    min-height: 0;
    border-left: 1px solid var(--menu-surface-border);
    background: rgba(8, 12, 8, 0.72);
    box-shadow: -8px 0 24px rgba(0, 0, 0, 0.28);
}

#ranking-panel .panel-header {
    background: rgba(0, 0, 0, 0.45);
}

#ranking-panel .panel-title {
    color: var(--accent-magenta);
}

#ranking-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 10px 14px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-magenta) #0d0d0d;
}

#ranking-container::-webkit-scrollbar {
    width: 8px;
}

#ranking-container::-webkit-scrollbar-track {
    background: #0d0d0d;
}

#ranking-container::-webkit-scrollbar-thumb {
    background: var(--accent-magenta);
    border-radius: 4px;
    border: 1px solid #111;
}

#ranking-feed {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ranking-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 72px;
    color: rgba(224, 64, 251, 0.45);
    font-size: 0.65rem;
}

.ranking-empty .ascii-art {
    font-size: 0.62rem;
    line-height: 1.35;
    white-space: pre;
    text-align: center;
}

.ranking-row {
    background: var(--menu-surface-bg);
    border: 1px solid rgba(224, 64, 251, 0.28);
    border-radius: var(--menu-surface-radius);
    padding: 10px 12px;
    border-left: 3px solid var(--accent-magenta);
    cursor: pointer;
    text-align: left;
    transition: border-color 0.15s ease, background 0.15s ease;
}

@keyframes ranking-row-appear {
    from {
        opacity: 0;
        transform: translateX(14px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.ranking-row--appear {
    animation: ranking-row-appear 0.42s var(--ui-motion-emphasis) forwards;
}

.ranking-row:hover {
    border-color: rgba(224, 64, 251, 0.5);
    background: rgba(224, 64, 251, 0.06);
}

.ranking-row:focus-visible {
    outline: 1px solid var(--accent-magenta);
    outline-offset: 2px;
}

.ranking-row-head {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 6px 10px;
    margin-bottom: 8px;
}

.ranking-row-idx {
    font-size: 0.62rem;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
}

.ranking-row-idx strong {
    color: rgba(255, 255, 255, 0.88);
    font-weight: 700;
}

.ranking-score {
    font-size: 0.68rem;
    letter-spacing: 0.12em;
    color: rgba(200, 255, 200, 0.55);
    text-transform: uppercase;
}

.ranking-score strong {
    font-size: 1.15rem;
    color: #fff;
    margin-left: 4px;
}

.ranking-score-denom {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
    margin-left: 2px;
}

.ranking-score--high strong {
    color: #69f0ae;
}

.ranking-score--mid strong {
    color: #ffee58;
}

.ranking-score--low strong {
    color: #ff8a65;
}

.ranking-ts {
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.38);
    letter-spacing: 0.04em;
}

.ranking-prompt-label {
    font-size: 0.58rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(224, 64, 251, 0.65);
    margin-bottom: 4px;
}

.ranking-prompt-text {
    margin: 0;
    font-size: 0.72rem;
    line-height: 1.45;
    color: rgba(200, 255, 200, 0.82);
    display: -webkit-box;
    -webkit-line-clamp: 5;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.ranking-row-hint {
    margin-top: 8px;
    font-size: 0.58rem;
    letter-spacing: 0.08em;
    color: rgba(224, 64, 251, 0.42);
    text-transform: uppercase;
}

.ranking-modal {
    position: fixed;
    inset: 0;
    z-index: 200;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}

.ranking-modal[hidden] {
    display: none !important;
}

.ranking-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.72);
    cursor: pointer;
}

.ranking-modal-dialog {
    position: relative;
    z-index: 1;
    width: min(92vw, 720px);
    max-height: min(85vh, 640px);
    display: flex;
    flex-direction: column;
    background: #0a0e0a;
    border: 1px solid var(--accent-magenta);
    box-shadow: 0 0 32px rgba(224, 64, 251, 0.22);
    border-radius: var(--menu-surface-radius);
}

.ranking-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border-bottom: 1px solid rgba(224, 64, 251, 0.35);
    flex-shrink: 0;
}

.ranking-modal-title {
    font-size: 0.72rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--accent-primary);
}

.ranking-modal-close {
    font-family: inherit;
    font-size: 1rem;
    line-height: 1;
    color: var(--accent-magenta);
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
}

.ranking-modal-close:hover {
    color: #fff;
}

.ranking-modal-body {
    margin: 0;
    padding: 14px 16px;
    overflow: auto;
    flex: 1;
    min-height: 0;
    font-size: 0.82rem;
    line-height: 1.5;
    color: #c8e6c9;
    white-space: pre-wrap;
    word-wrap: break-word;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) #111;
}

#timeline-panel .panel-header {
    background: rgba(0, 0, 0, 0.35);
}

#timeline-panel .panel-title {
    color: var(--accent-primary);
}

#timeline-container {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    padding: 14px 16px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) #111;
}

#timeline-container::-webkit-scrollbar {
    width: 10px;
}

#timeline-container::-webkit-scrollbar-track {
    background: #111;
}

#timeline-container::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border: 1px solid #111;
}

#timeline-container::-webkit-scrollbar-thumb:hover {
    background: #66bb6a;
}

.timeline-empty {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 120px;
    color: var(--menu-text-color);
}

.timeline-empty .ascii-art {
    font-size: 0.68rem;
    line-height: 1.35;
    color: rgba(129, 199, 132, 0.55);
    text-align: center;
    white-space: pre;
}

#timeline-feed {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.timeline-cycle {
    margin: 0;
    padding: 8px 0 4px;
    border-bottom: 1px solid rgba(76, 175, 80, 0.12);
}

.timeline-cycle-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 0 2px 8px;
}

.timeline-cycle-label {
    color: rgba(200, 255, 200, 0.58);
    font-size: 0.64rem;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.timeline-cycle-pin {
    border: 1px solid rgba(76, 175, 80, 0.35);
    background: rgba(0, 0, 0, 0.28);
    color: rgba(200, 255, 200, 0.82);
    font-family: inherit;
    font-size: 0.6rem;
    letter-spacing: 0.08em;
    padding: 3px 8px;
    border-radius: 999px;
    cursor: pointer;
}

.timeline-cycle-pin:hover {
    border-color: rgba(102, 187, 106, 0.8);
    color: #d7ffd9;
}

.timeline-cycle--pinned .timeline-cycle-pin {
    border-color: rgba(224, 64, 251, 0.9);
    color: #f5d2ff;
    background: rgba(60, 0, 70, 0.28);
}

.timeline-cycle-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.timeline-cycle--pinned {
    border-bottom-color: rgba(224, 64, 251, 0.55);
}

#timeline-panel.timeline-panel--streaming {
    border-color: rgba(38, 198, 218, 0.52);
    box-shadow:
        inset 0 0 0 1px rgba(38, 198, 218, 0.22),
        0 0 18px rgba(38, 198, 218, 0.12);
}

/* SlideIn wzdłuż osi kanału (kolumna ↓); nowe wpisy dołączane na dole — wejście z dołu */
@keyframes timeline-entry-slide-in {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.timeline-entry--appear {
    animation: timeline-entry-slide-in var(--timeline-appear-duration) var(--ui-motion-emphasis) forwards;
}

@keyframes text-boost-fade {
    0% {
        filter: saturate(1.75) brightness(1.35);
    }
    100% {
        filter: saturate(1) brightness(1);
    }
}

.text-boost-fade {
    animation: text-boost-fade 1.1s ease-out forwards;
}

.text-boost-fade--chunk {
    animation: text-boost-fade 0.9s ease-out forwards;
}

@keyframes stream-word-falloff {
    0% {
        filter: saturate(1.9) brightness(1.45);
        opacity: 1;
    }
    70% {
        filter: saturate(1.25) brightness(1.1);
        opacity: 0.88;
    }
    100% {
        filter: saturate(1) brightness(1);
        opacity: 1;
    }
}

.stream-word-falloff {
    display: inline;
    animation: stream-word-falloff 1.05s ease-out forwards;
}

.timeline-entry {
    background: var(--menu-surface-bg);
    border: 1px solid rgba(76, 175, 80, 0.28);
    border-radius: var(--menu-surface-radius);
    padding: 12px 14px;
    box-shadow: var(--menu-surface-shadow);
}

.timeline-entry:hover {
    border-color: var(--menu-surface-border);
}

.timeline-entry.vector {
    border-left: 3px solid var(--accent-magenta);
}

.timeline-entry.response {
    border-left: 3px solid #26c6da;
}

.timeline-entry.prompt {
    border-left: 3px solid #ffb74d;
}

.timeline-entry.archive {
    border-left: 3px solid var(--accent-primary);
}

.timeline-entry.audit {
    border-left: 3px solid #ce93d8;
    border-color: rgba(206, 147, 216, 0.35);
}

.timeline-entry.audit:hover {
    border-color: rgba(206, 147, 216, 0.55);
}

.timeline-entry--agent-chief {
    background:
        linear-gradient(0deg, rgba(var(--agent-chief-rgb), 0.055), rgba(var(--agent-chief-rgb), 0.055)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-menadzer {
    background:
        linear-gradient(0deg, rgba(var(--agent-menadzer-rgb), 0.05), rgba(var(--agent-menadzer-rgb), 0.05)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-oracle {
    background:
        linear-gradient(0deg, rgba(var(--agent-oracle-rgb), 0.055), rgba(var(--agent-oracle-rgb), 0.055)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-system {
    background:
        linear-gradient(0deg, rgba(var(--agent-system-rgb), 0.05), rgba(var(--agent-system-rgb), 0.05)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-katalog {
    background:
        linear-gradient(0deg, rgba(var(--agent-katalog-rgb), 0.05), rgba(var(--agent-katalog-rgb), 0.05)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-audytor {
    background:
        linear-gradient(0deg, rgba(var(--agent-audytor-rgb), 0.055), rgba(var(--agent-audytor-rgb), 0.055)),
        var(--menu-surface-bg);
}

.timeline-entry--agent-chief:hover,
.timeline-entry--agent-menadzer:hover,
.timeline-entry--agent-oracle:hover,
.timeline-entry--agent-system:hover,
.timeline-entry--agent-katalog:hover,
.timeline-entry--agent-audytor:hover {
    filter: brightness(1.04);
}

.timeline-entry-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 8px;
    font-size: 0.65rem;
    letter-spacing: 0.1em;
}

.timeline-entry-type {
    color: rgba(200, 255, 200, 0.55);
    text-transform: uppercase;
}

.timeline-entry-time {
    color: rgba(255, 255, 255, 0.35);
}

.timeline-entry-content {
    color: var(--menu-text-color);
    font-size: 0.82rem;
    line-height: 1.55;
    word-wrap: break-word;
}

.timeline-stream-chunk {
    white-space: pre-wrap;
}

.timeline-stream-chunk + .timeline-stream-chunk {
    margin-top: 0.45rem;
}

.timeline-stream-chunk--reasoning {
    color: rgba(144, 164, 174, 0.9);
    font-style: italic;
}

/* Pełny prompt / pełna odpowiedź LLM — przewijanie zamiast obcięcia */
.timeline-entry-content--long {
    white-space: pre-wrap;
    max-height: min(70vh, 36rem);
    overflow-y: auto;
    padding-right: 6px;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) #0d0d0d;
}

.timeline-entry-content--long::-webkit-scrollbar {
    width: 8px;
}

.timeline-entry-content--long::-webkit-scrollbar-track {
    background: #0d0d0d;
    border-radius: 4px;
}

.timeline-entry-content--long::-webkit-scrollbar-thumb {
    background: var(--accent-primary);
    border-radius: 4px;
    border: 1px solid #111;
}

.timeline-entry-content--long::-webkit-scrollbar-thumb:hover {
    background: #66bb6a;
}

.agent-window {
    display: flex;
    border: 1px solid var(--menu-surface-border);
    padding: 6px 10px;
    background: rgba(0, 20, 0, 0.35);
    margin-bottom: 6px;
    border-radius: var(--menu-surface-radius);
    will-change: max-height, min-height;
    transition:
        border-color 0.28s ease,
        box-shadow 0.32s ease,
        opacity 0.32s ease,
        max-height 0.48s var(--ui-motion-emphasis),
        min-height 0.48s var(--ui-motion-emphasis),
        padding 0.48s var(--ui-motion-emphasis),
        transform 0.44s var(--ui-motion-emphasis),
        filter 0.32s ease;
    opacity: 0.72;
    min-height: 46px;
    max-height: min(148px, 22vh);
    overflow: hidden;
    flex-shrink: 0;
    transform: scale(1);
    filter: brightness(0.96);
}

.agent-window:not(.active) .agent-avatar-col {
    width: 200px;
    padding-right: 10px;
}

.agent-window:not(.active) .agent-stats {
    margin-top: 6px;
    font-size: 0.62rem;
    line-height: 1.35;
}

.agent-window:not(.active) .agent-console-col {
    padding-left: 10px;
}

.agent-window:not(.active) .log-container {
    font-size: 0.74rem;
    line-height: 1.35;
}

.agent-window.active {
    border-color: var(--accent-magenta);
    box-shadow: 0 0 16px rgba(224, 64, 251, 0.2);
    opacity: 1;
    padding: 12px;
    min-height: 120px;
    max-height: min(520px, 48vh);
    z-index: 2;
    transform: scale(1.012);
    filter: brightness(1.03);
}

.agent-avatar-col {
    width: 200px;
    border-right: 1px dashed rgba(76, 175, 80, 0.35);
    padding-right: 10px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.agent-window.active .agent-avatar-col {
    border-color: rgba(224, 64, 251, 0.45);
}

.avatar-art {
    font-size: 0.58rem;
    line-height: 0.68rem;
    white-space: pre;
    color: #2e7d32;
    margin-bottom: 8px;
}

.agent-window.active .avatar-art {
    color: var(--accent-magenta);
    text-shadow: 0 0 6px rgba(224, 64, 251, 0.35);
}

.agent-name {
    font-size: 0.95rem;
    font-weight: bold;
    color: var(--accent-primary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.agent-window.active .agent-name {
    color: #fff;
}

.agent-stats {
    font-size: 0.68rem;
    color: rgba(129, 199, 132, 0.65);
    margin-top: 8px;
    line-height: 1.45;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.stat-row {
    display: flex;
    justify-content: space-between;
    gap: 8px;
}

.stat-value {
    color: var(--accent-light);
    font-weight: bold;
    text-align: right;
}

.agent-window.active .stat-value {
    color: #fff;
}

.agent-console-col {
    flex: 1;
    min-width: 0;
    padding-left: 12px;
    display: flex;
    flex-direction: column;
    position: relative;
}

.log-container {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    font-size: 0.82rem;
    line-height: 1.45;
    scrollbar-width: thin;
    scrollbar-color: var(--accent-primary) #0a0f0a;
}

.log-container::-webkit-scrollbar {
    width: 8px;
}

.log-container::-webkit-scrollbar-track {
    background: #0a0f0a;
}

.log-container::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--accent-primary), #1b5e20);
    border-radius: 4px;
}

.log-container:focus-visible {
    outline: 1px solid var(--accent-primary);
    outline-offset: 2px;
}

.log-line {
    margin-bottom: 6px;
    word-wrap: break-word;
}

.timestamp {
    color: rgba(255, 255, 255, 0.28);
    margin-right: 8px;
    font-size: 0.78rem;
}

.message-text {
    color: #a5d6a7;
}

#window-chief .message-text {
    background: rgba(var(--agent-chief-rgb), 0.08);
}

#window-menadzer .message-text {
    background: rgba(var(--agent-menadzer-rgb), 0.08);
}

#window-oracle .message-text {
    background: rgba(var(--agent-oracle-rgb), 0.08);
}

#window-system .message-text {
    background: rgba(var(--agent-system-rgb), 0.08);
}

#window-katalog .message-text {
    background: rgba(var(--agent-katalog-rgb), 0.08);
}

#window-audytor .message-text {
    background: rgba(var(--agent-audytor-rgb), 0.08);
}

#window-chief .message-text,
#window-menadzer .message-text,
#window-oracle .message-text,
#window-system .message-text,
#window-katalog .message-text,
#window-audytor .message-text {
    border-radius: 2px;
    padding: 1px 4px;
}

.message-text.reasoning {
    color: rgba(144, 164, 174, 0.9);
    font-style: italic;
}

.agent-window.active .message-text {
    color: #e8f5e9;
}

.agent-window.active#window-chief .message-text {
    background: rgba(var(--agent-chief-rgb), 0.13);
}

.agent-window.active#window-menadzer .message-text {
    background: rgba(var(--agent-menadzer-rgb), 0.13);
}

.agent-window.active#window-oracle .message-text {
    background: rgba(var(--agent-oracle-rgb), 0.13);
}

.agent-window.active#window-system .message-text {
    background: rgba(var(--agent-system-rgb), 0.13);
}

.agent-window.active#window-katalog .message-text {
    background: rgba(var(--agent-katalog-rgb), 0.13);
}

.agent-window.active#window-audytor .message-text {
    background: rgba(var(--agent-audytor-rgb), 0.13);
}

.cursor {
    display: none;
    width: 7px;
    height: 1.1em;
    background: var(--accent-magenta);
    vertical-align: text-bottom;
    margin-left: 3px;
    animation: blink 1s step-end infinite;
}

.agent-window.active .cursor.typing {
    display: inline-block;
}

@keyframes blink {
    0%,
    100% {
        opacity: 1;
    }
    50% {
        opacity: 0;
    }
}

/* ——— Symulacja / odtwarzanie sesji ——— */
body[data-agents-mode="replay"] #install-header {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem 1rem;
}

.sim-mode-badge {
    margin-left: auto;
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
    letter-spacing: 0.06em;
    border: 1px solid var(--accent-magenta, #e040fb);
    color: var(--accent-magenta, #e040fb);
    background: rgba(224, 64, 251, 0.08);
}

.replay-toolbar--minimal {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.35rem 0.75rem;
    min-height: auto;
    align-items: center;
}

.replay-toolbar--minimal .replay-status {
    flex: 1;
    min-width: 0;
}

.replay-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.65rem 1rem;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--menu-surface-border);
    background: rgba(0, 0, 0, 0.25);
    font-family: inherit;
    font-size: 0.78rem;
}

.replay-toolbar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.replay-toolbar select {
    min-width: 12rem;
    max-width: min(28rem, 90vw);
    background: var(--menu-surface, #0a0f0c);
    color: var(--text-primary, #c8e6c9);
    border: 1px solid var(--menu-surface-border);
    padding: 0.25rem 0.4rem;
    font: inherit;
}

.replay-toolbar button {
    background: var(--menu-surface, #0a0f0c);
    color: var(--accent-primary, #4caf50);
    border: 1px solid var(--menu-surface-border);
    padding: 0.3rem 0.65rem;
    font: inherit;
    cursor: pointer;
}

.replay-toolbar button:hover {
    border-color: var(--accent-primary, #4caf50);
}

.replay-toolbar button:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.replay-speed-label {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
}

.replay-speed-label input[type='range'] {
    width: 7rem;
    vertical-align: middle;
}

.replay-file-local-wrap input[type='file'] {
    max-width: min(200px, 40vw);
    font-size: 0.72rem;
}

.replay-progress-wrap {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 8rem;
    max-width: 20rem;
}

.replay-progress-label {
    font-size: 0.68rem;
    color: var(--menu-label-color, #81c784);
    letter-spacing: 0.06em;
}

#replay-progress {
    width: 100%;
    height: 0.5rem;
    accent-color: var(--accent-primary, #4caf50);
}

.replay-counters {
    font-family: 'Courier New', monospace;
    font-size: 0.72rem;
    color: var(--accent-primary, #a5d6a7);
    white-space: nowrap;
}

.replay-status {
    color: var(--text-muted, #81c784);
    font-size: 0.75rem;
    max-width: min(24rem, 100%);
}

@media (max-width: 900px) {
    #main-container {
        flex-direction: column;
        overflow-y: auto;
    }

    #agents-panel {
        width: 100%;
        max-width: none;
        height: 40vh;
        border-right: none;
        border-bottom: 1px solid var(--menu-surface-border);
    }

    #timeline-panel {
        flex: 1;
        min-height: min(48vh, 400px);
    }

    #map-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 42vh;
        min-height: 200px;
        border-left: none;
        border-right: none;
        border-top: 1px solid var(--menu-surface-border);
    }

    #ranking-panel {
        width: 100%;
        max-width: none;
        min-width: 0;
        max-height: 36vh;
        min-height: 140px;
        border-left: none;
        border-top: 1px solid var(--menu-surface-border);
        box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.35);
    }
}