/**
 * ai-assistant.css — „Zapytaj asystenta o ten węgiel": jasny panel ze szkła,
 * pole pytania z ikoną i przyciskiem, pigułki gotowych pytań i — po pytaniu —
 * obszar z parą pytanie–odpowiedź.
 *
 * Wymaga tokens.css, base.css i components/ring.css. Wszystko pod prefiksem
 * .dc-ai-assistant__, nic stąd nie wycieka na cudze znaczniki. Komponent
 * .dc-ring dostaje tu wyłącznie fazę i zwrot z rejestru (sekcja 2); poza
 * tym panel podąża za motywem, więc obowiązują jego wartości domyślne —
 * poświata w jasnym, refleks w ciemnym, obie podmieniane przez sam komponent.
 *
 * PANEL PODĄŻA ZA MOTYWEM, jak w calculator.css: cały tekst bierze zwykłą
 * rodzinę --dc-text, złoto tekstowe i kreska ikony --dc-accent-strong
 * (od partii 3 audytu jeden odcień na obie role — design-audit.md, C.3),
 * tła i obwódki drabinkę --dc-accent-aNN.
 *
 * DWIE REGUŁY [data-theme] I OBIE NIEKOLOROWE — układ warstw, czyli wyjątek,
 * który reguła 10 każe trzymać w pliku sekcji: poblask przy górnej krawędzi
 * istnieje TYLKO w motywie jasnym (sekcja 2), a ciemne kółko sygnetu bierze
 * w ciemnym inny stopień tej samej skali, bo --dc-surface-inverse jest tam
 * kremem (sekcje 3 i 7 — dokładnie ten sam zabieg co awatary w calculator.css).
 *
 * CO JEST TU LICZBĄ, A NIE TOKENEM (reguła 17, punkt 4 — grep ma to znaleźć
 * i te trafienia są świadome):
 *
 *   a) (nieaktualne od partii 4 audytu) CIENIE POD CIEMNYMI KÓŁKAMI SYGNETU
 *      (sekcje 3 i 7) były literałami 0 8px 20px .28 i 0 6px 16px .28.
 *      Zmierzone: cień sygnetu sięgał 18 px pod koło przy progu 8, a tytuł
 *      sekcji stoi 12 px niżej — cień leżał pod tekstem. Teraz
 *      --dc-shadow-sm (cień kontaktowy, C.4 stopień 1): ciemne koło na
 *      jasnym tle odcina się samą jasnością. To samo w calculator.css
 *      (nagłówek, punkt d). Biały pierścień 0 0 0 4px pod polem pytania
 *      zdjęty tym samym ruchem (C.4: pole ma cień wklęsły, nie obwódkę
 *      udającą głębię).
 *
 *   b) (nieaktualne od partii 4 audytu) POBLASK (sekcja 2) zdjęty:
 *      zmierzony jako maks. 4/255 różnicy i zero pikseli powyżej progu 8
 *      — koszt warstwy bez efektu (design-audit.md, C.5).
 *
 *   c) PRÓG 520 px (sekcja 9) — zmierzony warunek @media, wyprowadzenie
 *      przy samej regule.
 *
 * OBSZAR ODPOWIEDZI DOSTAJE STYL Z TEGO PLIKU, ale w znacznikach powstaje
 * dopiero po pytaniu — skrypt klonuje <template>. Dlatego selektory sekcji 7
 * nie mają odpowiednika w statycznym HTML-u sekcji i to jest w porządku.
 *
 * DWA WIDOKI, JEDEN PLIK. Narzędzie (sekcje 5–8) jest wspólne dla sekcji
 * na stronie głównej i dla okna modalnego na podstronach — te same klasy,
 * bo te same znaczniki z dc_ai_assistant_tool(). Sekcja 10 daje wyłącznie
 * opakowanie okna (pasek z sygnetem, obszar przewijania) pod prefiksem
 * .dc-ai-assistant__modal-*, tak jak calculator.css trzyma okno doradcy
 * w sekcjach 13–17. Samo okno — tło, panel, zamknięcie — to komponent
 * components/modal.css, tu niedostrajany ani jedną deklaracją.
 */

/* ==========================================================================
   1. PANEL
   .dc-ai-assistant nie ma tu żadnej deklaracji — szerokość i marginesy
   boczne daje .dc-container, pionowy oddech .dc-section, obie z base.css
   bez modyfikacji (reguła 8). Ukrycie sekcji bez JS-u załatwia [hidden]
   z base.css, więc i na to nie ma tu reguły.

   Makieta ma dwa pudełka: owijkę z obwódką o promieniu 30 i szklaną kartę
   o tym samym promieniu pod nią. Komponent .dc-ring rysuje obwódkę maską
   NA TYM SAMYM pudełku, więc pudełko jest jedno (promień 30
   -> --dc-radius-28, w jego paśmie).

   position + isolation wymagane przez ring.css. BEZ overflow: hidden —
   inaczej niż w calculator.css, bo poświata obwódki celowo wychodzi poza
   obrys panelu i przycięcie zabrałoby ją w całości.

   Padding 34/34/30 -> --dc-space-32 (pasmo 30/32/34). Tło bieli .55
   -> --dc-surface-glass-soft (.5); makieta ciemna ma w tym miejscu
   rgba(14,11,7,.58), czyli ten sam token co do setnej. Obwódka bieli .7
   mieści się w paśmie --dc-border-subtle (.65–.95). Rozmycie
   blur(40px) saturate(185%) -> --dc-blur-xl (36 px / 190%, pasmo do 44 px).
   Cień 0 24px 70px .13 -> --dc-shadow-2xl (0 24px 60px .22) złożone
   z --dc-shadow-inset-top (makieta: inset 0 1px 0 bieli .92) — reguła 13.
   ========================================================================== */

/* FAZA I ZWROT obwódki — numer 8 z rejestru w components/ring.css: start
   o 8/12 obrotu (240°), parzysty numer, czyli obrót w prawo (domyślny
   dcRingSpin, wypisany jawnie, żeby rejestr był czytelny u siebie). Liczba
   jest umowna — znaczy tylko, że żadna inna sekcja jej nie ma; nie zależy
   od miejsca sekcji na stronie (partia 5 audytu). Ten panel jest wzorcem
   obwódki dla całego motywu — i pomiar mówi, że jego obwódka NIE różni się
   od pozostałych niczym poza fazą (design-audit.md, „Po partii 5"). */
.dc-ai-assistant__panel {
  --dc-ring-spin: dcRingSpin;
  --dc-ring-delay: calc(var(--dc-duration-ring) * -8 / 12);

  position: relative;
  isolation: isolate;
  padding: var(--dc-space-32);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-28);
  background-color: var(--dc-surface-glass-soft);
  -webkit-backdrop-filter: var(--dc-blur-xl);
  backdrop-filter: var(--dc-blur-xl);
  box-shadow: var(--dc-shadow-2xl), var(--dc-shadow-inset-top);
}

/* ==========================================================================
   2. POBLASK PRZY GÓRNEJ KRAWĘDZI — zdjęty (partia 4 audytu, 2026-08-30)
   Makieta jasna kładła na górnej krawędzi szkła smugę bieli .5 -> .1
   (radial 120% 100% at 50% 0%, 32 px wysokości). Zmierzone różnicą zrzutu
   panelu z warstwą i bez: maks. 4/255, zero pikseli powyżej progu 8 —
   biel na białym szkle nie ma czego rozjaśniać. Numeracja sekcji zostaje,
   żeby odsyłacze w nagłówku pliku nie przesunęły się o jeden.
   ========================================================================== */

/* ==========================================================================
   3. NAGŁÓWEK — sygnet w ciemnym kole i tytuł
   Odstęp 13 -> --dc-space-14, odstęp pod nagłówkiem 10 -> --dc-space-10.
   ========================================================================== */

.dc-ai-assistant__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-14);
  margin-block-end: var(--dc-space-10);
}

/* Koło 40 px -> --dc-space-40, promień 16 -> --dc-radius-16, tło #161616
   -> --dc-surface-inverse. Cień i włosowe rozjaśnienie u góry — nagłówek
   pliku, punkt a; rozjaśnienie .12 przez color-mix na bieli niezmiennej
   między motywami. */
.dc-ai-assistant__mark {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  /* Promień 12 jak każda studzienka 40 px (design-audit.md, C.8) — makietowe
     16 było jedynym takim zapisem wśród dziesięciu studzienek (partia 6). */
  border-radius: var(--dc-radius-12);
  background-color: var(--dc-surface-inverse);
  box-shadow:
    var(--dc-shadow-sm),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

/* Makieta ciemna ma tu #262219, czyli ciemniejszy stopień tej samej skali,
   którą tokens.css scalił do --dc-surface. Tokenu „ciemne koło w obu
   motywach" nie ma, a --dc-surface-inverse jest w ciemnym kremem — więc
   ten sam zabieg co awatary w calculator.css: powierzchnia rozjaśniona
   o 5% bieli. */
[data-theme='dark'] .dc-ai-assistant__mark {
  background-color: color-mix(in srgb, var(--dc-surface), var(--dc-text-on-dark) 5%);
}

.dc-ai-assistant__mark img {
  display: block;
  height: auto;
}

/* clamp(22px, 2.6vw, 28px) to co do znaku --dc-display-5; domyślne h2
   z base.css bierze --dc-display-3 (sufit 40), więc rozmiar jawnie.
   Trakt -0,02em i waga 800 przychodzą z bazowego h2 bez zmiany. */
.dc-ai-assistant__heading {
  font-size: var(--dc-display-5);
}

/* ==========================================================================
   4. WPROWADZENIE
   15 px -> --dc-text-lg, interlinia 1,6 -> --dc-leading-relaxed, kolor
   #5a5a5a = --dc-text-muted, szerokość 640 -> --dc-measure-lg co do piksela,
   odstęp 22 -> --dc-space-22.
   ========================================================================== */

.dc-ai-assistant__lead {
  max-width: var(--dc-measure-lg);
  margin-block-end: var(--dc-space-22);
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-muted);
}

/* ==========================================================================
   5. POLE PYTANIA
   Ta sama rodzina pól co pole uwag doradcy (calculator.css, sekcja 16):
   ramka z ikoną, polem i przyciskiem w środku. Padding 5/18
   -> --dc-space-6 / --dc-space-18, odstęp 10 -> --dc-space-10, promień 15
   -> --dc-radius-16. Tło bieli .78 -> --dc-surface; makieta ciemna ma tam
   #1C1A17, czyli ten sam token co do znaku. Obwódka czerni .14
   -> --dc-border-line (ta sama jasność kreski na białym tle).

   Cień: makietowy inset 0 2px 5px .06 -> --dc-shadow-xs poprzedzone `inset`
   (token podstawia geometrię i kolor, słowo kluczowe zostaje przed nim),
   plus jasny rant 3 px dookoła pola — 3 -> --dc-space-4, kolor
   --dc-border-subtle. To NIE jest biel z --dc-surface: makieta jasna ma
   tu biel .6, ciemna biel .18, czyli za każdym razem jasny poblask, a nie
   kolor powierzchni (w ciemnym --dc-surface jest prawie czarne i rant by
   zniknął). --dc-border-subtle jest dokładnie tokenem „krawędź szkła"
   i ma obie te alfy (.9 / .12).

   Fokus pokazuje RAMKA (focus-within), nie pole: pole nie ma własnej
   obwódki, więc globalny pierścień z base.css wisiałby w powietrzu w jej
   środku — dlatego na polu jest wyłączony (outline: none niżej), a ramka
   dostaje złotą krawędź i 1 px złotego pierścienia pod białym rantem.
   To rozstrzygnięcie z doradcy (2026-08-29), nie nowa decyzja.
   ========================================================================== */

/* RAMKA JEST ZAPISANA RAZ, DLA DWÓCH ELEMENTÓW. Powyżej progu ramką jest
   .dc-ai-assistant__field (ikona, pole i przycisk w środku — makieta),
   poniżej progu .dc-ai-assistant__box (tylko ikona i pole; przycisk stoi
   pod ramką — sekcja 9). Element, który akurat ramką NIE jest, dostaje
   display: contents i nie tworzy pudełka, więc jego obramowanie, tło,
   padding i cień są bez skutku — nie trzeba ich zerować regułą.

   --dc-ai-assistant-narrow to jedyny nośnik informacji „jesteśmy poniżej
   progu" dla skryptu: podmienia on placeholder, a numeru progu nie da się
   z CSS-a odczytać żadną inną drogą (`@media` nie ma reprezentacji
   w CSSOM elementu). Dzięki temu 520 px stoi w pliku RAZ, w warunku
   @media, i skrypt nie ma własnej kopii do rozjechania — dokładnie ten
   problem, na który skarży się origin.css przy swoim progu. */
.dc-ai-assistant__field,
.dc-ai-assistant__box {
  --dc-ai-assistant-narrow: 0;

  display: flex;
  align-items: center;
  gap: var(--dc-space-10);
  padding: var(--dc-space-6);
  padding-inline-start: var(--dc-space-18);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-16);
  background-color: var(--dc-surface);
  box-shadow: inset var(--dc-shadow-xs);
}

.dc-ai-assistant__field:focus-within,
.dc-ai-assistant__box:focus-within {
  border-color: var(--dc-accent);
  box-shadow:
    inset var(--dc-shadow-xs),
    0 0 0 var(--dc-border) var(--dc-accent);
}

/* BŁĄD — ta sama ramka, kolor --dc-danger (design-audit.md, C.7; partia 6).
   Warunek to :has(): pole z niepoprawną wartością po interakcji użytkownika
   (:user-invalid — walidacja natywna) albo z aria-invalid="true" (skrypt).
   Stoi PO :focus-within przy tej samej specyficzności, więc błąd jest
   widoczny także w trakcie pisania. */
.dc-ai-assistant__field:has(:user-invalid, [aria-invalid='true']),
.dc-ai-assistant__box:has(:user-invalid, [aria-invalid='true']) {
  border-color: var(--dc-danger);
  box-shadow:
    inset var(--dc-shadow-xs),
    0 0 0 var(--dc-border) var(--dc-danger);
}

/* Powyżej progu owijka nie istnieje wizualnie: ikona i pole są wtedy
   bezpośrednimi elementami elastycznymi ramki, czyli układ jest co do
   piksela ten sam co przed dołożeniem owijki. */
.dc-ai-assistant__box {
  display: contents;
}

/* Iskra przy polu — kreska ikony na --dc-accent-strong, jak złoty tekst
   (design-audit.md, C.3). Kolor bierze się przez currentColor z dc_icon(). Selektor celuje w iskrę
   (bezpośrednie dziecko owijki), NIE w każdą .dc-icon w ramce: ramka mieści
   też przycisk „Zapytaj", a jego ikona `send` ma dziedziczyć --dc-on-accent
   z przycisku — poprzedni zapis `.dc-ai-assistant__field .dc-icon` trafiał
   w nią bezpośrednio i wygrywał z kolorem przycisku (design-audit.md, A.1.1
   poz. 4: render ≠ zapis). */
.dc-ai-assistant__box > .dc-icon {
  flex: none;
  color: var(--dc-accent-strong);
}

.dc-ai-assistant__submit .dc-icon {
  flex: none;
}

.dc-ai-assistant__input {
  flex: 1;
  min-width: 0;
  padding-block: var(--dc-space-12);
  border: 0;
  background: transparent;
  font-size: var(--dc-text-lg);
  color: var(--dc-text);
}

.dc-ai-assistant__input:focus-visible {
  outline: none;
}

.dc-ai-assistant__input::placeholder {
  color: var(--dc-text-subtle);
}

/* „Zapytaj": ten sam przepis co .dc-calculator__cta, .dc-hero__cta--primary
   i .dc-volume-picker__submit — warstwa components/ nie ma jeszcze
   przycisku, więc nowa sekcja nie wymyśla własnego. Wypełnienie
   --dc-gradient-cta (makieta jasna ma dokładnie ten gradient, ciemna pełne
   #C9A84C — czyli oba stany tokenu), rozmycie blur(16px) saturate(175%)
   = --dc-blur-md co do znaku, obwódka .48 -> --dc-accent-a50, cień
   0 8px 20px złota .34 -> --dc-shadow-accent (0 8px 22px .3).

   RÓŻNICE WOBEC MAKIETY, zgłoszone zamiast wprowadzone (skill, §0):
     - tekst --dc-on-accent jak w przepisie, makieta ma #7c6420
       (--dc-accent-strong) — w motywie ciemnym oba mówią to samo;
     - najazd: uniesienie o 2 px (--dc-space-2), makieta o 1 px, i bez
       rozjaśnienia gradientu ani obwódki — decyzja z hero, powtórzona
       w volume-picker i calculator.
   Padding 12/22 -> --dc-space-12 / --dc-space-22, promień 16, pismo 14
   -> --dc-text-md, odstęp przed tekstem 8 -> --dc-space-8. */
.dc-ai-assistant__submit {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  gap: var(--dc-space-8);
  padding: var(--dc-space-12) var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-accent-a50);
  /* Promień 12, nie 16 rangi 1: przycisk siedzi WEWNĄTRZ ramki pola r16
     z odstępem 7 px, więc reguła zagnieżdżenia (design-audit.md, C.9:
     wewnętrzny = zewnętrzny − odstęp = 9) daje 12 jako najbliższy token.
     Ten sam promień ma przycisk w ramce stopki i w oknie doradcy — jeden
     przypadek „ranga 1 w ramce pola", jeden promień (partia 6). */
  border-radius: var(--dc-radius-12);
  background-image: var(--dc-gradient-cta);
  font-size: var(--dc-text-md);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-none);
  white-space: nowrap;
  color: var(--dc-on-accent);
  -webkit-backdrop-filter: var(--dc-blur-md);
  backdrop-filter: var(--dc-blur-md);
  box-shadow: var(--dc-shadow-accent);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    box-shadow var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

/* Najazd: tint ciemnieje, bez uniesienia — złoto a50 podłożone pod
   półprzezroczysty gradient CTA (jak .dc-hero__cta--primary, tam pełne
   uzasadnienie). */
.dc-ai-assistant__submit:hover {
  background-color: var(--dc-accent-a50);
}

/* Kliknięcie = nacisk: zmniejszenie plus cień wciśnięcia zamiast
   rozjaśnienia od góry — jedyna transformacja dozwolona na elementach
   klikalnych (design-audit.md, C.2). .97, nie .96 — najmniejszy przycisk
   ma 42 px i przy .96 traci 1,7 px na krawędź, widać drżenie tekstu. */
.dc-ai-assistant__submit:active {
  transform: scale(0.97);
  box-shadow: var(--dc-shadow-accent), var(--dc-shadow-inset-press);
}

.dc-ai-assistant__submit:focus-visible {
  border-radius: var(--dc-radius-16);
}

/* ZABLOKOWANY i ZAJĘTY — przepis wyłączonego przycisku z volume-picker.css
   (bez złota, bez cienia, tusz przygaszony). Stoi ZA :hover i :active
   o tej samej specyficzności, więc wygrywa kolejnością: zablokowany
   przycisk nie ciemnieje i nie kurczy się pod kursorem. Dziś żaden skrypt
   nie ustawia tu tych atrybutów (ai-assistant.js ich nie zna — zgłoszone),
   stan jest gotowy na moment, w którym zacznie. */
.dc-ai-assistant__submit:disabled,
.dc-ai-assistant__submit[aria-busy='true'] {
  border-color: var(--dc-border-line);
  background-color: var(--dc-surface-sunken);
  background-image: none;
  color: var(--dc-text-subtle);
  box-shadow: none;
  transform: none;
  cursor: not-allowed;
}

/* Zajęty różni się od zablokowanego tylko kursorem: „czekaj", nie „nie
   wolno". */
.dc-ai-assistant__submit[aria-busy='true'] {
  cursor: progress;
}

/* ==========================================================================
   6. POPULARNE PYTANIA I LICZNIK
   Wiersz zawija się przy wąskim oknie (flex-wrap), jak w makiecie.
   Odstęp 9 -> --dc-space-10, odstęp od pola 14 -> --dc-space-14.
   ========================================================================== */

.dc-ai-assistant__suggested {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dc-space-10);
  margin-block-start: var(--dc-space-14);
}

/* 12,5 px -> --dc-text-sm, waga 600 = --dc-weight-medium co do liczby.
   Makietowe #9a958a to odcień, który tokens.css odrzucił przy
   --dc-text-subtle (2,63:1) i zastąpił przez #6E6A61 — token, nie makieta. */
.dc-ai-assistant__suggested-label {
  font-size: var(--dc-text-sm);
  font-weight: var(--dc-weight-medium);
  color: var(--dc-text-subtle);
}

/* Pigułka z gotowym pytaniem. Padding 8/14 -> --dc-space-8 / --dc-space-14,
   tło bieli .65 -> --dc-surface-glass (.86; makieta ciemna ma tam
   rgba(255,250,242,.05), czyli dokładnie ten token), obwódka
   rgba(228,226,220,.95) = --dc-border-line co do znaku, pismo 13
   -> --dc-text-base, kolor #3a3a3a = --dc-text-secondary, rozmycie
   blur(12px) -> --dc-blur-sm (10 px), rozjaśnienie krawędzi
   -> --dc-shadow-inset-top.

   Najazd wprost z makiety — to przycisk, więc reakcja na kursor jest
   prawdziwą obietnicą (reguła 14): pełna biel, pełny tusz, złota obwódka
   (.55 -> --dc-accent-a50). */
.dc-ai-assistant__chip {
  padding: var(--dc-space-8) var(--dc-space-14);
  border: var(--dc-border) solid var(--dc-border-line);
  border-radius: var(--dc-radius-pill);
  background-color: var(--dc-surface-glass);
  -webkit-backdrop-filter: var(--dc-blur-sm);
  backdrop-filter: var(--dc-blur-sm);
  box-shadow: var(--dc-shadow-inset-top);
  font-size: var(--dc-text-base);
  font-weight: var(--dc-weight-medium);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-secondary);
  transition:
    background-color var(--dc-duration-base) var(--dc-ease),
    border-color var(--dc-duration-base) var(--dc-ease),
    color var(--dc-duration-base) var(--dc-ease),
    transform var(--dc-duration-fast) var(--dc-ease-out);
}

.dc-ai-assistant__chip:hover {
  border-color: var(--dc-accent-a50);
  background-color: var(--dc-surface);
  color: var(--dc-text);
}

/* Kliknięcie = nacisk (pigułka wyboru, ranga 3: samo zmniejszenie).
   .97 — patrz uzasadnienie przy .dc-ai-assistant__submit:active. */
.dc-ai-assistant__chip:active {
  transform: scale(0.97);
}

.dc-ai-assistant__chip:focus-visible {
  border-radius: var(--dc-radius-pill);
}

/* Licznik pozostałych znaków — poza makietą, dołożony na życzenie
   (limit 300 znaków). Stoi na końcu wiersza pigułek, dosunięty do prawej
   krawędzi: pusty jest niewidoczny i nie zajmuje ani jednego piksela
   wysokości, więc widok bez licznika wygląda dokładnie jak makieta.
   Pismo 11 px (--dc-text-xs) i --dc-text-subtle, jak zastrzeżenie. */
.dc-ai-assistant__counter {
  margin-inline-start: auto;
  font-size: var(--dc-text-xs);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

/* ==========================================================================
   7. OBSZAR ODPOWIEDZI
   Powstaje dopiero po pytaniu — nagłówek pliku. Region na żywo (.dc-ai-
   -assistant__region) nie ma własnych deklaracji: pusty ma być zerowy,
   a wygląd niesie karta odpowiedzi w środku.

   Karta: odstęp 24 -> --dc-space-24, promień 16, padding 22
   -> --dc-space-22, tło bieli .5 przez color-mix na --dc-surface (w motywie
   ciemnym daje to podniesienie o krok nad panel, dokładnie jak makietowa
   biel .05 na ciemnym), obwódka bieli .82 -> --dc-border-subtle, cień
   0 10px 30px .06 -> --dc-shadow-lg co do geometrii, złożony
   z --dc-shadow-inset-top (reguła 13).
   ========================================================================== */

.dc-ai-assistant__answer {
  margin-block-start: var(--dc-space-24);
  padding: var(--dc-space-22);
  border: var(--dc-border) solid var(--dc-border-subtle);
  border-radius: var(--dc-radius-16);
  background-color: color-mix(in srgb, var(--dc-surface) 50%, transparent);
  box-shadow: var(--dc-shadow-lg), var(--dc-shadow-inset-top);
}

/* Wiersz: awatar i treść. Odstęp 12 -> --dc-space-12, odstęp między
   wierszami 18 -> --dc-space-18. */
.dc-ai-assistant__row {
  display: flex;
  align-items: flex-start;
  gap: var(--dc-space-12);
}

.dc-ai-assistant__row + .dc-ai-assistant__row {
  margin-block-start: var(--dc-space-18);
}

.dc-ai-assistant__column {
  flex: 1;
  min-width: 0;
}

/* Awatar 38 px -> --dc-space-40, koło -> --dc-radius-full. */
.dc-ai-assistant__avatar {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: var(--dc-space-40);
  height: var(--dc-space-40);
  border-radius: var(--dc-radius-full);
}

/* Autor pytania: złote koło z ikoną. Tło .16 -> --dc-accent-a15, obwódka
   .35 -> --dc-border-accent (.3), kreska ikony jak złoty tekst (C.3). */
.dc-ai-assistant__avatar--user {
  border: var(--dc-border) solid var(--dc-border-accent);
  background-color: var(--dc-accent-a15);
  color: var(--dc-accent-strong);
}

/* Asystent: to samo ciemne koło co w nagłówku sekcji, mniejszy cień
   (nagłówek pliku, punkt a). */
.dc-ai-assistant__avatar--bot {
  background-color: var(--dc-surface-inverse);
  box-shadow:
    var(--dc-shadow-sm),
    inset 0 var(--dc-border) 0 color-mix(in srgb, var(--dc-text-on-dark) 12%, transparent);
}

[data-theme='dark'] .dc-ai-assistant__avatar--bot {
  background-color: color-mix(in srgb, var(--dc-surface), var(--dc-text-on-dark) 5%);
}

.dc-ai-assistant__avatar img {
  display: block;
  height: auto;
}

/* Etykieta nad dymkiem: 11 px -> --dc-text-xs, waga 700, trakt .06em
   = --dc-tracking-wide co do znaku, odstęp 6 -> --dc-space-6. */
.dc-ai-assistant__label {
  margin-block-end: var(--dc-space-6);
  font-size: var(--dc-text-xs);
  font-weight: var(--dc-weight-bold);
  letter-spacing: var(--dc-tracking-wide);
  text-transform: uppercase;
  color: var(--dc-text-subtle);
}

/* Etykieta asystenta jest złota i NIESIE ZNACZENIE, więc
   --dc-accent-strong (reguła J; makieta ma #9a8230). Odstęp 8. */
.dc-ai-assistant__label--bot {
  margin-block-end: var(--dc-space-8);
  color: var(--dc-accent-strong);
}

/* Dymek pytania: szerokość z treści (inline-block), padding 11/16
   -> --dc-space-12 / --dc-space-16, promienie 4/14 -> --dc-radius-6
   / --dc-radius-16 — ostry róg po stronie autora, jak w dymkach doradcy.
   Tło .14 -> --dc-accent-a15, obwódka .26 -> --dc-border-accent, pismo
   15,5 -> --dc-text-lg, interlinia 1,4 -> --dc-leading-snug. */
.dc-ai-assistant__bubble {
  display: inline-block;
  padding: var(--dc-space-12) var(--dc-space-16);
  border: var(--dc-border) solid var(--dc-border-accent);
  border-radius: var(--dc-radius-6) var(--dc-radius-16) var(--dc-radius-16) var(--dc-radius-16);
  background-color: var(--dc-accent-a15);
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-lg);
  font-weight: var(--dc-weight-bold);
  line-height: var(--dc-leading-snug);
  color: var(--dc-text);
}

/* Odpowiedź: 15,5 -> --dc-text-lg, interlinia 1,72 -> --dc-leading-relaxed
   (1,6; górny kraniec pasma to 1,72), kolor #3a3a3a = --dc-text-secondary,
   odstęp między akapitami 12 -> --dc-space-12. Akapity robi skrypt,
   rozbijając odpowiedź po pustej linii — patrz ai-assistant.js. */
.dc-ai-assistant__text {
  font-size: var(--dc-text-lg);
  line-height: var(--dc-leading-relaxed);
  color: var(--dc-text-secondary);
}

.dc-ai-assistant__text + .dc-ai-assistant__text {
  margin-block-start: var(--dc-space-12);
}

/* ==========================================================================
   8. ZASTRZEŻENIE POD PANELEM
   12 px -> --dc-text-sm, interlinia 1,5 -> --dc-leading-normal (1,55),
   odstęp 16 -> --dc-space-16, kolor jak etykieta pigułek — token zamiast
   makietowego #9a958a.
   ========================================================================== */

.dc-ai-assistant__note {
  margin-block-start: var(--dc-space-16);
  font-size: var(--dc-text-sm);
  line-height: var(--dc-leading-normal);
  color: var(--dc-text-subtle);
}

/* Odnośnik do regulaminu: złoty tekst niosący znaczenie, więc
   --dc-accent-strong (reguła J; makieta ma #9a8230, poniżej progu przy
   tym rozmiarze). Podkreślenie makieta rysuje kreską pod tekstem w złocie
   .4 — tu przez border-block-end, żeby odstęp od tekstu nie zależał od
   kroju. Kreska na --dc-border-accent (a30), tym samym co pod odnośnikiem
   zgody w stopce: ta sama rola, ten sam zapis (partia 3; wcześniej
   color-mix na usuniętym --dc-accent-text). */
.dc-ai-assistant__terms {
  border-block-end: var(--dc-border) solid var(--dc-border-accent);
  color: var(--dc-accent-strong);
  text-decoration: none;
}

.dc-ai-assistant__terms:hover {
  border-block-end-color: var(--dc-accent-strong);
  color: var(--dc-accent-strong);
}

/* ==========================================================================
   9. UKŁAD WĄSKI — PRZYCISK POD RAMKĄ POLA

   PRÓG 520 px — JEDYNA WARTOŚĆ W TYM PLIKU SPOZA TOKENÓW POZA CIENIAMI

   Dlaczego nie token. Tak samo jak przy 1024 i 470 px w header.css,
   790 px w origin.css i 440 px w reviews.css: warunku @media nie da się
   zapisać przez var() — custom properties rozwiązują się w kaskadzie na
   elemencie, a warunek @media jest oceniany wcześniej, zanim taki element
   w ogóle istnieje.

   Skąd akurat 520. Zmierzone na żywym polu (Playwright, /styleguide,
   zwężanie okna co 1 px od 560 px w dół; rama styleguide'u dokłada sam
   outline, więc pomiar jest wierny prawdziwej stronie). Przycisk „Zapytaj"
   ma stałą szerokość 121,8 px i nie kurczy się, więc całe zwężenie zjada
   pole: przy 516 px ma ono 200,2 px, przy 515 px — 199,2 px. 515 to
   najszersze okno, w którym pole spada poniżej 200 px; zaokrąglone w górę
   do pełnej dziesiątki daje 520.

   Skąd akurat 200 px jako granica. To nie jest próg estetyczny: przy
   390 px pole miało 74 px widocznej szerokości, czyli mieściło osiem
   znaków — sekcja przestawała działać na telefonie, a nie tylko robiła
   się ciasna (decyzja Andrzeja, 2026-08-29). 200 px to szerokość, przy
   której widać początek zdania i da się je przeczytać przed wysłaniem.

   Co się zmienia poniżej progu. Ramka obejmuje wtedy WYŁĄCZNIE ikonę
   i pole (.dc-ai-assistant__box), a przycisk stoi POD nią jako osobny
   element na pełną szerokość — nie w jej środku, gdzie wyglądał, jakby
   wpadł do pola przez pomyłkę (decyzja Andrzeja, 2026-08-29). Odstęp
   między ramką a przyciskiem daje ten sam `gap`, którym rozsunięte są
   ikona i pole. Ramka zachowuje swój padding 6/18, bo nic już z niej
   nie wystaje.

   Kolejność w drzewie się nie zmienia — przycisk był i jest ostatni
   w formularzu — więc Tab prowadzi pole → przycisk niezależnie od układu.

   Zmierzone po zmianie: przy 390 px ramka ma 260 px, pole w niej 206 px
   (zamiast 74 przed wprowadzeniem progu), przycisk 260 px pod ramką.
   Przy 521 px, tuż nad progiem, pole ma 205 px i przycisk stoi w środku
   ramki — granica 200 px jest po obu stronach progu dotrzymana.
   ========================================================================== */

@media (max-width: 520px) {
  /* Sygnał dla skryptu — patrz sekcja 5. */
  .dc-ai-assistant__field {
    --dc-ai-assistant-narrow: 1;

    flex-direction: column;
    align-items: stretch;
    padding: var(--dc-space-0);
    border: 0;
    background-color: transparent;
    box-shadow: none;
  }

  /* Ramka zeszła na owijkę, więc na polu nie może zostać nic po fokusie
     (border-width jest tu zerowe, ale cień malowałby się dalej). */
  .dc-ai-assistant__field:focus-within {
    box-shadow: none;
  }

  .dc-ai-assistant__box {
    display: flex;
  }

  .dc-ai-assistant__submit {
    width: 100%;
  }
}

/* ==========================================================================
   10. WIDOK W OKNIE — pasek z sygnetem i obszar przewijania
   Nie ma makiety okna asystenta; wygląd wzorowany na oknie doradcy
   (home.html:1107 i 1117), czyli na calculator.css, sekcje 14 i 15 — to
   DRUGIE wystąpienie tego paska (reguła 18: kopia różni się od pierwowzoru
   wyłącznie prefiksem klasy; trzecie wystąpienie wydziela komponent).
   Wartości identyczne co do tokenu z tamtymi sekcjami, bez ponownego
   scalania.

   Korzeń widoku (.dc-ai-assistant__modal) jest jedynym dzieckiem panelu
   w przepływie (obwódka i przycisk zamknięcia leżą bezwzględnie). Panel ma
   84vh i overflow: hidden (modal.css), więc to korzeń musi umieć się
   skurczyć — min-height: 0 — a obszar z narzędziem przewijać.
   ========================================================================== */

.dc-ai-assistant__modal {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  min-height: 0;
}

/* Pasek: odstęp z prawej rezerwuje miejsce na przycisk zamknięcia
   komponentu (18 px od krawędzi + 40 px koła + 12 px odstępu) — modal.css
   mówi wprost, że robi to konsument. Awatar to .dc-ai-assistant__avatar--bot
   z sekcji 7, bez zmian. */
.dc-ai-assistant__modal-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: var(--dc-space-12);
  padding: var(--dc-space-16) var(--dc-space-18);
  padding-inline-end: calc(var(--dc-space-18) + var(--dc-space-40) + var(--dc-space-12));
  border-block-end: var(--dc-border) solid var(--dc-border-line);
  background-color: var(--dc-surface-glass);
}

.dc-ai-assistant__modal-identity {
  flex: 1;
  min-width: 0;
}

.dc-ai-assistant__modal-title {
  font-family: var(--dc-font-display);
  font-size: var(--dc-text-xl);
  font-weight: var(--dc-weight-black);
  line-height: var(--dc-leading-tight);
  color: var(--dc-text);
}

/* Stan „online": TEKST bierze --dc-success (token po korekcie kontrastu —
   próg 4,5:1 dotyczy tekstu), KROPKA bierze --dc-success-on-dark: jedną
   jasną zieleń dla wszystkich kropek statusu na stronie (help-cta, reviews,
   oba okna — poprawki po audycie, 2026-08-30). Kropka ma aria-hidden, jest
   dekoracją, więc próg jej nie dotyczy; makieta rysuje ją jako #4caf72
   w obu motywach, jasno. Kropka --dc-space-6 z poświatą o połowę średnicy
   na 18% TEJ SAMEJ zieleni co kropka — pełny opis przy
   .dc-calculator__chat-dot (ten sam wzorzec). */
.dc-ai-assistant__modal-status {
  display: flex;
  align-items: center;
  gap: var(--dc-space-6);
  margin-block-start: var(--dc-space-4);
  font-size: var(--dc-text-sm);
  color: var(--dc-success);
}

.dc-ai-assistant__modal-dot {
  flex: none;
  width: var(--dc-space-6);
  height: var(--dc-space-6);
  border-radius: var(--dc-radius-full);
  background-color: var(--dc-success-on-dark);
  box-shadow: 0 0 0 calc(var(--dc-space-6) / 2) color-mix(in srgb, var(--dc-success-on-dark) 18%, transparent);
}

/* Obszar z narzędziem — jedyna część okna, która się przewija. Padding
   i tło jak rozmowa doradcy (--dc-surface-sunken: o krok od powierzchni
   panelu, żeby białe pole i karta odpowiedzi nie zlewały się z tłem).
   Odstępy między polem, pigułkami, odpowiedzią i zastrzeżeniem przychodzą
   z sekcji 6–8 bez zmian — to te same elementy. */
.dc-ai-assistant__modal-body {
  flex: 1 1 auto;
  min-height: 0;
  padding: var(--dc-space-20) var(--dc-space-18);
  overflow-y: auto;
  overscroll-behavior: contain;
  background-color: var(--dc-surface-sunken);
}

/* Region z odpowiedzią jest w oknie dosuwany na widok (scrollIntoView,
   block: 'start' — ai-assistant.js). Margines przewijania równy paddingowi
   obszaru: po dosunięciu karta odpowiedzi stoi tyle samo od górnej krawędzi,
   co pole na starcie, a nie przyklejona do niej. */
.dc-ai-assistant__modal-body .dc-ai-assistant__region {
  scroll-margin-block-start: var(--dc-space-20);
}

/* ==========================================================================
   11. TODO USUNĄĆ — wyzwalacz testowy okna na /styleguide
   Sam przycisk bierze wygląd z header.css (.dc-header__ai); tu tylko
   odstęp od panelu. Znika razem z blokiem w ai-assistant.php.
   ========================================================================== */

.dc-ai-assistant__probe {
  margin-block-end: var(--dc-space-16);
}