/*
 * Agents Stats — komponenty design systemu (makieta, wersja 2).
 *
 * Wyłącznie tokeny semantyczne z tokens.css: żadnych literałów kolorów,
 * żadnych --base-*. Klasy stanów is-hover / is-focus / is-active istnieją po to,
 * żeby przewodnik mógł pokazać stan na stałe; w produkcie stan daje przeglądarka
 * (:hover, :focus-visible, :active) albo atrybut (disabled, aria-invalid,
 * aria-busy, aria-current, aria-selected).
 */

/* ================================================================ podstawy */

*, *::before, *::after { box-sizing: border-box; }

html {
    font-family: var(--font-family-sans);
    font-size: 100%;
    line-height: var(--line-height-normal);
    color: var(--color-text-primary);
    background: var(--color-bg-canvas);
    -webkit-text-size-adjust: 100%;
}

body {
    margin: 0;
    font-size: var(--density-font-size);
    background: var(--color-bg-canvas);
    color: var(--color-text-primary);
    -webkit-font-smoothing: antialiased;
}

button, input, select, textarea { font: inherit; color: inherit; }

/* Atrybut hidden wygrywa z display komponentu (np. .toast { display: flex }). */
[hidden] { display: none !important; }

a { color: var(--color-text-link); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }

/* Jeden wspólny fokus dla wszystkiego, co da się obsłużyć klawiaturą. */
:focus-visible,
.is-focus {
    outline: var(--focus-ring-width) solid var(--color-focus-ring);
    outline-offset: var(--focus-ring-offset);
}

.icon {
    width: 1.25em;
    height: 1.25em;
    flex: none;
    vertical-align: -0.25em;
    /* Ikony Lucide są obrysowe: <use> nie dziedziczy atrybutów ze sprite'a, więc styl obrysu jest tutaj. */
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.mono { font-family: var(--font-family-mono); }
.text-secondary { color: var(--color-text-secondary); }

/* ============================================================== typografia */

.h1, .h2, .h3 { margin: 0; line-height: var(--line-height-tight); font-weight: var(--font-weight-bold); }
.h1 { font-size: var(--font-size-2xl); }
.h2 { font-size: var(--font-size-xl); }
.h3 { font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); }

.overline {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

/* ================================================================ przyciski */

.btn {
    --btn-bg: var(--color-bg-surface);
    --btn-fg: var(--color-text-primary);
    --btn-border: var(--color-border-default);
    --btn-bg-hover: var(--color-bg-hover);
    --btn-bg-active: var(--color-bg-sunken);
    --btn-border-hover: var(--color-border-strong);

    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    min-height: var(--density-control-height);
    padding: 0 var(--space-4);
    border: var(--border-width) solid var(--btn-border);
    border-radius: var(--radius-md);
    background: var(--btn-bg);
    color: var(--btn-fg);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-tight);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--duration-fast) var(--easing-standard),
        border-color var(--duration-fast) var(--easing-standard);
}

.btn:hover, .btn.is-hover { background: var(--btn-bg-hover); border-color: var(--btn-border-hover); }
.btn:active, .btn.is-active { background: var(--btn-bg-active); }

.btn--primary {
    --btn-bg: var(--color-accent);
    --btn-fg: var(--color-text-on-accent);
    --btn-border: var(--color-accent);
    --btn-bg-hover: var(--color-accent-hover);
    --btn-border-hover: var(--color-accent-hover);
    --btn-bg-active: var(--color-accent-active);
}

.btn--danger {
    --btn-bg: var(--color-danger);
    --btn-fg: var(--color-text-on-danger);
    --btn-border: var(--color-danger);
    --btn-bg-hover: var(--color-danger-hover);
    --btn-border-hover: var(--color-danger-hover);
    --btn-bg-active: var(--color-danger-active);
}

.btn--text {
    --btn-bg: transparent;
    --btn-fg: var(--color-text-link);
    --btn-border: transparent;
    --btn-bg-hover: var(--color-bg-hover);
    --btn-border-hover: transparent;
    padding: 0 var(--space-2);
}

.btn--icon {
    width: var(--density-control-height);
    padding: 0;
}

.btn--icon.btn--text { --btn-fg: var(--color-text-secondary); }

.btn--block { display: flex; width: 100%; }

/* Drugorzędny = wygląd domyślny .btn; klasa jest dla czytelności znacznika. */
.btn--secondary { }

.btn--sm {
    min-height: calc(var(--density-control-height) - var(--space-2));
    padding: 0 var(--space-3);
    font-size: var(--font-size-sm);
    gap: var(--space-1);
}

.btn--sm.btn--icon { width: calc(var(--density-control-height) - var(--space-2)); padding: 0; }

/* Chip / przełącznik wariantu: aria-pressed niesie stan. */
.chip {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    min-height: calc(var(--density-control-height) - var(--space-2));
    padding: 0 var(--space-3);
    border: var(--border-width) solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-surface);
    color: var(--color-text-secondary);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    cursor: pointer;
}

.chip:hover, .chip.is-hover { border-color: var(--color-border-strong); color: var(--color-text-primary); }

.chip[aria-pressed="true"] {
    background: var(--color-accent-subtle);
    border-color: var(--color-accent);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
}

.chip[aria-pressed="true"]::before {
    content: "";
    width: 0.375rem;
    height: 0.375rem;
    border-radius: var(--radius-full);
    background: var(--color-accent);
}

.chip:disabled { color: var(--color-text-disabled); border-color: var(--color-border-subtle); cursor: not-allowed; }

.chip-group { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* Zajęty (aria-busy) zostaje w kolorze wariantu — to „trwa akcja”, nie „niedostępne”. */
.btn:disabled:not([aria-busy="true"]), .btn[aria-disabled="true"]:not([aria-busy="true"]) {
    --btn-bg: var(--color-bg-sunken);
    --btn-fg: var(--color-text-disabled);
    --btn-border: var(--color-border-subtle);
    --btn-bg-hover: var(--color-bg-sunken);
    --btn-border-hover: var(--color-border-subtle);
    --btn-bg-active: var(--color-bg-sunken);
    cursor: not-allowed;
}

.btn--text:disabled { --btn-bg: transparent; --btn-border: transparent; --btn-bg-hover: transparent; }

/* Ładowanie: etykieta zostaje (szerokość się nie zmienia), na niej wskaźnik. */
.btn:not([aria-busy="true"]) > .spinner { display: none; }
.btn[aria-busy="true"], .btn[aria-busy="true"]:hover { cursor: progress; background: var(--btn-bg); border-color: var(--btn-border); }
.btn[aria-busy="true"] > :not(.spinner) { visibility: hidden; }
.btn[aria-busy="true"] > .spinner { position: absolute; inset: 0; margin: auto; }

/* =================================================================== pola */

.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }

.field__label {
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.field__hint { font-size: var(--font-size-sm); color: var(--color-text-secondary); margin: 0; }

.field__error {
    display: flex;
    align-items: flex-start;
    gap: var(--space-1);
    margin: 0;
    font-size: var(--font-size-sm);
    color: var(--color-feedback-error-fg);
}

.input, .select {
    width: 100%;
    min-height: var(--density-control-height);
    padding: 0 var(--density-control-padding-x);
    border: var(--border-width) solid var(--color-border-default);
    border-radius: var(--radius-md);
    background: var(--color-bg-surface);
    color: var(--color-text-primary);
    transition: border-color var(--duration-fast) var(--easing-standard);
}

.input::placeholder { color: var(--color-text-secondary); opacity: 1; }
.input:hover, .select:hover, .input.is-hover { border-color: var(--color-border-strong); }

.input:focus-visible, .select:focus-visible, .input.is-focus {
    border-color: var(--color-focus-ring);
    outline-offset: 0;
}

.input[aria-invalid="true"], .select[aria-invalid="true"] {
    border-color: var(--color-feedback-error-border);
    border-width: var(--border-width-strong);
}

.input:disabled, .select:disabled {
    background: var(--color-bg-sunken);
    color: var(--color-text-disabled);
    border-color: var(--color-border-subtle);
    cursor: not-allowed;
}

.select {
    appearance: none;
    padding-right: calc(var(--density-control-padding-x) + 1.5rem);
    background-image: none;
    cursor: pointer;
}

.select-wrap { position: relative; }
.select-wrap .icon {
    position: absolute;
    right: var(--density-control-padding-x);
    top: 50%;
    transform: translateY(-50%);
    pointer-events: none;
    color: var(--color-text-secondary);
}

/* Hasło z przyciskiem pokaż/ukryj w polu. */
.input-group { position: relative; display: flex; }
.input-group .input { padding-right: calc(var(--density-control-height) + var(--space-1)); }
.input-group .btn--icon {
    position: absolute;
    right: var(--space-1);
    top: 50%;
    transform: translateY(-50%);
    min-height: calc(var(--density-control-height) - var(--space-2));
    width: calc(var(--density-control-height) - var(--space-2));
}

/* Checkbox, radio, przełącznik — natywne pola, styl przez accent-color i własny przełącznik. */
.choice {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-height: var(--density-control-height);
    cursor: pointer;
}

.choice input[type="checkbox"]:not(.switch), .choice input[type="radio"] {
    width: 1.125rem;
    height: 1.125rem;
    margin: 0;
    accent-color: var(--color-accent);
    cursor: pointer;
}

.choice:has(input:disabled) { color: var(--color-text-disabled); cursor: not-allowed; }

.switch {
    appearance: none;
    position: relative;
    width: 2.5rem;
    height: 1.5rem;
    margin: 0;
    flex: none;
    border: var(--border-width) solid var(--color-border-default);
    border-radius: var(--radius-full);
    background: var(--color-bg-sunken);
    cursor: pointer;
    transition: background-color var(--duration-normal) var(--easing-standard);
}

.switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(1.5rem - 6px);
    height: calc(1.5rem - 6px);
    border-radius: var(--radius-full);
    background: var(--color-border-strong);
    transition: transform var(--duration-normal) var(--easing-standard);
}

.switch:checked { background: var(--color-accent); border-color: var(--color-accent); }
.switch:checked::after { transform: translateX(1rem); background: var(--color-text-on-accent); }
.switch:disabled { border-color: var(--color-border-subtle); cursor: not-allowed; }
.switch:disabled::after { background: var(--color-text-disabled); }

.fieldset { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--space-1); }
.fieldset legend { padding: 0; margin-bottom: var(--space-1); }

/* Pole z przyciskiem obok (np. adres + „Sprawdź”). */
.input-row { display: flex; gap: var(--space-2); align-items: stretch; }
.input-row > .input, .input-row > .input-group, .input-row > .select-wrap { flex: 1; min-width: 0; }
.input-row > .btn { flex: none; }

/* ================================================================== karty */

.card {
    display: flex;
    flex-direction: column;
    background: var(--color-bg-surface);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    min-width: 0;
}

.card__header, .card__body, .card__footer { padding: var(--density-card-padding); }
.card__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
}
.card__header + .card__body { padding-top: var(--density-card-padding); }
.card__footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-2);
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.card--interactive { cursor: pointer; transition: border-color var(--duration-fast) var(--easing-standard); }
.card--interactive:hover, .card--interactive.is-hover { border-color: var(--color-border-strong); }

/* ================================================================= tabela */

.table-wrap {
    overflow-x: auto;
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    /* v2: cień przy krawędzi, za którą jest jeszcze treść; znika, gdy dojedziesz do końca.
       v2b: gradient liniowy — ta sama siła przy tabeli 300 px i 30 000 px (radialny rozciągał się na całą wysokość). */
    background:
        linear-gradient(to right, var(--color-bg-surface) 30%, transparent) left center / 2.5rem 100% no-repeat local,
        linear-gradient(to left, var(--color-bg-surface) 30%, transparent) right center / 2.5rem 100% no-repeat local,
        linear-gradient(to right, var(--color-scroll-shadow), transparent) left center / 1.25rem 100% no-repeat scroll,
        linear-gradient(to left, var(--color-scroll-shadow), transparent) right center / 1.25rem 100% no-repeat scroll,
        var(--color-bg-surface);
}

.table { width: 100%; border-collapse: collapse; font-size: var(--density-font-size); }

.table th, .table td {
    padding: var(--density-cell-padding-y) var(--density-cell-padding-x);
    text-align: left;
    vertical-align: middle;
    border-bottom: var(--border-width) solid var(--color-border-subtle);
    white-space: nowrap;
}

.table th {
    position: sticky;
    top: 0;
    background: var(--color-bg-sunken);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    letter-spacing: var(--letter-spacing-caps);
    text-transform: uppercase;
    color: var(--color-text-secondary);
}

.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover td { background: var(--color-bg-hover); }

.table tr[aria-selected="true"] td { background: var(--color-bg-selected); }
.table tr[aria-selected="true"] td:first-child { box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent); }

.table .num { text-align: right; font-variant-numeric: tabular-nums; }
.table td.table__empty { padding: var(--space-8) var(--space-4); white-space: normal; }
.table tbody tr:has(.table__empty):hover td { background: none; }

/* ============================================================== znaczniki */

.badge {
    --badge-fg: var(--color-neutral-fg);
    --badge-bg: var(--color-neutral-bg);
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: 0.125rem var(--space-2);
    border-radius: var(--radius-full);
    background: var(--badge-bg);
    color: var(--badge-fg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-snug);
    white-space: nowrap;
}

/* Kropka niesie kształt obok koloru — stanu nie odróżnia sam kolor, zawsze jest też słowo. */
.badge::before {
    content: "";
    width: 0.5rem;
    height: 0.5rem;
    border-radius: var(--radius-full);
    background: currentColor;
}

.badge--success { --badge-fg: var(--color-feedback-success-fg); --badge-bg: var(--color-feedback-success-bg); }
.badge--warning { --badge-fg: var(--color-feedback-warning-fg); --badge-bg: var(--color-feedback-warning-bg); }
.badge--error { --badge-fg: var(--color-feedback-error-fg); --badge-bg: var(--color-feedback-error-bg); }
.badge--info { --badge-fg: var(--color-feedback-info-fg); --badge-bg: var(--color-feedback-info-bg); }

/* Stan źródła telemetrii (te same cztery stany co w konfiguratorze). */
.badge--source-ok { --badge-fg: var(--color-status-source-ok-fg); --badge-bg: var(--color-status-source-ok-bg); }
.badge--source-waiting { --badge-fg: var(--color-status-source-waiting-fg); --badge-bg: var(--color-status-source-waiting-bg); }
.badge--source-error { --badge-fg: var(--color-status-source-error-fg); --badge-bg: var(--color-status-source-error-bg); }
.badge--source-disabled { --badge-fg: var(--color-status-source-disabled-fg); --badge-bg: var(--color-status-source-disabled-bg); }
.badge--source-disabled::before { background: transparent; box-shadow: inset 0 0 0 var(--border-width-strong) currentColor; }

/* Połączenie strony z usługą. */
.connection { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--font-size-sm); color: var(--color-text-secondary); }
.connection::before { content: ""; width: 0.5rem; height: 0.5rem; border-radius: var(--radius-full); background: var(--color-text-disabled); }
.connection--live::before { background: var(--color-status-connection-live); }
.connection--lost::before { background: var(--color-status-connection-lost); }

/* Skala progów: pasek pasm i wartość w kolorze pasma. */
.threshold { color: var(--threshold-color); font-weight: var(--font-weight-bold); font-variant-numeric: tabular-nums; }
.threshold--1 { --threshold-color: var(--color-threshold-1); }
.threshold--2 { --threshold-color: var(--color-threshold-2); }
.threshold--3 { --threshold-color: var(--color-threshold-3); }
.threshold--4 { --threshold-color: var(--color-threshold-4); }
.threshold-bar { display: flex; height: 0.5rem; border-radius: var(--radius-full); overflow: hidden; }
.threshold-bar > span { background: var(--threshold-color); }

/* ===================================================== komunikaty inline */

.alert {
    --alert-fg: var(--color-feedback-info-fg);
    --alert-bg: var(--color-feedback-info-bg);
    --alert-border: var(--color-feedback-info-border);
    display: flex;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border: var(--border-width) solid var(--alert-border);
    border-left-width: 4px;
    border-radius: var(--radius-md);
    background: var(--alert-bg);
    color: var(--color-text-primary);
}

.alert > .icon { color: var(--alert-fg); margin-top: 0.125rem; }
.alert__title { margin: 0; font-weight: var(--font-weight-semibold); color: var(--alert-fg); }
.alert__text { margin: var(--space-1) 0 0; }
.alert__body { flex: 1; min-width: 0; }

.alert--error { --alert-fg: var(--color-feedback-error-fg); --alert-bg: var(--color-feedback-error-bg); --alert-border: var(--color-feedback-error-border); }
.alert--warning { --alert-fg: var(--color-feedback-warning-fg); --alert-bg: var(--color-feedback-warning-bg); --alert-border: var(--color-feedback-warning-border); }
.alert--success { --alert-fg: var(--color-feedback-success-fg); --alert-bg: var(--color-feedback-success-bg); --alert-border: var(--color-feedback-success-border); }

/* ================================================================ nawigacja */

.topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-nav);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--layout-topbar-height);
    padding: env(safe-area-inset-top, 0px) var(--layout-gutter) 0;
    /* v2: jeden rząd zawsze. Kod: nadmiar obsługuje sam pasek — elementy z .topbar__hide-narrow / -medium znikają
       według szerokości PASKA (zapytanie kontenerowe), a .topbar__actions przewija się zamiast łamać pasek. */
    flex-wrap: nowrap;
    min-width: 0;
    container: topbar / inline-size;
    background: var(--color-bg-surface);
    border-bottom: var(--border-width) solid var(--color-border-subtle);
}

.topbar__brand {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-weight: var(--font-weight-bold);
    font-size: var(--font-size-lg);
    color: var(--color-text-primary);
    text-decoration: none;
    white-space: nowrap;
}

.topbar__mark {
    display: grid;
    place-items: center;
    width: 1.75rem;
    height: 1.75rem;
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-size: var(--font-size-md);
}

.topbar__spacer { flex: 1; }

/* Grupa akcji po prawej: gdy mimo chowania nadal się nie mieści, przewija się w poziomie (pasek się nie łamie). */
.topbar__actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    overflow-x: auto;
    scrollbar-width: thin;
    /* Zapas na pierścień fokusu (2 px + 2 px odstępu), który kontener przewijania by przyciął; ujemny margines go kompensuje. */
    padding: var(--space-1);
    margin: calc(-1 * var(--space-1));
}

/* Elementy do schowania, gdy obszar treści paska jest wąski (zapytanie kontenerowe mierzy treść, bez marginesów 16 px):
   narrow < 43rem = 688 px (okno 720 px), medium < 66.75rem = 1068 px (okno 1100 px). */
@container topbar (max-width: 42.99rem) { .topbar__hide-narrow { display: none !important; } }
@container topbar (max-width: 66.74rem) { .topbar__hide-medium { display: none !important; } }

.sidenav {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
    width: var(--layout-sidebar-width);
    padding: var(--space-3);
    background: var(--color-bg-surface);
    border-right: var(--border-width) solid var(--color-border-subtle);
}

.nav-item {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: var(--density-control-height);
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-secondary);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
}

.nav-item:hover, .nav-item.is-hover { background: var(--color-bg-hover); color: var(--color-text-primary); }

.nav-item[aria-current="page"] {
    background: var(--color-accent-subtle);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-semibold);
    box-shadow: inset var(--border-width-strong) 0 0 var(--color-accent);
}

.nav-item[aria-current="page"] .icon { color: var(--color-text-link); }

/* Dolny pasek na telefonie — zamiast menu bocznego. */
.bottomnav {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    min-height: var(--layout-bottomnav-height);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: var(--color-bg-surface);
    border-top: var(--border-width) solid var(--color-border-subtle);
}

.bottomnav .nav-item {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-1);
    min-height: var(--layout-bottomnav-height);
    padding: var(--space-1);
    border-radius: 0;
    font-size: var(--font-size-xs);
}

.bottomnav .nav-item[aria-current="page"] { box-shadow: inset 0 var(--border-width-strong) 0 var(--color-accent); }

/* ================================================================== dialog */

.modal-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--z-overlay);
    display: grid;
    place-items: center;
    padding: var(--space-4);
    background: var(--color-scrim);
}

.modal {
    z-index: var(--z-modal);
    display: flex;
    flex-direction: column;
    width: min(100%, 28rem);
    max-height: calc(100vh - var(--space-8));
    background: var(--color-bg-raised);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    color: var(--color-text-primary);
}

.modal__header { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); }
.modal__body { padding: 0 var(--space-5); overflow-y: auto; }
.modal__footer { display: flex; justify-content: flex-end; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-5); }

/* W przewodniku dialog leży w ramce zamiast nad stroną. */
.modal-backdrop--inline { position: relative; inset: auto; min-height: 20rem; border-radius: var(--radius-lg); z-index: var(--z-base); }

/* Natywny <dialog class="modal">: tło przyciemnia ::backdrop. */
dialog.modal { padding: 0; margin: auto; }
dialog.modal::backdrop { background: var(--color-scrim); }
dialog.modal:not([open]) { display: none; }

/* ==================================================================== toast */

.toast-region {
    position: fixed;
    right: var(--space-4);
    bottom: calc(var(--space-4) + env(safe-area-inset-bottom, 0px));
    left: var(--space-4);
    z-index: var(--z-toast);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-2);
    pointer-events: none;
}

.toast-region--inline { position: static; align-items: flex-start; }

.toast {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    max-width: 24rem;
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-bg-inverse);
    color: var(--color-text-inverse);
    box-shadow: var(--shadow-md);
    pointer-events: auto;
    animation: toast-in var(--duration-slow) var(--easing-standard);
}

.toast .btn--text { --btn-fg: var(--color-text-inverse); text-decoration: underline; min-height: auto; }
.toast .btn--text:hover { --btn-bg-hover: transparent; }

/* v2: na ciemnym (jasny tryb) / jasnym (ciemny tryb) tle toastu zwykły pierścień ginie — własny kolor fokusu. */
.toast :focus-visible, .toast .is-focus { outline-color: var(--color-focus-ring-inverse); }

@keyframes toast-in { from { opacity: 0; transform: translateY(var(--space-2)); } }

/* ============================================================= pusty stan */

.empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-8) var(--space-4);
    text-align: center;
    color: var(--color-text-secondary);
}

.empty > .icon { width: 2.5rem; height: 2.5rem; color: var(--color-text-secondary); }
.empty__title { margin: 0; font-size: var(--font-size-lg); font-weight: var(--font-weight-semibold); color: var(--color-text-primary); }
.empty__text { margin: 0; max-width: 28rem; }
.empty .btn { margin-top: var(--space-2); }

/* ================================================================ ładowanie */

.spinner {
    display: inline-block;
    width: 1.125rem;
    height: 1.125rem;
    flex: none;
    border: var(--border-width-strong) solid currentColor;
    border-right-color: transparent;
    border-radius: var(--radius-full);
    animation: spin 0.8s linear infinite;
}

.spinner--lg { width: 2rem; height: 2rem; border-width: 3px; color: var(--color-accent); }

@keyframes spin { to { transform: rotate(360deg); } }

.skeleton {
    display: block;
    height: 0.875rem;
    border-radius: var(--radius-sm);
    background: var(--color-skeleton);
    animation: pulse 1.4s var(--easing-standard) infinite;
}

@keyframes pulse { 50% { opacity: 0.5; } }

.loading { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-secondary); }

/* ========================================================== role agentów (v2) */

/* Ikona roli: obrysowa jak Lucide, kolor z currentColor; 24 px domyślnie, 16 px w listach. */
.role-icon {
    width: 1.5rem;
    height: 1.5rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.role-icon--16 { width: 1rem; height: 1rem; }

/* Awatar: koło w kolorze grupy ról + ikona. Kolor tylko wspiera — obok zawsze etykieta roli. */
.role-avatar {
    --role-bg: var(--color-neutral-bg);
    --role-fg: var(--color-neutral-fg);
    display: inline-grid;
    place-items: center;
    width: 3rem;
    height: 3rem;
    flex: none;
    border-radius: var(--radius-full);
    background: var(--role-bg);
    color: var(--role-fg);
}

.role-avatar .role-icon { width: 1.5rem; height: 1.5rem; }
.role-avatar--lg { width: 4rem; height: 4rem; }
.role-avatar--lg .role-icon { width: 2rem; height: 2rem; }

.role-avatar--inzynieria { --role-bg: var(--color-role-inzynieria-bg); --role-fg: var(--color-role-inzynieria-fg); }
.role-avatar--analityka-dane { --role-bg: var(--color-role-analityka-dane-bg); --role-fg: var(--color-role-analityka-dane-fg); }
.role-avatar--marketing-sprzedaz { --role-bg: var(--color-role-marketing-sprzedaz-bg); --role-fg: var(--color-role-marketing-sprzedaz-fg); }
.role-avatar--ludzie-organizacja { --role-bg: var(--color-role-ludzie-organizacja-bg); --role-fg: var(--color-role-ludzie-organizacja-fg); }
.role-avatar--tresc-media { --role-bg: var(--color-role-tresc-media-bg); --role-fg: var(--color-role-tresc-media-fg); }
.role-avatar--finanse-prawo { --role-bg: var(--color-role-finanse-prawo-bg); --role-fg: var(--color-role-finanse-prawo-fg); }

/* Awatar + etykieta po polsku + klucz roli. */
.role-label { display: inline-flex; align-items: center; gap: var(--space-3); min-width: 0; }
.role-label__text { display: flex; flex-direction: column; min-width: 0; }
.role-label__name { font-weight: var(--font-weight-semibold); color: var(--color-text-primary); overflow-wrap: break-word; }
.role-label__key { font-family: var(--font-family-mono); font-size: var(--font-size-xs); color: var(--color-text-secondary); }

/* ============================================================ blok kodu */

.code-block {
    /* v2: przewija się sam kod, a przycisk stoi obok niego, nie nad nim. */
    display: flex;
    align-items: flex-start;
    gap: var(--space-2);
    margin: 0;
    padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4);
    border: var(--border-width) solid var(--color-border-subtle);
    border-radius: var(--radius-md);
    background: var(--color-bg-sunken);
    color: var(--color-text-primary);
    font-family: var(--font-family-mono);
    font-size: var(--font-size-sm);
    line-height: var(--line-height-normal);
}

.code-block code { white-space: pre; flex: 1; min-width: 0; overflow-x: auto; padding-block: var(--space-1); }
.code-block .prompt { flex: none; padding-block: var(--space-1); color: var(--color-text-secondary); user-select: none; }
.code-block > .btn { flex: none; }

/* ======================================================= przejście do treści */

.skip-link {
    position: absolute;
    left: var(--space-2);
    top: var(--space-2);
    z-index: var(--z-toast);
    padding: var(--space-2) var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-accent);
    color: var(--color-text-on-accent);
    font-weight: var(--font-weight-semibold);
    transform: translateY(-200%);
}

.skip-link:focus, .skip-link.is-focus { transform: none; }

/* ============================================================ szkielet aplikacji */

/* Pasek górny + menu boczne (desktop) albo dolne (telefon) + treść. */
.app-shell {
    display: grid;
    grid-template-columns: var(--layout-sidebar-width) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    min-height: 100vh;
}

.app-shell > .topbar { grid-column: 1 / -1; }
.app-shell > .app-main { padding: var(--layout-gutter); min-width: 0; }

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
    .spinner { animation: spin 2s linear infinite !important; }
}

/* ================================================================== telefon */

@media (max-width: 720px) {
    /* Cel dotyku co najmniej 44 px niezależnie od gęstości. */
    .btn, .input, .select, .nav-item, .choice { min-height: 2.75rem; }
    .btn--icon { width: 2.75rem; }
    .input, .select { font-size: var(--font-size-lg); }   /* 16 px: iOS nie powiększa strony przy fokusie */
    .sidenav { display: none; }
    .modal-backdrop { align-items: end; padding: 0; }
    .modal { width: 100%; border-radius: var(--radius-lg) var(--radius-lg) 0 0; padding-bottom: env(safe-area-inset-bottom, 0px); }
    /* v2: natywny dialog stał pośrodku z uciętymi dolnymi rogami — teraz arkusz przyklejony do dołu ekranu. */
    dialog.modal { margin: auto 0 0; max-width: 100%; max-height: 85vh; }
    .modal__footer .btn { flex: 1; }
    .app-shell { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr auto; }
    .app-shell > .bottomnav { position: sticky; bottom: 0; z-index: var(--z-nav); }
    .input-row { flex-wrap: wrap; }
    .input-row > .btn { flex: 1 1 100%; }
}

@media (min-width: 721px) {
    .bottomnav { display: none; }
}