:root {
  --tlo: #0f1110;
  --tlo-2: #161917;
  --tlo-3: #1e221f;
  --linia: #2a2f2b;
  --tekst: #e8ece9;
  --tekst-2: #9aa39c;
  --akcent: #c6f24e;
  --akcent-tekst: #11140c;
  --blad: #ff7a6b;
  --r: 14px;
  --gora-h: 56px;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Ubuntu, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html, body { margin: 0; height: 100%; background: var(--tlo); color: var(--tekst); }
body { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; }
button, input, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
[hidden] { display: none !important; }

.logo { display: flex; align-items: center; gap: 8px; font-weight: 650; letter-spacing: .2px; }
.kropka { width: 10px; height: 10px; border-radius: 50%; background: var(--akcent); box-shadow: 0 0 12px var(--akcent); }

.przycisk-glowny { background: var(--akcent); color: var(--akcent-tekst); border: 0; border-radius: 10px;
  padding: 10px 16px; font-weight: 650; }
.przycisk-glowny:disabled { opacity: .45; cursor: default; }
.przycisk-drugi { background: var(--tlo-3); border: 1px solid var(--linia); border-radius: 10px; padding: 8px 12px; }
.przycisk-stop { background: transparent; color: var(--blad); border: 1px solid var(--blad); border-radius: 10px; padding: 10px 16px; font-weight: 650; }
.ikona { background: transparent; border: 0; width: 40px; height: 40px; border-radius: 10px; font-size: 18px; color: var(--tekst-2); }
.ikona:hover { background: var(--tlo-3); color: var(--tekst); }
:focus-visible { outline: 2px solid var(--akcent); outline-offset: 2px; }

/* logowanie */
.logowanie { align-items: center; justify-content: center; padding: 16px; }
.karta-logowania { width: 100%; max-width: 360px; background: var(--tlo-2); border: 1px solid var(--linia);
  border-radius: 18px; padding: 28px 24px; display: grid; gap: 22px; }
.karta-logowania .logo { font-size: 20px; }
.karta-logowania form { display: grid; gap: 10px; }
.karta-logowania label { color: var(--tekst-2); font-size: 14px; }
.karta-logowania input { background: var(--tlo); border: 1px solid var(--linia); border-radius: 10px; padding: 12px; font-size: 16px; }
.komunikat { color: var(--blad); margin: 0; font-size: 14px; }

/* górny pasek */
.gora { height: var(--gora-h); flex: none; display: flex; align-items: center; gap: 8px; padding: 0 8px 0 4px;
  border-bottom: 1px solid var(--linia); background: var(--tlo); padding-top: env(safe-area-inset-top); }
.zakladki { margin-left: auto; display: flex; gap: 4px; background: var(--tlo-2); border-radius: 10px; padding: 3px; }
.zakladki button { background: transparent; border: 0; border-radius: 8px; padding: 6px 10px; color: var(--tekst-2); font-size: 14px; }
.zakladki button.aktywna { background: var(--tlo-3); color: var(--tekst); }
.wyloguj { margin: 0; }

.uklad { flex: 1; display: flex; min-height: 0; position: relative; }

/* rozmowy */
.panel-rozmow { width: 280px; flex: none; border-right: 1px solid var(--linia); padding: 12px; display: flex;
  flex-direction: column; gap: 12px; background: var(--tlo); overflow: hidden; }
.lista { list-style: none; margin: 0; padding: 0; overflow-y: auto; display: grid; gap: 2px; align-content: start; }
.lista li { display: flex; align-items: center; border-radius: 10px; }
.lista li button.pozycja { flex: 1; text-align: left; background: transparent; border: 0; padding: 10px; border-radius: 10px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--tekst-2); }
.lista li.aktywna button.pozycja, .lista li button.pozycja:hover { background: var(--tlo-2); color: var(--tekst); }
.lista li .usun { opacity: 0; width: 32px; height: 32px; font-size: 14px; }
.lista li:hover .usun, .lista li.aktywna .usun { opacity: 1; }
.zaslona { position: absolute; inset: 0; background: #0009; z-index: 5; }

/* czat */
.widok { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.wiadomosci { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.wiadomosci > * { max-width: 760px; width: 100%; margin: 0 auto; }
.powitanie { margin-top: 12vh !important; color: var(--tekst-2); }
.powitanie h1 { color: var(--tekst); font-size: 26px; margin: 0 0 8px; }
.wiad { line-height: 1.55; overflow-wrap: anywhere; }
.wiad.user { background: var(--tlo-3); border-radius: var(--r) var(--r) 4px var(--r); padding: 10px 14px;
  width: auto; max-width: min(85%, 640px); margin-right: 0; margin-left: auto; white-space: pre-wrap; }
.wiad.assistant p { margin: 0 0 .7em; }
.wiad.assistant p:last-child { margin-bottom: 0; }
.wiad.assistant h1, .wiad.assistant h2, .wiad.assistant h3 { font-size: 1.05em; margin: 1em 0 .4em; }
.wiad.assistant ul, .wiad.assistant ol { margin: 0 0 .7em; padding-left: 1.3em; }
.wiad.assistant a { color: var(--akcent); }
.wiad.assistant code { background: var(--tlo-3); padding: 1px 5px; border-radius: 5px; font-size: .92em; }
.wiad.assistant pre { background: var(--tlo-2); border: 1px solid var(--linia); padding: 10px; border-radius: 10px; overflow-x: auto; }
.wiad.assistant pre code { background: none; padding: 0; }
.wiad.assistant table { border-collapse: collapse; display: block; overflow-x: auto; margin-bottom: .7em; }
.wiad.assistant td, .wiad.assistant th { border: 1px solid var(--linia); padding: 4px 8px; }
.wiad.error { color: var(--blad); border-left: 3px solid var(--blad); padding: 6px 12px; background: #ff7a6b12; border-radius: 6px; }
.kursor::after { content: "▍"; color: var(--akcent); animation: miganie 1s steps(2) infinite; }
@keyframes miganie { 50% { opacity: 0; } }
.status { font-size: 13px; color: var(--tekst-2); padding: 0 16px 6px; max-width: 792px; width: 100%; margin: 0 auto; }
.status::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--akcent);
  margin-right: 8px; animation: miganie 1s infinite; }

.pisanie { display: flex; gap: 8px; align-items: flex-end; padding: 10px 12px calc(10px + env(safe-area-inset-bottom));
  border-top: 1px solid var(--linia); max-width: 792px; width: 100%; margin: 0 auto; }
.pisanie textarea { flex: 1; resize: none; background: var(--tlo-2); border: 1px solid var(--linia); border-radius: 12px;
  padding: 10px 12px; max-height: 40vh; font-size: 16px; line-height: 1.4; }

/* drugi mózg */
.mozg { flex: 1; display: flex; min-height: 0; }
.mozg-lista { width: 280px; flex: none; border-right: 1px solid var(--linia); padding: 12px; display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.nowy-plik { display: flex; gap: 6px; }
.nowy-plik input { flex: 1; min-width: 0; background: var(--tlo-2); border: 1px solid var(--linia); border-radius: 10px; padding: 8px 10px; }
.mozg-edytor { flex: 1; display: flex; flex-direction: column; min-width: 0; padding: 12px; gap: 8px; }
.pasek-edytora { display: flex; align-items: center; gap: 8px; }
.nazwa-pliku { flex: 1; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#edytor { flex: 1; resize: none; background: var(--tlo-2); border: 1px solid var(--linia); border-radius: 12px; padding: 12px;
  font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 14px; line-height: 1.5; }
.info { margin: 0; font-size: 13px; color: var(--tekst-2); min-height: 1.2em; }
.tylko-mobile { display: none; }

@media (max-width: 760px) {
  .panel-rozmow { position: absolute; z-index: 6; top: 0; bottom: 0; left: 0; transform: translateX(-100%);
    transition: transform .2s ease; width: 84%; max-width: 320px; }
  .panel-rozmow.otwarty { transform: none; }
  .logo { font-size: 15px; }
  .mozg-lista { width: 100%; border-right: 0; }
  .mozg.edycja .mozg-lista { display: none; }
  .mozg:not(.edycja) .mozg-edytor { display: none; }
  .tylko-mobile { display: inline-block; }
  .lista li .usun { opacity: 1; }
}
@media (min-width: 761px) { #menu { display: none; } }

/* ---------- dashboard „Start” (układ A) ---------- */
.ukryte { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
.start { overflow-y: auto; }
.start-kolumny { display: flex; flex-wrap: wrap; gap: 20px; padding: 16px; max-width: 1100px; width: 100%; margin: 0 auto; box-sizing: border-box; }
.start-lewa { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.start-prawa { flex: 1 1 280px; min-width: 0; }
.data-dzis { font-size: 13px; color: var(--tekst-2); }
.powitanie-start h1 { margin: 2px 0 0; font-size: 24px; }
.komenda { display: flex; gap: 8px; }
.komenda input { flex: 1; min-width: 0; height: 48px; box-sizing: border-box; background: var(--tlo-2); border: 1px solid var(--linia);
  border-radius: 14px; padding: 0 14px; font-size: 16px; }
.przycisk-ikona { width: 48px; height: 48px; flex: none; border-radius: 14px; border: 0; background: var(--akcent); color: var(--akcent-tekst);
  display: flex; align-items: center; justify-content: center; font-size: 18px; }
.przycisk-ikona:disabled { opacity: .5; }
#komenda-wyslij { background: var(--tlo-3); color: var(--tekst); }
#mikrofon.slucha { background: var(--blad); color: #fff; animation: miganie 1s infinite; }
.komenda-status { font-size: 13px; color: var(--tekst-2); }
.wybor-typu { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; font-size: 14px; color: var(--tekst-2); }
.polecenia { display: flex; gap: 8px; flex-wrap: wrap; }
.chip { height: 36px; border-radius: 18px; border: 1px solid var(--linia); background: var(--tlo-2); padding: 0 14px; font-size: 13px; }
.chip-dodaj { border-style: dashed; background: transparent; color: var(--tekst-2); }
.karta-przeglad { background: var(--tlo-2); border: 1px solid #3a4a1f; border-radius: 16px; padding: 14px; display: flex; flex-direction: column; gap: 10px; }
.karta-przeglad h2, .sekcja-zadania h2 { margin: 0; font-size: 15px; font-weight: 600; }
.licznik { background: var(--akcent); color: var(--akcent-tekst); border-radius: 10px; padding: 1px 8px; font-size: 12px; margin-left: 6px; }
.propozycja { display: flex; flex-direction: column; gap: 4px; padding: 8px 0; border-top: 1px solid var(--linia); }
.propozycja:first-child { border-top: 0; padding-top: 0; }
.propozycja-zrodlo { font-size: 12px; color: var(--tekst-2); }
.propozycja-tresc { font-size: 14px; white-space: pre-wrap; overflow-wrap: anywhere; }
.propozycja-akcje { display: flex; gap: 8px; margin-top: 4px; flex-wrap: wrap; }
.propozycja-akcje button { height: 36px; padding: 0 12px; font-size: 13px; }
.naglowek-sekcji { display: flex; align-items: center; }
.naglowek-sekcji button { margin-left: auto; width: 44px; height: 34px; font-size: 18px; padding: 0; }
.zadanie-form { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0; }
.zadanie-form input { flex: 1 1 180px; min-width: 0; height: 42px; box-sizing: border-box; background: var(--tlo-2); border: 1px solid var(--linia); border-radius: 10px; padding: 0 10px; }
.zadanie-form input[type=date] { flex: 0 1 160px; color-scheme: dark; }
.zadania-lista { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.zadanie label { display: flex; gap: 12px; align-items: center; padding: 10px 4px; font-size: 15px; cursor: pointer; border-bottom: 1px solid #1a1d1b; }
.zadanie input { width: 22px; height: 22px; flex: none; accent-color: var(--akcent); }
.zadanie-tresc { flex: 1; overflow-wrap: anywhere; }
.zadanie-termin { font-size: 12px; color: var(--tekst-2); flex: none; }
.stan-zalegle .zadanie-termin { color: var(--blad); }
.stan-dzis .zadanie-termin { color: var(--akcent); }
.stan-zrobione .zadanie-tresc { text-decoration: line-through; color: #6c746e; }
.kafelki { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.kafelek { background: var(--tlo-2); border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 4px; }
.kafelek span { font-size: 12px; color: var(--tekst-2); }
.kafelek b { font-size: 14px; font-weight: 500; color: #6c746e; }
.pasek-cofnij { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(18px + env(safe-area-inset-bottom)); z-index: 20;
  background: var(--tlo-3); border: 1px solid var(--linia); border-radius: 12px; padding: 10px 12px 10px 16px; display: flex; gap: 14px;
  align-items: center; max-width: calc(100% - 32px); box-shadow: 0 8px 24px #0008; font-size: 14px; }
.pasek-cofnij span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pasek-cofnij button { background: none; border: 0; color: var(--akcent); font-weight: 650; padding: 6px; }
.okno { background: var(--tlo-2); color: var(--tekst); border: 1px solid var(--linia); border-radius: 16px; padding: 18px; width: min(420px, calc(100% - 32px)); }
.okno::backdrop { background: #000a; }
.okno h2 { margin: 0 0 12px; font-size: 17px; }
.okno form { display: flex; flex-direction: column; gap: 8px; }
.okno input, .okno textarea { background: var(--tlo); border: 1px solid var(--linia); border-radius: 10px; padding: 10px; font-size: 16px; }
.etykieta { font-size: 13px; color: var(--tekst-2); margin-top: 4px; }
.okno-przyciski { display: flex; flex-direction: row-reverse; gap: 8px; justify-content: flex-start; margin-top: 10px; }
.karta-logowania input#kod { letter-spacing: 3px; }
@media (max-width: 760px) {
  .start-kolumny { padding: 12px; }
  .zakladki button { padding: 6px 8px; }
}

/* logowanie przez Google */
.przycisk-google { display: block; text-align: center; text-decoration: none; margin-bottom: 18px; }
.karta-logowania form { border-top: 1px solid rgba(255,255,255,.08); padding-top: 14px; }