@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&family=Anton&display=swap');
/* Konsola orkiestratora (Jarvis). Design system czajka.ai: czern, karta, limonka. Bez gradientow.
   Motyw ciemny bazowy; jasny pod [data-theme="light"]. Wybor wspolny z panelem (localStorage 'motyw').
   Ta sama czcionka co panel (Plus Jakarta Sans) importowana tutaj, zeby nie zalezec od linku w HTML. */
:root { --tlo: #0C0C0C; --karta: #1C1C1B; --karta-2: #232320; --ramka: #363634; --ramka-mocna: #4a4a46; --tekst: #F5F5F3; --drugi: #848480; --akcent: #E3F50A; --na-akcencie: #0d0d0d; --blad: #ef4444; }
:root[data-theme="light"] { --tlo: #f6f6f1; --karta: #ffffff; --karta-2: #eeeee8; --ramka: #e3e3db; --ramka-mocna: #cfcfc5; --tekst: #1a1b16; --drugi: #6e6f65; --akcent: #c6dd00; --na-akcencie: #14160a; --blad: #d6483b; }
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tlo); color: var(--tekst); font-family: 'Plus Jakarta Sans', system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 15px; line-height: 1.5; -webkit-font-smoothing: antialiased; }
/* App-shell jak w panelu: caly ekran nieruchomy, przewija sie tylko rozmowa. Zero poziomego przesuwania. */
body { overflow: hidden; display: flex; flex-direction: column; }
/* Cienkie paski przewijania zamiast systemowych szyn. */
* { scrollbar-width: thin; scrollbar-color: var(--ramka-mocna) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--ramka-mocna); border-radius: 999px; border: 3px solid transparent; background-clip: padding-box; }
/* Ikony SVG (lucide), jak w panelu. */
.ic { width: 20px; height: 20px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; display: block; flex-shrink: 0; }
a { color: var(--akcent); }
.hub-gora { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--ramka); background: var(--karta); flex-shrink: 0; flex-wrap: wrap; row-gap: 8px; }
.hub-gora > * { min-width: 0; }
.hub-logo { font-family: Anton, Impact, sans-serif; font-size: 18px; letter-spacing: .03em; color: var(--tekst); text-decoration: none; }
.spacer { flex: 1; }
.hub-stan { color: var(--drugi); font-size: 13px; max-width: 42vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-ikona { background: transparent; border: 1px solid var(--ramka); color: var(--tekst); border-radius: 10px; width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; cursor: pointer; text-decoration: none; font-size: 16px; transition: background .15s, border-color .15s, color .15s; }
.hub-ikona:hover { border-color: var(--ramka-mocna); background: var(--karta); }
.hub-ikona.active { border-color: var(--akcent); color: var(--akcent); background: color-mix(in srgb, var(--akcent) 14%, transparent); }
/* Etap 4 (sprawa #25): powrot do kompaktowej siatki sprzed etapu 3. Lewa kolumna z rozmowa
   jest wezsza i wysrodkowana, prawa zostaje w ukladzie, ale jest pusta - miejsce na agentow.
   Pusta kolumna nie ma ramki ani tla, zeby nie wygladala jak sierocy pojemnik. */
.hub-main { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(280px, .8fr); grid-template-rows: minmax(0, 1fr); gap: 16px; padding: 16px; max-width: 1280px; margin: 0 auto; width: 100%; flex: 1; min-height: 0; }
.hub-lewa { display: flex; flex-direction: column; align-items: center; gap: 12px; min-width: 0; min-height: 0; }
.hub-prawa { min-width: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 12px; }
.hub-prawa .hub-miejsce { color: var(--drugi); font-size: 11px; text-transform: uppercase; letter-spacing: .06em; }

.awatar { width: 240px; height: 240px; position: relative; flex-shrink: 0; }
.awatar svg { width: 100%; height: 100%; display: block; }
#aw-pierscien { transform-origin: 120px 120px; transition: stroke .3s, opacity .3s; }
#aw-oczy { transform-origin: 120px 115px; }
#aw-usta { transform-origin: 120px 152px; transition: height .06s linear, y .06s linear; }
.stan-bezczynny .awatar { animation: kolysanie 4s ease-in-out infinite; }
.stan-slucha #aw-pierscien { stroke: var(--akcent); }
.stan-mysli #aw-pierscien { animation: obrot 2.4s linear infinite; stroke-dasharray: 520 120; }
.stan-mysli #aw-oczy { animation: rozglada 1.6s ease-in-out infinite; }
.stan-mysli #aw-brew-l { transform: translate(6px, 2px) rotate(8deg); transform-origin: 90px 92px; }
.stan-mysli #aw-brew-p { transform: translate(-6px, 2px) rotate(-8deg); transform-origin: 150px 92px; }
.stan-czeka #aw-pierscien { animation: miganie 1.8s ease-in-out infinite; }
.stan-czeka #aw-pytanie { opacity: 1 !important; }
.stan-czeka #aw-brew-p { transform: translateY(-6px); }
.stan-blad #aw-pierscien { stroke: var(--blad); }
.stan-mowi #aw-pierscien { opacity: 1; }
#aw-brew-l, #aw-brew-p { transition: transform .3s ease; }
@keyframes kolysanie { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(1px); } }
@keyframes obrot { to { transform: rotate(360deg); } }
@keyframes rozglada { 0%, 100% { transform: translateX(-6px); } 50% { transform: translateX(6px); } }
@keyframes miganie { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

.hub-rozmowa { width: 100%; flex: 1; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 8px; padding: 4px; scrollbar-width: none; -ms-overflow-style: none; }
/* Sprawa #25: przewijanie zostaje, znika tylko widoczny pasek przy rozmowie (nie ruszamy pozostalych pasków). */
.hub-rozmowa::-webkit-scrollbar { width: 0; height: 0; display: none; }
.hub-rozmowa .m { padding: 11px 14px; border-radius: 16px; font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-wrap: break-word; max-width: 85%; }
.hub-rozmowa .m.user { align-self: flex-end; background: var(--akcent); color: var(--na-akcencie); border: 0; border-bottom-right-radius: 5px; font-weight: 500; }
.hub-rozmowa .m.hub { align-self: flex-start; background: var(--karta); border: 1px solid var(--ramka); border-bottom-left-radius: 5px; }
/* Markdown w odpowiedzi agenta - jak w glownym czacie (akapity, listy, kod, tabele, linki). */
.hub-rozmowa .m.hub p { margin: 0 0 8px; }
.hub-rozmowa .m.hub p:last-child { margin-bottom: 0; }
.hub-rozmowa .m.hub h3, .hub-rozmowa .m.hub h4, .hub-rozmowa .m.hub h5 { margin: 10px 0 6px; line-height: 1.25; }
.hub-rozmowa .m.hub h3 { font-size: 17px; } .hub-rozmowa .m.hub h4 { font-size: 16px; } .hub-rozmowa .m.hub h5 { font-size: 15px; }
.hub-rozmowa .m.hub ul, .hub-rozmowa .m.hub ol { margin: 4px 0 8px; padding-left: 22px; }
.hub-rozmowa .m.hub li { margin: 2px 0; }
.hub-rozmowa .m.hub strong { font-weight: 700; }
.hub-rozmowa .m.hub a { color: var(--akcent); }
.hub-rozmowa .m.hub code { font-family: ui-monospace, Consolas, monospace; font-size: 13px; background: rgba(127,127,127,.18); padding: 1px 5px; border-radius: 5px; }
.hub-rozmowa .m.hub pre { background: rgba(0,0,0,.35); border: 1px solid var(--ramka); border-radius: 8px; padding: 10px 12px; overflow-x: auto; margin: 6px 0 10px; }
.hub-rozmowa .m.hub pre code { background: none; padding: 0; }
.hub-rozmowa .m.hub table { border-collapse: collapse; margin: 6px 0; font-size: 13px; display: block; overflow-x: auto; max-width: 100%; }
.hub-rozmowa .m.hub th, .hub-rozmowa .m.hub td { border: 1px solid var(--ramka); padding: 4px 8px; text-align: left; }
.hub-rozmowa .m.hub .linki-przyciski { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-rozmowa .m.status { align-self: flex-start; color: var(--drugi); font-style: italic; font-size: 13px; background: transparent; }
.hub-form { display: flex; gap: 8px; width: 100%; max-width: 720px; align-items: flex-end; flex-shrink: 0; }
/* Etap 4 (sprawa #25): pole rosnie z tekstem do trzech linii, potem przewija w srodku.
   Wysokosc liczy JS (dopasujWysokoscHub), tak samo jak dopasujWysokosc w glownym czacie. */
.hub-form textarea { flex: 1; min-width: 0; background: var(--karta); border: 1px solid var(--ramka); border-radius: 16px; padding: 13px 16px; color: var(--tekst); font-family: inherit; font-size: 15px; line-height: 1.4; outline: none; resize: none; max-height: 120px; overflow-y: auto; scrollbar-width: none; -ms-overflow-style: none; }
.hub-form textarea::-webkit-scrollbar { width: 0; height: 0; display: none; }
.hub-form textarea:focus { border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 25%, transparent); }
/* Przyciski composera: kwadratowe, z ikona SVG. Wyslij i mikrofon limonkowe, reszta wtopiona. */
/* Pole pisania 1:1 jak w glownym czacie panelu (#form-chat): tekst na gorze na cala szerokosc,
   pod nim pasek narzedzi, wszystko w jednym zaokraglonym kontenerze; wyslij limonkowy. */
.hub-form { flex-direction: column; align-items: stretch; gap: 2px; background: var(--karta-2);
  border: 1px solid var(--ramka); border-radius: 20px; padding: 8px 10px 6px; }
.hub-form:focus-within { border-color: var(--akcent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--akcent) 25%, transparent); }
.hub-form textarea { background: transparent; border: 0; border-radius: 0; padding: 4px 4px 2px; min-height: 26px; max-height: 140px; line-height: 1.45; }
.hub-form textarea:focus { border: 0; box-shadow: none; }
.hub-form .composer-pasek { display: flex; align-items: center; gap: 2px; }
.hub-form .composer-spacer { flex: 1; }
.hub-form .hub-spinacz, .hub-form .hub-mic, .hub-form .hub-live { width: 38px; height: 38px; padding: 0; display: grid; place-items: center;
  border: 0; border-radius: 11px; background: transparent; color: var(--drugi); cursor: pointer; flex-shrink: 0; transition: background .15s, color .15s; }
.hub-form .hub-spinacz:hover, .hub-form .hub-mic:hover, .hub-form .hub-live:hover { background: var(--karta); color: var(--tekst); border-color: transparent; }
.hub-form .hub-wyslij { width: 40px; height: 40px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 12px;
  background: var(--akcent); color: var(--na-akcencie); cursor: pointer; flex-shrink: 0; }
.hub-form .hub-wyslij:hover { background: var(--akcent); filter: brightness(.94); }
/* Rozmowa: odstepy i marginesy jak w panelu (gap 10px, margines boczny 14px); markdown bez pre-wrap,
   inaczej akapity dostaja podwojne odstepy. */
.hub-rozmowa { gap: 10px; padding: 4px 2px; }
.hub-rozmowa .m.hub { white-space: normal; }
@media (max-width: 860px) { .hub-main { padding: 12px 14px; } }
/* Aparat: okno z podgladem kamery (laptop). Na telefonie otwiera sie aparat systemowy, okno nie jest potrzebne. */
.hub-aparat-okno { position: fixed; inset: 0; background: rgba(0, 0, 0, .72); display: flex; align-items: center; justify-content: center; z-index: 60; }
.hub-aparat-okno.ukryta { display: none; }
.hub-aparat-karta { background: var(--karta); border: 1px solid var(--ramka); border-radius: 14px; padding: 14px; max-width: 92vw; }
.hub-aparat-karta video { display: block; width: min(720px, 88vw); max-height: 70vh; border-radius: 10px; background: #000; }
.hub-aparat-przyciski { display: flex; gap: 10px; justify-content: center; margin-top: 12px; }
.hub-aparat-przyciski button { border: 1px solid var(--ramka); background: var(--karta); color: var(--tekst); border-radius: 8px; padding: 10px 16px; cursor: pointer; font-size: 15px; }
.hub-aparat-przyciski #hub-aparat-zrob { background: var(--akcent); color: var(--na-akcencie); border: 0; font-weight: 600; }

/* Zalaczniki czekajace na wyslanie - te same chipy co w glownym czacie, w kolorach konsoli. */
.hub-zalaczniki { display: flex; flex-wrap: wrap; gap: 8px; width: 100%; max-width: 720px; padding: 0 4px; }
.hub-zalaczniki.ukryta { display: none; }
.hub-zalaczniki .zal-chip { display: inline-flex; align-items: center; gap: 8px; max-width: 260px; background: var(--karta); border: 1px solid var(--ramka); border-radius: 8px; padding: 6px 10px; font-size: 12px; color: var(--tekst); }
.hub-zalaczniki .zal-nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-zalaczniki .zal-x { cursor: pointer; color: var(--drugi); font-size: 14px; line-height: 1; }
.hub-zalaczniki .zal-x:hover { color: var(--blad); }
.hub-mic.nagrywa { background: var(--blad); color: var(--tekst); }
.hub-mic.pracuje { background: var(--ramka); color: var(--tekst); }
@media (max-width: 860px) {
  .hub-main { grid-template-columns: 1fr; padding: 12px; }
  .hub-prawa { display: none; }
  /* Awatar kompaktowy, zeby zostawic miejsce na rozmowe (jak jeden ekran w panelu). */
  .awatar { width: 132px; height: 132px; }
}

/* Etap 1b: slash-komendy, pliki do pobrania, zrzuty w rozmowie. */
#hub-slash { position: fixed; max-height: 40vh; overflow-y: auto; background: var(--karta); border: 1px solid var(--ramka); border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.45); z-index: 60; font-size: 14px; }
#hub-slash.ukryta { display: none; }
#hub-slash .slash-poz { padding: 7px 12px; cursor: pointer; display: flex; gap: 10px; align-items: baseline; }
#hub-slash .slash-poz b { color: var(--akcent); font-weight: 600; white-space: nowrap; }
#hub-slash .slash-poz span { color: var(--drugi); font-size: 13px; }
#hub-slash .slash-poz.aktywna, #hub-slash .slash-poz:hover { background: rgba(227,245,10,.12); }
#hub-slash .slash-poz.aktywna { box-shadow: inset 2px 0 0 var(--akcent); }
.hub-rozmowa .m.status .hub-plik { display: inline-block; margin: 2px 6px 2px 0; padding: 4px 10px; border: 1px solid var(--ramka); border-radius: 8px; color: var(--akcent); text-decoration: none; font-size: 12px; font-style: normal; }
.hub-rozmowa .m.status .hub-plik:hover { border-color: var(--akcent); background: rgba(227,245,10,.08); }
.hub-rozmowa .m.status img.hub-zrzut { display: block; width: 100%; max-width: 100%; height: auto; max-height: 46vh; object-fit: contain; object-position: left top; border: 1px solid var(--ramka); border-radius: 10px; }
.hub-rozmowa .m.status:has(img.hub-zrzut) { max-width: 100%; width: 100%; padding: 0; }
/* Stan "mowi": lekkie unoszenie brwi co kilka sekund, zeby twarz nie byla martwa. */
.stan-mowi #aw-brwi { animation: brwi-mowa 6s ease-in-out infinite; }
@keyframes brwi-mowa {
  0%, 74%, 100% { transform: translateY(0); }
  80% { transform: translateY(-3px); }
  88% { transform: translateY(-2px); }
}

/* Etap 2 (sprawa #25): przycisk "glos na zywo" obok mikrofonu. Nieaktywny wtapia sie w karte,
   aktywny dostaje pulsujacy pierscien akcentu, a faza (slucham / mysle / mowie) zmienia kolor. */
.hub-live { background: var(--karta); border: 1px solid var(--ramka); color: var(--drugi); border-radius: 8px; padding: 11px 13px; cursor: pointer; display: flex; align-items: center; justify-content: center; line-height: 0; transition: color .2s, border-color .2s, background .2s; }
.hub-live:hover { color: var(--akcent); border-color: var(--akcent); }
.hub-live.wlaczony { color: var(--akcent); border-color: var(--akcent); background: rgba(227,245,10,.10); animation: live-puls 1.8s ease-out infinite; }
.hub-live.wlaczony[data-faza=slucha] { animation-duration: 1.2s; }
.hub-live.wlaczony[data-faza=mysli] { color: var(--tekst); border-color: var(--drugi); animation: none; box-shadow: none; }
.hub-live.wlaczony[data-faza=mowi] { background: var(--akcent); color: var(--na-akcencie); animation-duration: .9s; }
/* ZYWY GLOS (OpenAI Realtime). Przycisk jest ten sam co tryb live, wiec musi dac sie odroznic:
   podczas laczenia przygasa, a gdy stoi sesja Realtime - ma obwodke w kolorze akcentu. */
.hub-live.laczy { opacity: .5; pointer-events: none; }
.hub-live.realtime.wlaczony { box-shadow: 0 0 0 1px var(--akcent) inset; }
/* Wskaznik platnej sesji w pasku gornym. Czerwony i z licznikiem, zeby nikt nie zostawil
   otwartego mikrofonu na godzine, nie zauwazywszy. */
.hub-rt { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600;
  color: var(--blad); border: 1px solid var(--blad); border-radius: 999px; padding: 3px 9px;
  letter-spacing: .02em; white-space: nowrap; animation: rt-puls 1.6s ease-in-out infinite; }
@keyframes rt-puls { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
/* Musi byc regula laczona: .hub-rt stoi nizej niz .ukryta, wiec sam display:none by nie wygral. */
.hub-rt.ukryta { display: none; }
/* Transkrypcja na zywo: to jeszcze nie jest wyslana wiadomosc, tylko podglad tego, co system slyszy. */
.hub-rozmowa .m.user.na-zywo { background: transparent; border: 1px dashed var(--akcent); color: var(--drugi); font-style: italic; }
@keyframes live-puls {
  0% { box-shadow: 0 0 0 0 rgba(227,245,10,.45); }
  70% { box-shadow: 0 0 0 10px rgba(227,245,10,0); }
  100% { box-shadow: 0 0 0 0 rgba(227,245,10,0); }
}

/* Sprawa #25: wiadomosc napisana w trakcie odpowiedzi czeka w kolejce. Dymek jest przygaszony
   (kolor drugorzedny), ma adnotacje "wysle sie po odpowiedzi" i krzyzyk do wycofania. */
.hub-rozmowa .m.user.w-kolejce { position: relative; background: transparent; border: 1px dashed var(--ramka); color: var(--drugi); padding-right: 26px; }
.hub-rozmowa .m.user.w-kolejce .kolejka-info { display: block; margin-top: 4px; font-size: 11px; font-style: italic; color: var(--drugi); }
.hub-rozmowa .kolejka-usun { position: absolute; top: 2px; right: 4px; background: transparent; border: 0; color: var(--drugi); font-size: 14px; line-height: 1; cursor: pointer; padding: 2px 4px; }
.hub-rozmowa .kolejka-usun:hover { color: var(--blad); }

/* Sprawa #25 (konsola): wybor modelu w pasku, stan wznawiania polaczenia i przycisk "na dol".
   Selektor jest dyskretny - wtapia sie w pasek, akcent dostaje dopiero przy najechaniu i fokusie.
   Prawa kolumna zostaje pusta (miejsce na agentow), dlatego wszystko siedzi w gorze ekranu. */
.hub-model { background: var(--karta); border: 1px solid var(--ramka); color: var(--tekst); border-radius: 8px; padding: 5px 8px; font-family: inherit; font-size: 12px; line-height: 1.2; cursor: pointer; outline: none; max-width: 130px; }
.hub-model:hover { border-color: var(--akcent); color: var(--akcent); }
.hub-model:focus { border-color: var(--akcent); }
.hub-model option { background: var(--karta); color: var(--tekst); }
.hub-polaczenie { color: var(--drugi); font-size: 12px; font-style: italic; white-space: nowrap; }
.hub-polaczenie.ukryta { display: none; }

/* Rozmowa siedzi w kontenerze, zeby przycisk "na dol" mogl wisiec nad jej dolna krawedzia. */
.hub-rozmowa-box { position: relative; width: 100%; max-width: 720px; flex: 1; min-height: 0; display: flex; flex-direction: column; }
.hub-nadol { position: absolute; right: 10px; bottom: 8px; background: var(--karta); border: 1px solid var(--ramka); color: var(--akcent); border-radius: 999px; padding: 4px 12px; font-family: inherit; font-size: 12px; cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.45); }
.hub-nadol:hover { border-color: var(--akcent); }
.hub-nadol.ukryta { display: none; }

/* ZYWY PODGLAD DZIALAN AGENTA (sprawa #26): rozwijane kroki w strumieniu rozmowy. Wpis jest
   domyslnie zwiniety do jednej linii (ikona + etykieta + stan), zeby rozmowa zostala rozmowa,
   a nie logiem; klik rozwija wejscie i skrot wyniku. Wszystkie kolory ida z systemu (karta,
   ramka, var(--akcent)), wiec konsola Martyny dostaje swoj turkus bez ani jednej dodatkowej
   reguly w martyna.css - tam, gdzie hub.css ma limonke wpisana na sztywno w rgba(), trzeba by
   ja bylo powtarzac, i wlasnie dlatego tutaj jej nie ma. */
.hub-rozmowa .m.krok { align-self: stretch; width: 100%; max-width: 100%; padding: 0; background: transparent; border: 0; }
.hub-rozmowa .m.krok .krok-glowa { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--karta); border: 1px solid var(--ramka); border-radius: 10px; padding: 6px 10px; color: var(--drugi); font-family: inherit; font-size: 12.5px; line-height: 1.3; text-align: left; cursor: pointer; }
.hub-rozmowa .m.krok .krok-glowa:hover { border-color: var(--akcent); color: var(--tekst); }
.hub-rozmowa .m.krok .krok-etykieta { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hub-rozmowa .m.krok .krok-stan { flex: none; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: var(--drugi); }
.hub-rozmowa .m.krok .krok-ikona { flex: none; box-sizing: border-box; width: 13px; height: 13px; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; line-height: 1; }
/* Trwa: krecacy sie pierscien w akcencie. Gotowe: ptaszek w akcencie. Blad: czerwien. */
.hub-rozmowa .m.krok.trwa .krok-ikona { border: 2px solid var(--ramka); border-top-color: var(--akcent); border-radius: 50%; animation: krok-obrot .8s linear infinite; }
.hub-rozmowa .m.krok.gotowe .krok-ikona, .hub-rozmowa .m.krok.gotowe .krok-stan { color: var(--akcent); }
.hub-rozmowa .m.krok.blad .krok-ikona, .hub-rozmowa .m.krok.blad .krok-stan { color: var(--blad); }
.hub-rozmowa .m.krok.blad .krok-glowa { border-color: var(--blad); }
@keyframes krok-obrot { to { transform: rotate(360deg); } }
.hub-rozmowa .m.krok .krok-szczegoly { margin-top: 4px; padding: 8px 10px; background: rgba(255,255,255,.03); border: 1px solid var(--ramka); border-radius: 10px; }
.hub-rozmowa .m.krok .krok-szczegoly.ukryta { display: none; }
.hub-rozmowa .m.krok .krok-sekcja + .krok-sekcja { margin-top: 8px; }
.hub-rozmowa .m.krok .krok-sekcja b { display: block; font-size: 10px; text-transform: uppercase; letter-spacing: .07em; color: var(--drugi); font-weight: 600; margin-bottom: 3px; }
.hub-rozmowa .m.krok .krok-sekcja pre { margin: 0; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 11.5px; line-height: 1.45; color: var(--tekst); white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow-y: auto; }