/* trener/klient/klient.css — Panel klienta OGNIWO Voice.
   Tylko to, czego nie ma w panel.css. Reguły WYŁĄCZNIE na zmiennych warstwy 2
   (trener/tokens.css) — patrz TOKENY.md. Zakazy designu (doradca, PANEL-KLIENTA.md §4):
   brak pasteli/fioletu/błękitu, brak cieni, brak gradientów, brak animacji przejść,
   ikony tylko w jednej sekcji (nawigacja), brak wyśrodkowanych bloków tekstu,
   odstępy tylko 4/8/16/24/32 (--space-1/2/4/6/8). */

/* Bezpiecznik `hidden`: panel.css i klient.css nadają kilku klasom `display` inny niż
   `none` (`.btn` inline-flex, `.alert` grid, `.view-actions` flex) — reguła autora o tej
   samej specyficzności co domyślne UA `[hidden]{display:none}` wygrywa z `hidden`, więc
   element toggle'owany przez `el.hidden=true` zostawał widoczny. Znalezione zrzutami
   (ekran logowania nad pulpitem po zalogowaniu) — patrz auth-shell niżej dla pełnego opisu. */
.btn[hidden],
.alert[hidden],
.view-actions[hidden] {
  display: none;
}

/* ============== Ekran logowania / zmiany hasła ============== */
.auth-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-6);
  background: var(--color-bg-canvas);
}
/* `display:flex` na klasie ma tę samą specyficzność co domyślne UA `[hidden]{display:none}`
   i jako reguła autora wygrywa mimo `hidden` — bez tego nadpisania ekran logowania
   zostawał widoczny nad `.app` mimo `el.hidden = true` (znalezione zrzutami 375/1440). */
.auth-shell[hidden] {
  display: none;
}
.auth-card {
  width: 100%;
  max-width: 380px;
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-8);
}
.auth-brand {
  padding: 0 0 var(--space-6);
}
.auth-title {
  margin: 0 0 var(--space-1);
  font-size: var(--font-size-600);
  font-weight: 600;
  letter-spacing: -0.02em;
}
.auth-sub {
  margin: 0 0 var(--space-6);
  color: var(--muted);
  font-size: var(--font-size-200);
  font-weight: 400;
}
.auth-submit {
  width: 100%;
  margin-top: var(--space-2);
}
#formLogowania .field,
#formZmianyHasla .field {
  margin-bottom: var(--space-4);
}
.auth-card .alert {
  margin: 0 0 var(--space-4);
}

/* ============== Pulpit: 4 liczby, jedna dominująca ============== */
.stat-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.stat {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
}
/* D1 (doradca designu, REVIEW-1 pkt 1): JEDNA wielkość dla wszystkich kart KPI —
   dominacja przez POZYCJĘ (pierwsza karta od lewej), nie przez rozmiar. Karty
   równej wysokości (flex + min-height), etykieta zawsze jednowierszowa. */
.stat {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-2);
  min-height: 92px;
}
.stat-value {
  display: block;
  font-family: var(--og-font-family-mono);
  font-weight: 600;
  font-size: var(--font-size-700);
  letter-spacing: -0.01em;
}
.stat-label {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-100);
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
@media (max-width: 760px) {
  .stat-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ============== Karta bota (pulpit) ============== */
.bot-summary {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-6);
  align-items: center;
  justify-content: space-between;
}
.bot-summary-id b {
  font-size: var(--font-size-200);
  font-weight: 600;
}
.bot-summary-id span {
  display: block;
  color: var(--muted);
  font-size: var(--font-size-100);
  margin-top: var(--space-1);
}
.bot-summary-meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  color: var(--muted);
  font-size: var(--font-size-100);
  font-family: var(--og-font-family-mono);
}

/* ============== Wykres słupkowy (SVG, JS) ============== */
.bar-chart-wrap {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.bar-chart-wrap h2 {
  margin: 0 0 var(--space-4);
  font-size: var(--font-size-200);
  font-weight: 600;
}
.bar-chart-scroll {
  overflow-x: auto;
  overflow-y: hidden;
}
.bar-chart {
  display: block;
  height: 132px;
}
/* D2 (doradca designu, REVIEW-1 pkt 2): pomarańcz WYŁĄCZNIE akcja + nawigacja
   aktywna — słupki danych są neutralne, nie brand orange. */
.bar-chart rect {
  fill: var(--color-text-tertiary);
}
.bar-chart .oc {
  fill: var(--surface-3);
}
.bar-chart text {
  fill: var(--muted);
  font-family: var(--og-font-family-mono);
  font-size: 7px;
  text-anchor: middle;
}
.bar-chart-axis {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-100);
  font-family: var(--og-font-family-mono);
  margin-top: var(--space-2);
  min-width: max-content;
}
.bar-chart-axis span {
  white-space: nowrap;
}

/* ============== Pasek pakietu (Zużycie) ============== */
.usage-bar {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  margin-bottom: var(--space-6);
}
.usage-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
  font-family: var(--og-font-family-mono);
}
.usage-bar-top b {
  font-size: var(--font-size-600);
  font-weight: 600;
}
.usage-track {
  height: 8px;
  border-radius: var(--radius-pill);
  /* D2 + D5 (REVIEW-1 pkt 2 i 5): tor musi być WIDOCZNY na tle karty — jaśniejszy
     niż --surface-3 (za blisko tła karty), i słupek wypełnienia neutralny domyślnie
     (pomarańcz tylko akcja/nawigacja), amber dopiero >90% (ostrzeżenie realne). */
  background: var(--color-border-default);
  overflow: hidden;
}
.usage-fill {
  height: 100%;
  background: var(--color-text-tertiary);
}
.usage-fill.warn {
  background: var(--color-status-warning-fg);
}
.usage-meta {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-2);
  color: var(--muted);
  font-size: var(--font-size-100);
}

/* ============== Stany widoku (rule 7: puste/błąd/ładowanie) ============== */
.empty-state {
  padding: var(--space-8) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
}
.empty-state h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-200);
  font-weight: 600;
}
.empty-state p {
  margin: 0 0 var(--space-4);
  color: var(--muted);
}
.blad-sekcji {
  border-top: 2px solid var(--color-status-critical-fg);
  padding-top: var(--space-2);
  margin-bottom: var(--space-4);
}
.blad-sekcji p {
  margin: 0 0 var(--space-2);
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-200);
  color: var(--color-status-critical-fg);
}
.szkielet {
  display: grid;
  gap: var(--space-2);
}
.szkielet-wiersz {
  height: 14px;
  border-radius: 4px;
  background: var(--surface-2);
}

/* ============== Filtry Rozmów: Wynik jako pierwszy ============== */
.filterbar .control[data-pierwszy] {
  order: -1;
}

/* ============== Edytor promptu (Bot) ============== */
/* Licznik znaków jako NORMALNY sibling pod polem (flex column), nie
   `position:absolute` nałożony na textarea — przy wąskim viewporcie (375 px)
   textarea traci ograniczenie `max-width:65ch` (szerokość = kontener), a
   liczba wierszy tekstu potrafi sięgnąć dokładnie tam, gdzie siedział
   nałożony licznik: cyfry nachodziły na ostatni widoczny wiersz treści
   (zrzut 05-bot-formularz-375). Ta wersja nie może nachodzić na tekst
   NIEZALEŻNIE od wysokości pola/długości treści. */
.prompt-field {
  display: flex;
  flex-direction: column;
}
.prompt-field textarea {
  max-width: 65ch;
  line-height: 1.6;
}
.char-counter {
  align-self: flex-end;
  margin-top: var(--space-1);
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-100);
  color: var(--muted);
}
.char-counter.over {
  color: var(--color-status-critical-fg);
}
.rules-editor {
  display: grid;
  gap: var(--space-2);
  max-width: 65ch;
}
.rule-row {
  display: flex;
  gap: var(--space-2);
  align-items: flex-start;
}
.rule-row textarea {
  flex: 1 1 auto;
  min-height: 60px;
}
.rule-side {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex: 0 0 auto;
}
.rule-counter {
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-100);
  color: var(--muted);
  white-space: nowrap;
}

/* ============== Trener ============== */
.trener-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-6);
}
@media (min-width: 960px) {
  .trener-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  }
}
.call-status {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-weight: 600;
  margin-bottom: var(--space-2);
}
.call-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--color-status-neutral-fg);
  flex: 0 0 auto;
}
.call-dot.connecting {
  background: var(--color-status-warning-fg);
}
.call-dot.live {
  background: var(--color-signal-live);
}
.call-dot.error {
  background: var(--color-status-critical-fg);
}
.turn.active-turn {
  border: 1px solid var(--color-action-primary);
}

/* ============== Konto ============== */
.konto-grid {
  display: grid;
  gap: var(--space-6);
  max-width: 480px;
}

/* ============== Rozmowy: szczegół (drawer) ============== */
.rozmowa-detail {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: var(--space-6);
}
@media (max-width: 760px) {
  .rozmowa-detail {
    grid-template-columns: 1fr;
  }
}
.rozmowa-meta {
  display: grid;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
}
.rozmowa-meta-row {
  display: flex;
  justify-content: space-between;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--font-size-200);
}
.rozmowa-meta-row span:first-child {
  color: var(--muted);
}
.rozmowa-meta-row b {
  font-family: var(--og-font-family-mono);
  font-weight: 600;
  text-align: right;
}
.koszt-rozbicie {
  display: grid;
  gap: var(--space-1);
  margin-bottom: var(--space-4);
}
.koszt-rozbicie-row {
  display: flex;
  justify-content: space-between;
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-100);
  color: var(--muted);
}
.koszt-rozbicie-row.total {
  color: var(--color-text-primary);
  font-weight: 600;
  border-top: 1px solid var(--line-soft);
  padding-top: var(--space-1);
}
.wynik-wyjasnienie {
  font-size: var(--font-size-200);
  color: var(--muted);
  margin: var(--space-2) 0 var(--space-4);
}

/* ============== Bot: historia zmian ============== */
.historia-list {
  display: grid;
  gap: var(--space-2);
}
.historia-row {
  display: grid;
  grid-template-columns: 140px minmax(0, 1fr) auto;
  gap: var(--space-2);
  padding: var(--space-2) 0;
  border-bottom: 1px solid var(--line-soft);
  font-size: var(--font-size-200);
  align-items: baseline;
  overflow-wrap: anywhere;
}
.historia-row time {
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-100);
  color: var(--muted);
}
.historia-row .aktor {
  color: var(--muted);
  font-size: var(--font-size-100);
}

/* ============== Transkrypt (rozmowy + trener): etykieta mono + wcięcie, bez dymków ============== */
.transkrypt-linia {
  max-width: 62ch;
}
.transkrypt-linia .rola {
  display: block;
  font-family: var(--og-font-family-mono);
  font-size: var(--font-size-100);
  color: var(--muted);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.transkrypt-linia p {
  margin: var(--space-1) 0 0;
  line-height: 1.5;
}
.transkrypt-linia--rozmowca {
  padding-left: var(--space-6);
}
.transkrypt-linia--aktywna {
  border-left: 2px solid var(--color-action-primary);
  padding-left: var(--space-2);
}
.transkrypt-linia--rozmowca.transkrypt-linia--aktywna {
  padding-left: var(--space-4);
}

/* ============== Trener: scenariusz ============== */
.scenariusz-box {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-lg);
  background: var(--surface);
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.scenariusz-box h3 {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-200);
  font-weight: 600;
}
.scenariusz-box .label {
  color: var(--muted);
  font-size: var(--font-size-100);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin: var(--space-2) 0 var(--space-1);
}
.werdykt-box {
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-md);
  font-weight: 600;
  margin: var(--space-4) 0;
}
.werdykt-box.pass {
  background: var(--color-status-success-bg);
  color: var(--color-status-success-fg);
}
.werdykt-box.fail {
  background: var(--color-status-critical-bg);
  color: var(--color-status-critical-fg);
}
.kryterium-box {
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  padding: var(--space-2);
  margin: var(--space-2) 0;
  font-size: var(--font-size-200);
}
.kryterium-box b {
  display: block;
}

/* ============== Ogólne — utility, żeby JS nie pisał `style=` (§0.6) ======= */
.panel-pad {
  padding: var(--space-4);
}
.panel-stack {
  padding: var(--space-4);
  margin-top: var(--space-4);
}
.block-title {
  margin: 0 0 var(--space-2);
  font-size: var(--font-size-200);
  font-weight: 600;
}
.field-mt {
  margin-top: var(--space-4);
}
.btn-mt {
  margin-top: var(--space-2);
}
.rozmowa-audio {
  width: 100%;
  margin: var(--space-2) 0 var(--space-4);
}
.view-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-4);
}
.section-gap {
  margin-bottom: var(--space-6);
}

/* ============== D1: „Wyniki rozmów" — licznik przy etykiecie, lista wąska ============== */
.section-count {
  color: var(--muted);
  font-weight: 400;
  font-family: var(--og-font-family-mono);
}
.wyniki-rozmow .panel {
  max-width: 480px;
}

/* ============== D5: kontrast rozbicia kosztów ≥13 px, jaśniejszy neutral ============== */
.koszt-rozbicie-row {
  font-size: var(--font-size-300); /* 13px, było 11px */
  color: var(--color-text-tertiary); /* jaśniejszy niż --muted (og-neutral-300 vs 400) */
}

/* ============== D5: sticky nagłówek nieprzezroczysty (Bot i wszędzie — długie
   widoki jak Bot przewijają treść pod nim, a rgba+blur robił go czytelnym tylko
   częściowo) ============== */
.topbar {
  background: var(--color-bg-base);
  backdrop-filter: none;
}

/* ============== D5: karta logowania odseparowana od tła — o stopień jaśniejsza
   (canvas -> raised, nie tylko canvas -> base) + wyraźniejsza ramka ============== */
.auth-card {
  background: var(--color-bg-raised);
  border-color: var(--color-border-default);
}

/* ============== D4: toast u góry (nie nad nawigacją/CTA), auto-znika (JS) ============== */
.toast-stack {
  top: calc(var(--layout-topbar) + var(--space-4));
  bottom: auto;
}

/* ============== D6: filtry Rozmów zwinięte pod przycisk „Filtry" na 375 ============== */
.filtry-toggle {
  display: none;
}
@media (max-width: 760px) {
  .filtry-toggle {
    display: inline-flex;
    margin-bottom: var(--space-3);
  }
  .filtry-panel.is-collapsed {
    display: none;
  }
}

/* ============== D4: mono dla WSZYSTKICH komórek liczbowych (numer/czas/koszt),
   na 1440 i 375 — dopełnienie .mono istniejącego w panel.css ============== */
.record-card-time,
.record-card-meta .mono {
  font-family: var(--og-font-family-mono);
}

/* ============== D3: Bot — jedna szerokość kolumny ~720px (~75ch) dla WSZYSTKICH
   pól i „+ Dodaj zasadę"; metadane głos/model jako jeden wiersz opisowy ============== */
#botRoot form,
#botRoot .bot-meta-line,
#botRoot .historia-list {
  max-width: 720px;
}
.bot-meta-line {
  margin: 0 0 var(--space-6);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius-md);
  background: var(--surface);
  color: var(--muted);
  font-size: var(--font-size-200);
}
.bot-meta-line b {
  color: var(--text);
  font-weight: 600;
}
.prompt-field textarea {
  max-width: none; /* kolumna szerokości nadana przez #botRoot form */
}
.rules-editor {
  max-width: none;
}

/* ============== D3: diff słowny/liniowy, bez ---/+++/@@, ≥13px, łamanie ~80 znaków ==== */
.persona-diff {
  font-size: var(--font-size-300); /* 13px, było 11px */
  max-width: 80ch;
  line-height: 1.7;
}
.persona-diff .diff-add b,
.persona-diff .diff-del b {
  font-weight: 700;
}

/* ============== D4: „Zgłoś problem" — zwykły przycisk drugorzędny, nie hybryda
   link/przycisk (był <a class="btn">) ============== */
.btn.ghost.secondary {
  background: transparent;
}

/* ============== D4: pill w Trenerze nie ucięty — kolumna Wynik skaluje się,
   a chip nie ginie za granicą komórki (zabezpieczenie, gdy etykieta jest długa) === */
#trenerSesjeSekcja .table-wrap {
  overflow: auto;
}
#trenerSesjeSekcja .chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
}