:root {
  --bg: #f4f5f7; --panel: #ffffff; --panel-2: #f9fafb; --line: #e4e7ec; --line-2: #eef0f3;
  --text: #1d2330; --muted: #667085; --faint: #98a2b3;
  --accent: #2458e6; --accent-2: #1d47bd; --accent-soft: #edf2ff; --accent-text: #ffffff;
  --in: #f2f4f7; --out: #e8f0ff; --note: #fff8db; --note-line: #f5d565;
  --ok: #12805c; --ok-soft: #e3f6ee; --warn: #b54708; --warn-soft: #fff1e0; --bad: #c01f3a; --bad-soft: #fde8ec;
  --allegro: #ff5a00; --empik: #d1175f; --erli: #0f9f6e; --email: #2458e6;
  --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 16px rgba(16, 24, 40, .06);
  --radius: 10px;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-motyw="jasny"]) {
    --bg: #0f1218; --panel: #161a22; --panel-2: #1b2029; --line: #272d38; --line-2: #212631;
    --text: #e6e9ef; --muted: #9aa3b2; --faint: #6b7483;
    --accent: #5b8cff; --accent-2: #7aa2ff; --accent-soft: #1d2740; --accent-text: #0b1020;
    --in: #1f2530; --out: #1c2a47; --note: #2e2a17; --note-line: #6b5b1d;
    --ok: #3ccf91; --ok-soft: #12291f; --warn: #f5a524; --warn-soft: #2d2212; --bad: #ff6b81; --bad-soft: #2f1820;
    --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
    color-scheme: dark;
  }
}
:root[data-motyw="ciemny"] {
  --bg: #0f1218; --panel: #161a22; --panel-2: #1b2029; --line: #272d38; --line-2: #212631;
  --text: #e6e9ef; --muted: #9aa3b2; --faint: #6b7483;
  --accent: #5b8cff; --accent-2: #7aa2ff; --accent-soft: #1d2740; --accent-text: #0b1020;
  --in: #1f2530; --out: #1c2a47; --note: #2e2a17; --note-line: #6b5b1d;
  --ok: #3ccf91; --ok-soft: #12291f; --warn: #f5a524; --warn-soft: #2d2212; --bad: #ff6b81; --bad-soft: #2f1820;
  --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 6px 20px rgba(0, 0, 0, .35);
  color-scheme: dark;
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  background: var(--bg); color: var(--text);
  font: 14px/1.45 "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  overflow: hidden;
}
button, input, select, textarea { font: inherit; color: inherit; }
a { color: var(--accent); }
.ukryty { display: none !important; }

/* ── górny pasek ── */
.gora {
  height: 52px; display: flex; align-items: center; gap: 12px; padding: 0 14px;
  background: var(--panel); border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 15px; white-space: nowrap; }
.logo svg { color: var(--accent); }
.szukaj { flex: 1; max-width: 520px; position: relative; }
.szukaj input {
  width: 100%; height: 34px; border: 1px solid var(--line); border-radius: 8px; padding: 0 12px 0 34px;
  background: var(--panel-2); outline: none;
}
.szukaj input:focus { border-color: var(--accent); background: var(--panel); }
.szukaj svg { position: absolute; left: 10px; top: 9px; color: var(--faint); }
.gora .odstep { flex: 1; }
.stan-sync { display: flex; align-items: center; gap: 7px; color: var(--muted); font-size: 12.5px; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; white-space: nowrap; }
.stan-sync:hover { background: var(--panel-2); }
.kropka { width: 8px; height: 8px; border-radius: 50%; background: var(--faint); flex: none; }
.kropka.ok { background: var(--ok); }
.kropka.blad { background: var(--bad); }
.kropka.trwa { background: var(--warn); animation: puls 1s infinite; }
@keyframes puls { 50% { opacity: .35; } }

.btn {
  height: 32px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel);
  cursor: pointer; display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
}
.btn:hover { background: var(--panel-2); }
.btn:disabled { opacity: .55; cursor: default; }
.btn.glowny { background: var(--accent); border-color: var(--accent); color: var(--accent-text); font-weight: 600; }
.btn.glowny:hover { background: var(--accent-2); }
.btn.niebezp { color: var(--bad); }
.btn.maly { height: 26px; padding: 0 8px; font-size: 12.5px; border-radius: 6px; }
.btn.ikona { width: 32px; padding: 0; justify-content: center; }
.btn.bez-ramki { border-color: transparent; background: transparent; }
.btn.bez-ramki:hover { background: var(--panel-2); }

/* ── układ ── */
.uklad { display: grid; grid-template-columns: 232px 380px 1fr; height: calc(100% - 52px); }
.uklad.z-kontekstem { grid-template-columns: 232px 380px 1fr 330px; }

/* ── menu boczne ── */
.boczne { background: var(--panel); border-right: 1px solid var(--line); overflow-y: auto; padding: 10px 8px 20px; }
.boczne h4 { margin: 16px 10px 6px; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--faint); font-weight: 600; }
.pozycja {
  display: flex; align-items: center; gap: 9px; padding: 6px 10px; border-radius: 7px; cursor: pointer;
  color: var(--text); user-select: none;
}
.pozycja:hover { background: var(--panel-2); }
.pozycja.aktywna { background: var(--accent-soft); color: var(--accent); font-weight: 600; }
.pozycja .nazwa { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pozycja .ile { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.pozycja .ile.mocne { background: var(--bad); color: #fff; border-radius: 10px; padding: 0 7px; font-weight: 600; }
.pozycja svg { flex: none; color: var(--muted); }
.pozycja.aktywna svg { color: var(--accent); }
.znak-kanalu { width: 10px; height: 10px; border-radius: 3px; flex: none; }

/* ── lista rozmów ── */
.lista { background: var(--panel); border-right: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; }
.lista-naglowek { padding: 12px 14px 10px; border-bottom: 1px solid var(--line); }
.lista-naglowek .tytul { display: flex; align-items: center; gap: 8px; }
.lista-naglowek h2 { margin: 0; font-size: 16px; flex: 1; }
.lista-naglowek .filtry { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; align-items: center; }
.chip-filtr { font-size: 12px; background: var(--accent-soft); color: var(--accent); border-radius: 12px; padding: 2px 4px 2px 9px;
  display: inline-flex; align-items: center; gap: 3px; }
.chip-filtr button { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 3px; font-size: 14px; line-height: 1; }
select.maly { height: 26px; border: 1px solid var(--line); border-radius: 6px; background: var(--panel); font-size: 12.5px; padding: 0 4px; }
.masowe { display: flex; gap: 6px; align-items: center; padding: 8px 14px; background: var(--accent-soft);
  border-bottom: 1px solid var(--line); font-size: 13px; }
.masowe .odstep { flex: 1; }
.watki { flex: 1; overflow-y: auto; }
.watek {
  display: grid; grid-template-columns: 18px 1fr; gap: 4px 10px; padding: 11px 14px 11px 12px;
  border-bottom: 1px solid var(--line-2); cursor: pointer; position: relative;
}
.watek:hover { background: var(--panel-2); }
.watek.aktywny { background: var(--accent-soft); }
.watek.aktywny::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); }
.watek input[type=checkbox] { margin: 3px 0 0; cursor: pointer; }
.watek .linia1 { display: flex; align-items: center; gap: 7px; min-width: 0; }
.watek .klient { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watek.nieprzeczytany .klient::after { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--accent); margin-left: 6px; vertical-align: middle; }
.watek .czas { font-size: 12px; color: var(--muted); white-space: nowrap; }
.watek .temat { grid-column: 2; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.watek.nieprzeczytany .temat { font-weight: 600; }
.watek .podglad { grid-column: 2; font-size: 12.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; }
.watek .znaczniki { grid-column: 2; display: flex; gap: 5px; flex-wrap: wrap; margin-top: 2px; }
.pusto { padding: 40px 20px; text-align: center; color: var(--muted); }
.wiecej { margin: 10px auto 16px; display: flex; }

/* znaczki */
.kanal { font-size: 10.5px; font-weight: 700; letter-spacing: .02em; color: #fff; border-radius: 4px; padding: 1px 5px;
  white-space: nowrap; text-transform: uppercase; flex: none; }
.kanal.allegro { background: var(--allegro); }
.kanal.empik { background: var(--empik); }
.kanal.erli { background: var(--erli); }
.kanal.email { background: var(--email); }
.znacz { font-size: 11px; border-radius: 4px; padding: 0 6px; line-height: 18px; white-space: nowrap;
  background: var(--panel-2); color: var(--muted); border: 1px solid var(--line); }
.znacz.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.znacz.uwaga { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.znacz.zle { background: var(--bad-soft); color: var(--bad); border-color: transparent; font-weight: 600; }
.znacz.info { background: var(--accent-soft); color: var(--accent); border-color: transparent; }
.znacz.tag { background: transparent; }

/* ── rozmowa ── */
.rozmowa { display: flex; flex-direction: column; min-height: 0; min-width: 0; background: var(--bg); }
.rozmowa-pusta { flex: 1; display: grid; place-items: center; color: var(--muted); text-align: center; padding: 30px; }
.rozmowa-pusta kbd, .skroty kbd { font: 12px ui-monospace, Consolas, monospace; border: 1px solid var(--line);
  border-bottom-width: 2px; border-radius: 4px; padding: 0 5px; background: var(--panel); }
.naglowek-rozmowy { background: var(--panel); border-bottom: 1px solid var(--line); padding: 12px 18px; }
.naglowek-rozmowy .r1 { display: flex; align-items: flex-start; gap: 8px 10px; flex-wrap: wrap; }
.naglowek-rozmowy h1 { margin: 0; font-size: 17px; flex: 1 1 260px; min-width: 0; overflow-wrap: break-word; }
.naglowek-rozmowy .r2 { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; color: var(--muted);
  font-size: 13px; }
.naglowek-rozmowy .akcje { display: flex; gap: 6px; flex: none; align-items: center; }
select.status { height: 32px; border-radius: 8px; border: 1px solid var(--line); background: var(--panel); padding: 0 8px;
  font-weight: 600; }
select.status.nowy { color: var(--bad); }
select.status.oczekuje { color: var(--warn); }
select.status.zamkniety { color: var(--ok); }
.tagi-edycja { display: inline-flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.tagi-edycja input { width: 110px; height: 22px; border: 1px dashed var(--line); border-radius: 4px; background: transparent;
  font-size: 12px; padding: 0 6px; }
.tagi-edycja .znacz button { border: 0; background: none; cursor: pointer; color: inherit; padding: 0 0 0 3px; }

.karta-sprawy { margin: 12px 18px 0; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 12px 14px; box-shadow: var(--shadow); }
.karta-sprawy.reklamacja { border-left: 4px solid var(--warn); }
.karta-sprawy.dyskusja { border-left: 4px solid var(--accent); }
#rKarta { flex: none; max-height: 40vh; overflow-y: auto; overflow-x: hidden; }
.karta-sprawy .gora-karty { display: flex; flex-wrap: wrap; gap: 6px 10px; align-items: center; cursor: pointer;
  user-select: none; min-width: 0; }
.karta-sprawy .gora-karty strong { font-size: 14px; white-space: nowrap; }
.karta-sprawy .gora-karty .znacz { flex: none; }
.karta-sprawy .strzalka { display: inline-flex; color: var(--muted); flex: none; }
.karta-sprawy .skrot { flex: 1 1 180px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--muted); font-size: 13px; }
.karta-sprawy .gora-karty #btnDecyzja { flex: none; margin-left: auto; }
.karta-sprawy.zwinieta { padding: 8px 14px; }
.karta-sprawy.zwinieta .szczegoly { display: none; }
.karta-sprawy dl { display: grid; grid-template-columns: max-content 1fr; gap: 3px 12px; margin: 10px 0 0; font-size: 13px; }
.karta-sprawy dt { color: var(--muted); }
.karta-sprawy dd { margin: 0; }
.karta-sprawy .przyciski { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }

.wiadomosci { flex: 1; overflow-y: auto; padding: 16px 18px 8px; display: flex; flex-direction: column; gap: 10px; }
.wiad { max-width: 78%; display: flex; flex-direction: column; gap: 3px; }
.wiad.in { align-self: flex-start; }
.wiad.out { align-self: flex-end; align-items: flex-end; }
.wiad.notatka { align-self: stretch; max-width: none; }
.wiad.system { align-self: center; max-width: 90%; }
.wiad .kto { font-size: 12px; color: var(--muted); display: flex; gap: 8px; align-items: center; }
.wiad .dymek { padding: 9px 12px; border-radius: 12px; white-space: pre-wrap; word-break: break-word; overflow-wrap: anywhere;
  background: var(--in); border: 1px solid var(--line-2); }
.wiad.in .dymek { border-top-left-radius: 4px; }
.wiad.out .dymek { background: var(--out); border-color: transparent; border-top-right-radius: 4px; }
.wiad.notatka .dymek { background: var(--note); border: 1px dashed var(--note-line); border-radius: 8px; }
.wiad.system .dymek { background: transparent; border: 0; color: var(--muted); font-size: 12.5px; text-align: center; padding: 2px 8px; }
.wiad .zal { display: flex; gap: 6px; flex-wrap: wrap; }
.zal a, .zal span.plik { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; padding: 3px 9px;
  border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-decoration: none; color: var(--text); }
.zal a:hover { border-color: var(--accent); color: var(--accent); }
.zal img.miniatura { max-width: 160px; max-height: 110px; min-width: 56px; min-height: 56px; object-fit: cover; border-radius: 8px;
  border: 1px solid var(--line); display: block; background: var(--panel-2); }
.wiad .opcje-wiad { font-size: 12px; display: flex; gap: 10px; }
.wiad .opcje-wiad button { border: 0; background: none; color: var(--accent); cursor: pointer; padding: 0; }
.cytat { white-space: pre-wrap; color: var(--muted); font-size: 12.5px; border-left: 2px solid var(--line); padding-left: 8px;
  margin-top: 6px; }
iframe.html-maila { width: 100%; min-height: 300px; border: 1px solid var(--line); border-radius: 8px; background: #fff; }
.dzien { align-self: center; font-size: 12px; color: var(--faint); margin: 6px 0; }

/* edytor odpowiedzi */
.edytor { background: var(--panel); border-top: 1px solid var(--line); padding: 10px 18px 12px; }
.edytor .zakladki { display: flex; gap: 4px; margin-bottom: 8px; align-items: center; }
.zakladka { border: 0; background: none; padding: 5px 10px; border-radius: 6px; cursor: pointer; color: var(--muted); font-weight: 600; }
.zakladka.aktywna { background: var(--accent-soft); color: var(--accent); }
.zakladka.notatka.aktywna { background: var(--note); color: var(--warn); }
.edytor .zakladki .odstep { flex: 1; }
.edytor textarea {
  width: 100%; min-height: 96px; max-height: 45vh; resize: vertical; border: 1px solid var(--line); border-radius: 8px;
  padding: 10px 12px; background: var(--panel); outline: none; line-height: 1.5;
}
.edytor textarea:focus { border-color: var(--accent); }
.edytor.tryb-notatka textarea { background: var(--note); border-color: var(--note-line); }
.edytor .pasek { display: flex; gap: 6px; align-items: center; margin-top: 8px; }
.edytor .pasek .odstep { flex: 1; }
.licznik { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.licznik.zle { color: var(--bad); font-weight: 600; }
.pliki-edytora { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 6px; }
.pliki-edytora .znacz button { border: 0; background: none; cursor: pointer; color: inherit; }
.opcje-kanalu { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 13px; margin-bottom: 6px; color: var(--muted); }
.opcje-kanalu input[type=text] { height: 26px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; background: var(--panel); min-width: 240px; }
.grupa-wyslij { display: inline-flex; }
.grupa-wyslij .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.grupa-wyslij .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 1px solid rgba(255,255,255,.35); }

/* rozwijane (szablony) */
.rozwijane { position: relative; }
.menu-rozwijane { position: absolute; bottom: 36px; left: 0; width: 360px; max-height: 360px; overflow: auto; background: var(--panel);
  border: 1px solid var(--line); border-radius: 10px; box-shadow: var(--shadow); z-index: 20; padding: 6px; }
.menu-rozwijane input { width: 100%; height: 30px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px; margin-bottom: 4px; background: var(--panel-2); }
.menu-rozwijane .opcja { padding: 7px 9px; border-radius: 6px; cursor: pointer; }
.menu-rozwijane .opcja:hover, .menu-rozwijane .opcja.wybrana { background: var(--accent-soft); }
.menu-rozwijane .opcja small { display: block; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ── panel kontekstu ── */
.kontekst { background: var(--panel); border-left: 1px solid var(--line); overflow-y: auto; padding: 12px 14px 30px; }
.kontekst h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--faint); margin: 18px 0 8px;
  display: flex; align-items: center; gap: 6px; }
.kontekst h3:first-child { margin-top: 4px; }
.kontekst h3 .odstep { flex: 1; }
.karta { border: 1px solid var(--line); border-radius: 9px; padding: 10px 11px; margin-bottom: 8px; font-size: 13px; background: var(--panel); }
.karta .tyt { display: flex; gap: 6px; align-items: center; font-weight: 600; margin-bottom: 4px; }
.karta .tyt a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.karta .wiersz { display: flex; gap: 8px; color: var(--muted); }
.karta .wiersz span:last-child { color: var(--text); margin-left: auto; text-align: right; }
.karta ul { margin: 6px 0 0; padding-left: 16px; }
.karta li { margin: 2px 0; }
.kopiuj { cursor: pointer; border-bottom: 1px dotted var(--faint); }
.karta.powiazane { border-color: var(--ok); }
.notatka-bl { background: var(--note); border: 1px dashed var(--note-line); border-radius: 6px; padding: 5px 8px; margin: 6px 0 2px;
  font-size: 12.5px; white-space: pre-wrap; }
.historia .pozycja { padding: 6px 8px; }

/* ── okna ── */
.tlo-okna { position: fixed; inset: 0; background: rgba(15, 18, 24, .45); display: grid; place-items: center; z-index: 50; padding: 20px; }
.okno { background: var(--panel); border-radius: 14px; box-shadow: var(--shadow); width: min(560px, 100%); max-height: 92vh;
  display: flex; flex-direction: column; border: 1px solid var(--line); }
.okno.szerokie { width: min(1100px, 100%); height: 88vh; }
.okno .glowa { padding: 14px 18px; border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 10px; }
.okno .glowa h2 { margin: 0; font-size: 16px; flex: 1; }
.okno .cialo { padding: 16px 18px; overflow-y: auto; flex: 1; }
.okno .stopka { padding: 12px 18px; border-top: 1px solid var(--line); display: flex; gap: 8px; justify-content: flex-end; align-items: center; }
.okno .stopka .odstep { flex: 1; }
.pole { display: flex; flex-direction: column; gap: 4px; margin-bottom: 12px; }
.pole label, .etykieta { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.pole input, .pole select, .pole textarea { border: 1px solid var(--line); border-radius: 7px; padding: 7px 10px; background: var(--panel); outline: none; }
.pole input:focus, .pole select:focus, .pole textarea:focus { border-color: var(--accent); }
.pole textarea { min-height: 110px; resize: vertical; }
.pole textarea[data-sc^="ai."] { min-height: 260px; font-size: 13px; line-height: 1.5; }
.pole .pomoc { font-size: 12px; color: var(--faint); }
.siatka { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; }
.ostrzezenie { background: var(--warn-soft); color: var(--warn); border-radius: 8px; padding: 9px 12px; font-size: 13px; margin-bottom: 12px; }
.informacja { background: var(--accent-soft); color: var(--text); border-radius: 8px; padding: 10px 12px; font-size: 13px; margin-bottom: 12px; }
.informacja code, .ustawienia code { font-size: 12px; background: var(--panel-2); border: 1px solid var(--line); border-radius: 4px; padding: 0 4px; }
.blad-tekst { color: var(--bad); font-size: 13px; }

/* ustawienia */
.ustawienia { display: grid; grid-template-columns: 200px 1fr; min-height: 0; flex: 1; }
.ustawienia nav { border-right: 1px solid var(--line); padding: 10px 8px; overflow-y: auto; }
.ustawienia section { padding: 18px 22px 40px; overflow-y: auto; }
.ustawienia section h3 { margin: 0 0 12px; font-size: 16px; }
.ustawienia section h4 { margin: 22px 0 8px; font-size: 14px; }
.wpis { border: 1px solid var(--line); border-radius: 10px; padding: 14px 14px 4px; margin-bottom: 12px; background: var(--panel-2); }
.wpis .glowa-wpisu { display: flex; gap: 8px; align-items: center; margin-bottom: 10px; }
.wpis .glowa-wpisu strong { flex: 1; }
.tabela { width: 100%; border-collapse: collapse; font-size: 13px; }
.tabela th { text-align: left; color: var(--muted); font-weight: 600; font-size: 12px; padding: 6px 8px; border-bottom: 1px solid var(--line); }
.tabela td { padding: 7px 8px; border-bottom: 1px solid var(--line-2); vertical-align: top; }
.kod-polaczenia { display: flex; gap: 16px; align-items: center; background: var(--accent-soft); border-radius: 10px; padding: 14px; margin: 10px 0; }
.kod-polaczenia .kod { font: 700 24px ui-monospace, Consolas, monospace; letter-spacing: .12em; }
.przelacznik { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; font-size: 13px; }
.auto-nastepna { height: 32px; padding: 0 9px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel);
  font-weight: 600; color: var(--muted); }
.auto-nastepna:has(input:checked) { color: var(--accent); border-color: var(--accent); background: var(--accent-soft); }

/* powiadomienie */
.toast { position: fixed; right: 18px; bottom: 18px; z-index: 80; display: flex; flex-direction: column; gap: 8px; }
.toast div { background: var(--text); color: var(--panel); padding: 10px 14px; border-radius: 9px; box-shadow: var(--shadow);
  max-width: 420px; font-size: 13.5px; animation: wjazd .2s ease-out; }
.toast div.blad { background: var(--bad); color: #fff; }
@keyframes wjazd { from { transform: translateY(8px); opacity: 0; } }
.kreciolek { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%;
  display: inline-block; animation: obrot .7s linear infinite; }
@keyframes obrot { to { transform: rotate(360deg); } }

@media (max-width: 1250px) {
  .uklad.z-kontekstem { grid-template-columns: 200px 330px 1fr 300px; }
}
/* Analiza AI — panel nad rozmową (jak karta sprawy, akcent niebieski) */
#rAnaliza { flex: none; max-height: 40vh; overflow-y: auto; overflow-x: hidden; }
.karta-sprawy.analiza { border-left: 4px solid var(--accent); }
.karta-sprawy.analiza .gora-karty strong { display: inline-flex; align-items: center; gap: 5px; }
.karta-sprawy.analiza .gora-karty button { flex: none; }
.analiza .klient-chce { margin-top: 10px; }
.analiza .klient-chce .znacz { margin-left: 8px; }
.analiza .klient-chce div { font-size: 14.5px; font-weight: 600; margin-top: 3px; }
.analiza .fakty { margin: 8px 0 0; padding-left: 18px; font-size: 13px; }
.analiza .fakty li { margin: 2px 0; }
.analiza .propozycja { border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; margin-top: 6px; font-size: 13px;
  background: var(--panel-2); }
.analiza .p-tyt { font-weight: 600; }
.analiza .p-zrodlo { color: var(--muted); font-size: 12px; margin-top: 3px; }
.analiza .p-akcje { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }
.analiza .p-podobne { color: var(--muted); font-size: 12px; margin-top: 8px; }

/* Tekst do wysłania + podgląd drugiej wersji językowej obok siebie (węższy edytor → jeden pod drugim) */
.edytor { flex: none; max-height: 58vh; overflow-y: auto; container-type: inline-size; }
.wiadomosci { min-height: 110px; }
.pole-tresci { display: grid; grid-template-columns: 1fr; gap: 10px; }
.pole-tresci.z-podgladem { grid-template-columns: 1fr 1fr; }
.pole-tresci textarea { min-width: 0; }
.podglad-ai { background: var(--accent-soft); border: 1px solid var(--line); border-radius: 8px; padding: 8px 12px;
  overflow-y: auto; max-height: 38vh; min-height: 96px; font-size: 13.5px; line-height: 1.5; }
.podglad-ai .podglad-tekst { white-space: pre-wrap; margin-top: 4px; }
@container (max-width: 700px) {        /* jeden pod drugim — oba niższe, żeby zmieściły się z przyciskami */
  .pole-tresci.z-podgladem { grid-template-columns: 1fr; gap: 8px; }
  .pole-tresci.z-podgladem textarea { max-height: 20vh; min-height: 80px; }
  .pole-tresci.z-podgladem .podglad-ai { max-height: 18vh; min-height: 70px; }
}

/* autoresponder — przygaszony, nie jest odpowiedzią */
.wiad.automat .dymek { opacity: .55; font-size: 13px; }

/* karta oferty w panelu klienta + link „pytanie o ofertę” przy wiadomości */
.karta-oferty img { width: 100%; max-height: 160px; object-fit: contain; background: #fff; border-radius: 6px; margin-bottom: 6px; }
a.znacz.link-oferty { text-decoration: none; color: var(--accent); border-color: var(--accent); }
a.znacz.link-oferty:hover { background: var(--accent-soft); }

/* ← → poprzednia / następna rozmowa z listy */
.nawigacja-rozmow { display: inline-flex; gap: 0; }
.nawigacja-rozmow .btn:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.nawigacja-rozmow .btn:last-child { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left: 0; }

/* wyszukiwanie zamówień w BaseLinkerze (panel klienta) */
.szukaj-bl { display: flex; gap: 6px; margin-bottom: 8px; }
.szukaj-bl input { flex: 1; min-width: 0; height: 28px; border: 1px solid var(--line); border-radius: 6px; padding: 0 8px;
  background: var(--panel-2); font-size: 12.5px; outline: none; }
.szukaj-bl input:focus { border-color: var(--accent); background: var(--panel); }

/* ── telefon / tablet: jedna kolumna (lista ↔ rozmowa), menu i panel klienta jako wysuwane szuflady ── */
#btnMenu, #btnWstecz, #btnZamknijKontekst, .zaslona, .tylko-telefon { display: none; }
@supports (height: 100dvh) { body { height: 100dvh; } }

@media (max-width: 1000px) {
  .uklad, .uklad.z-kontekstem { grid-template-columns: 1fr; }
  .uklad.pokaz-rozmowe .lista { display: none; }
  .uklad:not(.pokaz-rozmowe) .rozmowa { display: none; }
  #btnMenu { display: inline-flex; margin-left: -6px; }
  #btnWstecz { display: inline-flex; margin-left: -8px; }
  .boczne { position: fixed; z-index: 45; top: 0; bottom: 0; left: 0; width: min(290px, 85vw);
    transform: translateX(-102%); transition: transform .2s ease; box-shadow: var(--shadow); }
  body.menu-otwarte .boczne { transform: none; }
  .kontekst, .kontekst.ukryty { display: block !important; position: fixed; z-index: 45; top: 0; bottom: 0; right: 0;
    width: min(420px, 94vw); padding-top: 54px; transform: translateX(102%); transition: transform .2s ease;
    box-shadow: var(--shadow); }
  body.kontekst-otwarty .kontekst { transform: none; }
  #btnZamknijKontekst { position: fixed; z-index: 46; top: 10px; right: 12px; }
  body.kontekst-otwarty #btnZamknijKontekst { display: inline-flex; }
  .zaslona { position: fixed; inset: 0; z-index: 44; background: rgba(15, 18, 24, .45); }
  body.menu-otwarte .zaslona, body.kontekst-otwarty .zaslona { display: block; }
  .boczne .pozycja { padding: 10px 12px; }
  .toast { left: 12px; right: 12px; top: 62px; bottom: auto; }
  .toast div { max-width: none; }
}

@media (max-width: 640px) {
  .gora { gap: 6px; padding: 0 8px; }
  .logo, .btn .napis, #tekstSync, #zalogowany, #btnMotyw, #btnWyloguj, .gora .odstep { display: none !important; }
  .szukaj { max-width: none; }
  .stan-sync { padding: 8px 6px; }
  #btnNowy, #btnUstawienia { width: 36px; padding: 0; justify-content: center; }
  .tylko-telefon { display: block; }
  /* 16 px — iPhone nie powiększa wtedy strony przy wpisywaniu */
  input:not([type=checkbox]):not([type=radio]), select, textarea { font-size: 16px; }
  .btn { height: 36px; }
  .btn.ikona { width: 36px; }
  .btn.maly { height: 30px; }
  select.maly { height: 30px; }
  select.status { height: 36px; }

  .lista-naglowek { padding: 10px 12px 8px; }
  .watek { padding: 12px 12px 12px 10px; }
  .masowe { flex-wrap: wrap; padding: 8px 12px; }

  .naglowek-rozmowy { padding: 8px 12px 10px; }
  .naglowek-rozmowy h1 { font-size: 15px; }
  .naglowek-rozmowy .akcje { width: 100%; flex-wrap: wrap; }
  .naglowek-rozmowy .akcje select.status { flex: 1; min-width: 0; }
  .naglowek-rozmowy .r2 { font-size: 12.5px; }
  .karta-sprawy { margin: 8px 10px 0; padding: 10px 12px; }
  .karta-sprawy.zwinieta { padding: 8px 12px; }
  #rKarta, #rAnaliza { max-height: 34dvh; }
  .wiadomosci { padding: 12px 10px 6px; }
  .wiad { max-width: 92%; }
  .edytor { padding: 8px 10px 10px; max-height: 68dvh; }
  .edytor .skroty { display: none; }
  .edytor .pasek { flex-wrap: wrap; row-gap: 8px; }
  .edytor textarea { min-height: 84px; }
  .opcje-kanalu input[type=text] { min-width: 0; width: 100%; }
  .menu-rozwijane { width: calc(100vw - 20px); max-height: 50dvh; }

  /* okna: zwykłe wysuwają się od dołu, szerokie (Ustawienia) na cały ekran */
  .tlo-okna { padding: 0; place-items: end center; }
  .okno { width: 100%; max-height: 94dvh; border-radius: 14px 14px 0 0; }
  .okno.szerokie { height: 100dvh; max-height: 100dvh; border-radius: 0; }
  .okno .glowa { padding: 12px 14px; }
  .okno .cialo { padding: 14px; }
  .okno .stopka { padding: 10px 14px; flex-wrap: wrap; }
  .ustawienia { grid-template-columns: 1fr; grid-template-rows: auto 1fr; }
  .ustawienia nav { display: flex; gap: 4px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--line); padding: 6px; }
  .ustawienia nav .pozycja { flex: none; padding: 7px 10px; }
  .ustawienia section { padding: 14px 14px 40px; overflow-x: auto; }
  .kod-polaczenia { flex-wrap: wrap; }
  .okno .cialo .btn, .ustawienia section .btn { white-space: normal; height: auto; min-height: 36px; padding-top: 6px;
    padding-bottom: 6px; text-align: left; }
  #btnOdswiezWatek { display: none; }           /* miejsce na pełną nazwę statusu; rozmowy i tak odświeżają się same */
}

/* pola z kluczami — zwykły tekst (bez autouzupełniania haseł), czcionka o stałej szerokości */
input.sekret { font-family: ui-monospace, Consolas, monospace; letter-spacing: .02em; }