/* app.css — ciemny Slack (desktop + mobile). Kolory dobrane do zrzutów prawdziwego Slacka:
   pasek i szyna #19171d, główny #1a1d21, aktywny element zielony. */
:root {
  color-scheme: dark;
  --szyna-tlo: #19171d; --boczny-tlo: #19171d; --gorna-tlo: #19171d;
  --boczny-tekst: #bcbcbf; --boczny-mocny: #ffffff; --boczny-hover: #27242c;
  --aktywny: #1f6a45; --aktywny-tekst: #ffffff;
  --glowny-tlo: #1a1d21; --tekst: #d1d2d3; --tekst-mocny: #ffffff; --tekst-slaby: #ababad;
  --krawedz: #35373b; --krawedz-slaba: #2c2d30; --hover-wiadomosc: #222529;
  --composer-krawedz: #565856; --composer-tlo: #222529;
  --link: #1d9bd1; --wzmianka-tlo: rgba(29,155,209,.12); --wzmianka: #1d9bd1;
  --kod-tlo: #222529; --kod-krawedz: #35373b; --kod: #e8912d; --cytat-krawedz: #5d5e60;
  --odznaka-tlo: #3a3b3f; --odznaka: #c1c2c4; --obecny: #2bac76; --wyslij: #007a5a;
  --reakcja-tlo: #222529; --reakcja-krawedz: #35373b; --reakcja-moja-tlo: rgba(29,155,209,.2); --reakcja-moja-krawedz: #1d9bd1;
  --baner-ostrzezenie: #e8a700; --baner-blad: #e01e5a; --szukaj-tlo: #2b2a2f;
  --font: "Slack-Lato", Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  --mono: Monaco, Menlo, Consolas, "Courier New", monospace;
  --gorna-h: 44px; --szyna-w: 70px; --boczny-w: 260px;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body {
  font: 15px/1.46668 var(--font); color: var(--tekst); background: var(--szyna-tlo);
  overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent;
  display: flex; flex-direction: column; height: 100dvh;
}
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
button:focus-visible { outline: 2px solid var(--link); outline-offset: 1px; }
.pole:focus, .pole:focus-visible { outline: none; }
svg { width: 20px; height: 20px; display: block; }
a { color: var(--link); text-decoration: none; }
a:hover { text-decoration: underline; }
[hidden] { display: none !important; }
.ikona { width: 32px; height: 32px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst-slaby); }
.ikona:hover { background: rgba(255,255,255,.08); color: var(--tekst-mocny); }
.ikona.okragla { border-radius: 50%; background: rgba(255,255,255,.1); color: var(--boczny-mocny); }
.ikona.okragla:hover { background: rgba(255,255,255,.2); }

/* ---------- pasek górny ---------- */
.gorna { height: var(--gorna-h); flex: none; display: grid; grid-template-columns: calc(var(--szyna-w) + var(--boczny-w) + 8px) 1fr 160px; align-items: center; background: var(--gorna-tlo); padding: 0 8px; }
.gorna-lewo { display: flex; align-items: center; gap: 4px; justify-content: flex-end; padding-right: 8px; }
.gorna-lewo .ikona { color: #9a9a9d; }
.swiatla { display: inline-flex; gap: 8px; margin-right: auto; padding-left: 6px; }
.swiatla i { width: 12px; height: 12px; border-radius: 50%; background: #ff5f57; }
.swiatla i:nth-child(2) { background: #febc2e; } .swiatla i:nth-child(3) { background: #28c840; }
.szukaj { height: 28px; max-width: 900px; width: 100%; justify-self: center; display: flex; align-items: center; gap: 8px; padding: 0 10px; border-radius: 6px; background: var(--szukaj-tlo); color: #c8c8cb; font-size: 13.5px; border: 1px solid #3b3a40; }
.szukaj:hover { background: #34333a; }
.szukaj svg { width: 16px; height: 16px; }
.gorna-prawo { display: flex; align-items: center; gap: 4px; justify-content: flex-end; }
.ikonka-ai { width: 20px; height: 20px; border-radius: 50%; background: conic-gradient(from 0deg, #e01e5a, #ecb22e, #2eb67d, #36c5f0, #e01e5a); display: block; box-shadow: inset 0 0 0 4px var(--gorna-tlo); }

/* ---------- układ ---------- */
.uklad { flex: 1; display: grid; grid-template-columns: var(--szyna-w) var(--boczny-w) 1fr; min-height: 0; }
.szyna { display: flex; flex-direction: column; align-items: center; padding: 6px 0 10px; gap: 2px; color: var(--boczny-mocny); }
.logo { width: 36px; height: 36px; border-radius: 8px; margin: 6px 0 10px; overflow: hidden; }
.logo img { width: 36px; height: 36px; display: block; }
.szyna-el { position: relative; width: 60px; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 11px; color: #d1d2d3; border-radius: 8px; }
.szyna-el svg, .szyna-ikona { width: 20px; height: 20px; }
.szyna-el svg { padding: 0; }
.szyna-el::before { content: ""; position: absolute; top: 2px; width: 36px; height: 36px; border-radius: 8px; background: transparent; z-index: -1; }
.szyna-el { z-index: 0; }
.szyna-el:hover::before { background: rgba(255,255,255,.1); }
.szyna-el.aktywny::before { background: rgba(255,255,255,.2); }
.szyna-el.aktywny { color: #fff; }
.szyna-ikona.slackbot { border-radius: 4px; background: linear-gradient(135deg, #e9d3c2, #c9a287); position: relative; }
.szyna-ikona.slackbot::after { content: ""; position: absolute; inset: 4px 5px; border-radius: 2px; background: #4a154b; }
.odznaka-licznik { position: absolute; top: 0; right: 8px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: #e01e5a; color: #fff; font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center; z-index: 1; }
.szyna-dol { margin-top: auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.ja img { width: 36px; height: 36px; border-radius: 6px; display: block; }

.boczny { background: var(--boczny-tlo); color: var(--boczny-tekst); display: flex; flex-direction: column; min-height: 0; padding: 6px 8px 0 8px; }
.boczny-naglowek { display: flex; align-items: center; justify-content: space-between; padding: 2px 4px 8px 8px; }
.workspace { display: flex; align-items: center; gap: 4px; font-size: 18px; font-weight: 900; color: var(--boczny-mocny); padding: 4px 6px; border-radius: 6px; }
.workspace:hover { background: var(--boczny-hover); text-decoration: none; }
a.workspace { color: var(--boczny-mocny); }
.workspace svg { width: 16px; height: 16px; }
.boczny-ikony { display: flex; gap: 2px; }
.boczny-ikony .ikona { color: var(--boczny-mocny); }
.znajdz { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 10px; border-radius: 8px; border: 1px solid #3b3a40; color: #c8c8cb; font-size: 14px; margin: 0 4px 8px; }
.znajdz:hover { background: var(--boczny-hover); }
.znajdz svg { width: 16px; height: 16px; }
.boczny-lista { overflow-y: auto; flex: 1; padding-bottom: 20px; }
.sekcja { margin-bottom: 10px; }
.sekcja-tytul { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 10px; border-radius: 6px; color: var(--boczny-tekst); font-size: 15px; }
.sekcja-tytul:hover { background: var(--boczny-hover); color: var(--boczny-mocny); }
.sekcja-tytul svg { width: 16px; height: 16px; opacity: .8; }
.sekcja.zwinieta ul { display: none; }
.sekcja ul { list-style: none; margin: 0; padding: 0; }
.sekcja li button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 4px 10px 4px 24px; border-radius: 6px; color: var(--boczny-tekst); font-size: 15px; text-align: left; min-height: 28px; }
.sekcja li button:hover { background: var(--boczny-hover); color: var(--boczny-mocny); }
.sekcja li button.aktywny, .sekcja li button.aktywny:hover { background: var(--aktywny); color: var(--aktywny-tekst); }
.sekcja li button svg { width: 16px; height: 16px; flex: none; opacity: .8; }
.sekcja li button .nazwa { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sekcja li button .pogrubiony { font-weight: 900; color: var(--boczny-mocny); }
.sekcja li button .licznik { margin-left: auto; min-width: 20px; height: 18px; padding: 0 6px; border-radius: 9px; background: #e8e8e8; color: #1a1d21; font-size: 12px; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.sekcja li button .licznik.grupa { background: transparent; color: var(--boczny-tekst); border: 1px solid #5a5a5e; margin-left: 0; order: -1; margin-right: 0; }
.sekcja li button .olowek { margin-left: auto; opacity: .6; }
.awatar-mini { position: relative; width: 20px; height: 20px; flex: none; }
.awatar-mini img { width: 20px; height: 20px; border-radius: 4px; display: block; }
.awatar-mini .obecnosc, .awatar-mini .obecnosc-dm { position: absolute; right: -3px; bottom: -3px; width: 10px; height: 10px; border-radius: 50%; background: var(--obecny); border: 2px solid var(--boczny-tlo); box-sizing: content-box; width: 7px; height: 7px; }
.obecnosc.nieobecny, .obecnosc-dm.nieobecny { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tekst-slaby); }
.awatar-mini .kolor { width: 20px; height: 20px; border-radius: 4px; display: block; }
.sekcja li .szary { opacity: .75; }
.sekcja li .ty { font-size: 13px; color: var(--tekst-slaby); margin-left: 6px; }

/* ---------- główny ---------- */
.glowny { background: var(--glowny-tlo); border-top-left-radius: 8px; border-left: 1px solid var(--krawedz-slaba); border-top: 1px solid var(--krawedz-slaba); min-height: 0; display: flex; flex-direction: column; position: relative; margin-right: 4px; }
.widok-dm { display: flex; flex-direction: column; min-height: 0; flex: 1; }
header.dm { flex: none; display: grid; grid-template-columns: auto auto 1fr auto; grid-template-areas: "wstecz gwiazdka kto prawo" "zakladki zakladki zakladki zakladki"; align-items: center; padding: 6px 12px 0 12px; border-bottom: 1px solid var(--krawedz); gap: 2px 4px; }
.mob-wstecz, .mob-sluchawki { display: none; }
header.dm .gwiazdka { grid-area: gwiazdka; }
.dm-kto { grid-area: kto; display: flex; align-items: center; gap: 8px; padding: 4px 8px 4px 4px; border-radius: 6px; max-width: 100%; }
.dm-kto:hover { background: rgba(255,255,255,.06); }
.dm-kto .awatar-mini img { width: 24px; height: 24px; }
.dm-kto .awatar-mini { width: 24px; height: 24px; }
.dm-nazwa { font-size: 18px; font-weight: 900; color: var(--tekst-mocny); white-space: nowrap; }
.odznaka { font-size: 10px; font-weight: 700; letter-spacing: .3px; text-transform: uppercase; color: var(--odznaka); background: var(--odznaka-tlo); padding: 2px 4px; border-radius: 3px; line-height: 1.1; }
.dm-pod { display: none; }
.zakladki { grid-area: zakladki; display: flex; gap: 2px; padding-top: 4px; }
.zakladka { display: flex; align-items: center; gap: 6px; padding: 8px 10px 10px; color: var(--tekst-slaby); font-size: 13.5px; font-weight: 700; border-bottom: 2px solid transparent; }
.zakladka svg { width: 15px; height: 15px; }
.zakladka:hover { color: var(--tekst-mocny); }
.zakladka.aktywna { color: var(--tekst-mocny); border-bottom-color: var(--tekst-mocny); }
.zakladka .kropka { width: 12px; height: 12px; border-radius: 50%; background: #e8e8e8; display: inline-block; }
.dm-prawo { grid-area: prawo; display: flex; gap: 2px; }

.dm-cialo { flex: 1; min-height: 0; display: flex; flex-direction: column; position: relative; }
.wiadomosci { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 12px 0 4px; scroll-behavior: auto; }
.dzien { display: flex; align-items: center; margin: 12px 0 4px; }
.dzien::before, .dzien::after { content: ""; flex: 1; height: 1px; background: var(--krawedz); }
.dzien span { display: inline-flex; align-items: center; gap: 4px; border: 1px solid var(--krawedz); border-radius: 24px; padding: 4px 12px; font-size: 13px; font-weight: 700; color: var(--tekst-mocny); background: var(--glowny-tlo); }
.dzien span svg { width: 13px; height: 13px; }
.wiadomosc { position: relative; display: grid; grid-template-columns: 36px 1fr; gap: 0 8px; padding: 8px 20px; }
.wiadomosc:hover { background: var(--hover-wiadomosc); }
.wiadomosc.ciag { padding-top: 2px; padding-bottom: 2px; }
/* Jak w Slacku: pierwsza wiadomość grupy nie odstaje od kolejnych. */
.wiadomosc:has(+ .wiadomosc.ciag) { padding-bottom: 2px; }
.wiadomosc .awatar { width: 36px; height: 36px; border-radius: 6px; display: block; }
.wiadomosc .awatar.ja { background: #4a7bd6; color: #fff; font-weight: 900; display: flex; align-items: center; justify-content: center; font-size: 15px; }
.wiadomosc.ciag .czas-rynna { grid-column: 1; font-size: 11px; color: var(--tekst-slaby); text-align: right; padding-top: 4px; visibility: hidden; }
.wiadomosc.ciag:hover .czas-rynna { visibility: visible; }
.wiadomosc .naglowek { display: flex; align-items: baseline; gap: 6px; line-height: 1.2; margin-bottom: 2px; }
.wiadomosc .autor { font-weight: 900; color: var(--tekst-mocny); }
.wiadomosc .czas { font-size: 12px; color: var(--tekst-slaby); }
.wiadomosc .tresc { color: var(--tekst); word-break: break-word; overflow-wrap: anywhere; }
.wiadomosc .tresc code { font: 12px/1.4 var(--mono); color: var(--kod); background: var(--kod-tlo); border: 1px solid var(--kod-krawedz); border-radius: 3px; padding: 1px 3px; }
.wiadomosc .tresc pre { margin: 4px 0; padding: 8px; background: var(--kod-tlo); border: 1px solid var(--kod-krawedz); border-radius: 4px; overflow-x: auto; }
.wiadomosc .tresc pre code { border: 0; padding: 0; color: var(--tekst); background: none; }
.wiadomosc .tresc blockquote { margin: 2px 0; padding-left: 12px; border-left: 4px solid var(--cytat-krawedz); color: var(--tekst); }
.wiadomosc .tresc ul, .wiadomosc .tresc ol { margin: 2px 0; padding-left: 24px; }
.wiadomosc .tresc .emoji { font-size: 1.25em; line-height: 1; vertical-align: -0.1em; }
.wiadomosc .tresc .wzmianka { color: var(--wzmianka); background: var(--wzmianka-tlo); padding: 0 2px; border-radius: 3px; }
.wiadomosc .edytowano { font-size: 12px; color: var(--tekst-slaby); margin-left: 2px; }
.reakcje { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; }
.reakcja { display: inline-flex; align-items: center; gap: 4px; height: 24px; padding: 0 8px; border-radius: 12px; background: var(--reakcja-tlo); border: 1px solid var(--reakcja-krawedz); font-size: 12px; color: var(--tekst); }
.reakcja:hover { border-color: var(--tekst-slaby); }
.reakcja.moja { background: var(--reakcja-moja-tlo); border-color: var(--reakcja-moja-krawedz); }
.reakcja .e { font-size: 15px; line-height: 1; }
.reakcja.dodaj { padding: 0 6px; }
.reakcja.dodaj svg { width: 16px; height: 16px; }
.akcje { position: absolute; right: 20px; top: -14px; display: none; gap: 2px; padding: 2px; background: var(--glowny-tlo); border: 1px solid var(--krawedz); border-radius: 8px; box-shadow: 0 2px 6px rgba(0,0,0,.4); }
.wiadomosc:hover .akcje { display: flex; }
.akcje .ikona { width: 30px; height: 30px; }
.pisze { flex: none; display: flex; align-items: center; gap: 8px; padding: 2px 20px 6px; font-size: 13px; color: var(--tekst-slaby); }
.kropki { display: inline-flex; gap: 3px; }
.kropki i { width: 6px; height: 6px; border-radius: 50%; background: var(--tekst-slaby); animation: kropka 1.2s infinite ease-in-out; }
.kropki i:nth-child(2) { animation-delay: .2s; } .kropki i:nth-child(3) { animation-delay: .4s; }
@keyframes kropka { 0%, 80%, 100% { opacity: .3; transform: translateY(0); } 40% { opacity: 1; transform: translateY(-3px); } }
.baner { flex: none; margin: 0 20px 8px; padding: 8px 12px; border-radius: 6px; font-size: 13.5px; display: flex; align-items: center; gap: 10px; background: rgba(232,167,0,.15); border: 1px solid rgba(232,167,0,.5); color: var(--tekst-mocny); }
.baner.blad { background: rgba(224,30,90,.15); border-color: rgba(224,30,90,.5); }
.baner button { margin-left: auto; font-weight: 700; color: var(--link); white-space: nowrap; }

.composer { flex: none; margin: 0 20px 20px; border: 1px solid var(--composer-krawedz); border-radius: 8px; background: var(--composer-tlo); display: flex; flex-direction: column; }
.composer:focus-within { border-color: #8d8d8f; }
.pasek-format { display: flex; align-items: center; gap: 2px; padding: 6px 8px 2px; }
.pasek-format .f { width: 28px; height: 26px; border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst-slaby); font-size: 14px; }
.pasek-format .f:hover { background: rgba(255,255,255,.08); color: var(--tekst-mocny); }
.pasek-format .f svg { width: 17px; height: 17px; }
.pasek-format .sep { width: 1px; height: 18px; background: var(--krawedz); margin: 0 4px; }
.pole { min-height: 24px; max-height: 40vh; overflow-y: auto; padding: 6px 12px 8px; outline: none; white-space: pre-wrap; word-break: break-word; color: var(--tekst-mocny); }
.pole:empty::before { content: attr(data-placeholder); color: var(--tekst-slaby); pointer-events: none; }
.pasek-dol { display: flex; align-items: center; gap: 2px; padding: 2px 6px 6px; }
.pasek-dol .ikona { width: 28px; height: 28px; }
.pasek-dol .plus { background: rgba(255,255,255,.08); border-radius: 50%; }
.pasek-dol .ikona[data-akcja="format"] { text-decoration: underline; }
.rozpychacz { flex: 1; }
.wyslij { width: 30px; height: 28px; border-radius: 4px 0 0 4px; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst-slaby); }
.wyslij:not([disabled]) { background: var(--wyslij); color: #fff; }
.wyslij-strzalka { width: 20px; height: 28px; border-radius: 0 4px 4px 0; display: inline-flex; align-items: center; justify-content: center; color: var(--tekst-slaby); }
.wyslij:not([disabled]) + .wyslij-strzalka { background: var(--wyslij); color: #fff; border-left: 1px solid rgba(255,255,255,.35); }
.wyslij-strzalka svg { width: 14px; height: 14px; }

/* ---------- panele (About, błędy, jajka) ---------- */
.panel, .panel-glowny { flex: 1; min-height: 0; overflow-y: auto; padding: 28px 32px; }
.panel-glowny { display: flex; flex-direction: column; }
.panel h1, .panel-glowny h1 { font-size: 22px; font-weight: 900; color: var(--tekst-mocny); margin: 0 0 6px; }
.panel h2, .panel-glowny h2 { font-size: 15px; font-weight: 900; color: var(--tekst-mocny); margin: 20px 0 6px; }
.panel p, .panel-glowny p { margin: 0 0 10px; }
.panel-glowny .naglowek-panelu { display: flex; align-items: center; gap: 10px; padding-bottom: 14px; border-bottom: 1px solid var(--krawedz); margin-bottom: 16px; }
.panel-glowny .naglowek-panelu h1 { margin: 0; }
.blad-pane { margin: auto; text-align: center; max-width: 440px; }
.blad-pane .duzy { font-size: 56px; margin-bottom: 8px; }
.blad-pane h1 { font-size: 26px; }
.blad-pane p { color: var(--tekst-slaby); }
.przycisk { display: inline-flex; align-items: center; gap: 6px; height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--krawedz); background: var(--composer-tlo); color: var(--tekst-mocny); font-weight: 700; font-size: 14px; }
.przycisk:hover { background: #2c2f33; }
.przycisk.zielony { background: var(--wyslij); border-color: var(--wyslij); }
.przycisk.zielony:hover { background: #148567; }
.profil { display: grid; grid-template-columns: 192px 1fr; gap: 24px; align-items: start; max-width: 720px; }
.profil img { width: 192px; height: 192px; border-radius: 10px; display: block; }
.profil .pole-profilu { margin-bottom: 12px; }
.profil .etykieta { font-size: 12px; font-weight: 700; color: var(--tekst-slaby); text-transform: uppercase; letter-spacing: .3px; }
.profil .wartosc { color: var(--tekst-mocny); }
.lista-panelu { list-style: none; margin: 0; padding: 0; }
.lista-panelu li { display: flex; align-items: center; gap: 12px; padding: 10px 8px; border-bottom: 1px solid var(--krawedz-slaba); }
.lista-panelu li .awatar { width: 36px; height: 36px; border-radius: 6px; flex: none; display: flex; align-items: center; justify-content: center; font-size: 18px; background: #2c2f33; }
.lista-panelu li .awatar img { width: 36px; height: 36px; border-radius: 6px; display: block; }
.lista-panelu li .co { flex: 1; min-width: 0; }
.lista-panelu li .co b { color: var(--tekst-mocny); }
.lista-panelu li .kiedy { font-size: 12px; color: var(--tekst-slaby); white-space: nowrap; }
.todo { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-bottom: 1px solid var(--krawedz-slaba); cursor: pointer; }
.todo input { width: 18px; height: 18px; accent-color: var(--wyslij); }
.todo.zrobione span { text-decoration: line-through; color: var(--tekst-slaby); }
.pliki-pusto { text-align: center; margin: auto; color: var(--tekst-slaby); max-width: 400px; }
.pliki-pusto .duzy { font-size: 64px; margin-bottom: 10px; }
.szukaj-wyniki { max-width: 640px; }
.szukaj-wyniki .pole-szukania { display: flex; align-items: center; gap: 8px; height: 40px; border: 1px solid var(--krawedz); border-radius: 8px; padding: 0 12px; background: var(--composer-tlo); margin-bottom: 20px; }
.szukaj-wyniki input { flex: 1; background: none; border: 0; color: var(--tekst-mocny); font: inherit; outline: none; }
.klaudiusz { font-family: var(--mono); font-size: 13px; background: #111316; border: 1px solid var(--krawedz); border-radius: 6px; padding: 14px; color: #c9d1d9; max-width: 640px; white-space: pre-wrap; }
.klaudiusz .z { color: #2bac76; } .klaudiusz .c { color: #e8912d; }
.przycisk-link { color: var(--link); font-weight: 700; }

/* ---------- menu, dialog, toast ---------- */
.menu { position: fixed; z-index: 30; min-width: 240px; padding: 6px 0; background: #1a1d21; border: 1px solid var(--krawedz); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.5); }
.menu button { display: block; width: 100%; text-align: left; padding: 7px 20px; color: var(--tekst-mocny); font-size: 15px; }
.menu button:hover { background: var(--link); color: #fff; }
.menu button.czerwony { color: #e01e5a; }
.menu button.czerwony:hover { background: #e01e5a; color: #fff; }
.menu hr { border: 0; border-top: 1px solid var(--krawedz); margin: 6px 0; }
dialog { background: #1a1d21; color: var(--tekst); border: 1px solid var(--krawedz); border-radius: 12px; padding: 24px 28px; max-width: 460px; width: calc(100% - 32px); box-shadow: 0 16px 48px rgba(0,0,0,.6); }
dialog::backdrop { background: rgba(0,0,0,.55); }
dialog h2 { margin: 0 0 10px; font-size: 22px; color: var(--tekst-mocny); }
dialog p { margin: 0 0 20px; }
.dialog-przyciski { display: flex; justify-content: flex-end; gap: 10px; }
.dialog-przyciski button { height: 36px; padding: 0 14px; border-radius: 6px; border: 1px solid var(--krawedz); font-weight: 700; background: var(--composer-tlo); color: var(--tekst-mocny); }
.dialog-przyciski .czerwony-przycisk { background: #e01e5a; border-color: #e01e5a; color: #fff; }
.toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%); z-index: 40; background: #e01e5a; color: #fff; font-weight: 700; padding: 10px 16px; border-radius: 8px; box-shadow: 0 6px 20px rgba(0,0,0,.5); max-width: calc(100% - 32px); }
.toast.info { background: #1264a3; }

/* ---------- mobile ---------- */
.tabbar { display: none; }
@media (max-width: 767px) {
  :root { --boczny-w: 100vw; }
  body { background: var(--glowny-tlo); }
  .gorna, .szyna, .tylko-desktop { display: none; }
  .uklad { grid-template-columns: 1fr; }
  .boczny, .glowny { grid-column: 1; grid-row: 1; }
  .glowny { border: 0; border-radius: 0; margin: 0; }
  .boczny { padding: max(10px, env(safe-area-inset-top)) 12px 0; display: none; }
  body[data-mob="home"] .boczny, body[data-mob="dms"] .boczny { display: flex; }
  body[data-mob="home"] .glowny, body[data-mob="dms"] .glowny { display: none; }
  body[data-mob="dm"] .glowny, body[data-mob="panel"] .glowny { display: flex; }
  body[data-mob="dm"] .tabbar, body[data-mob="panel"] .tabbar { display: none; }
  .boczny-naglowek { padding-top: 6px; }
  .workspace { font-size: 22px; }
  .znajdz { height: 40px; font-size: 16px; }
  .sekcja li button { min-height: 40px; font-size: 16px; padding-left: 28px; }
  .sekcja-tytul { font-size: 16px; }
  .boczny-lista { padding-bottom: 110px; }
  .tabbar { display: flex; align-items: center; justify-content: center; gap: 12px; position: fixed; left: 0; right: 0; bottom: calc(10px + env(safe-area-inset-bottom)); z-index: 20; padding: 0 16px; pointer-events: none; }
  .tabbar-pigulka { pointer-events: auto; display: flex; background: #2a2d31; border-radius: 40px; padding: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.5); border: 1px solid #3a3d41; }
  .tab { display: flex; flex-direction: column; align-items: center; gap: 2px; width: 68px; height: 56px; border-radius: 30px; color: #d1d2d3; font-size: 12px; justify-content: center; }
  .tab svg { width: 22px; height: 22px; }
  .tab.aktywny { background: #3b4044; color: #5fd3a5; }
  .tab-szukaj { pointer-events: auto; width: 64px; height: 64px; border-radius: 50%; background: #2a2d31; border: 1px solid #3a3d41; display: flex; align-items: center; justify-content: center; color: #fff; box-shadow: 0 6px 24px rgba(0,0,0,.5); }
  .tab-szukaj svg { width: 26px; height: 26px; }

  header.dm { grid-template-columns: auto 1fr auto; grid-template-areas: "wstecz kto prawo"; padding: calc(8px + env(safe-area-inset-top)) 10px 8px; border-bottom: 0; background: var(--glowny-tlo); }
  .mob-wstecz { display: inline-flex; grid-area: wstecz; width: 44px; height: 44px; border-radius: 50%; background: #2a2d31; color: #fff; border: 1px solid #3a3d41; }
  .mob-sluchawki { display: inline-flex; width: 44px; height: 44px; border-radius: 50%; background: #2a2d31; color: #fff; border: 1px solid #3a3d41; }
  .gwiazdka, .zakladki, .dm-prawo .ikona:not(.mob-sluchawki) { display: none; }
  .dm-kto { grid-area: kto; justify-self: center; display: grid; grid-template-columns: auto 1fr; grid-template-areas: "aw nazwa" "aw pod"; column-gap: 10px; align-items: center; background: #2a2d31; border: 1px solid #3a3d41; border-radius: 30px; padding: 6px 18px 6px 8px; max-width: calc(100vw - 130px); }
  .dm-kto .awatar-mini { grid-area: aw; width: 36px; height: 36px; }
  .dm-kto .awatar-mini img { width: 36px; height: 36px; border-radius: 50%; }
  .dm-kto .awatar-mini .obecnosc { border-color: #2a2d31; }
  .dm-nazwa { grid-area: nazwa; font-size: 16px; overflow: hidden; text-overflow: ellipsis; }
  .odznaka { display: none; }
  .dm-pod { display: block; grid-area: pod; font-size: 13px; color: var(--tekst-slaby); }
  .dm-prawo { grid-area: prawo; }
  .wiadomosc { padding-left: 12px; padding-right: 12px; }
  .akcje { display: none !important; }
  .pisze { padding-left: 12px; }
  .composer { margin: 0 10px calc(10px + env(safe-area-inset-bottom)); border-radius: 18px; border-color: #3a3d41; background: #222529; }
  .pasek-format { display: none; }
  .pole { padding: 12px 16px 6px; font-size: 17px; }
  .pasek-dol { padding: 2px 8px 8px; gap: 6px; }
  .pasek-dol .ikona { width: 36px; height: 36px; }
  .pasek-dol .ikona svg { width: 22px; height: 22px; }
  .pasek-dol .plus { width: 40px; height: 40px; }
  .wyslij { width: 40px; height: 36px; border-radius: 8px; }
  .panel, .panel-glowny { padding: 20px 16px calc(100px + env(safe-area-inset-bottom)); }
  .profil { grid-template-columns: 1fr; }
  .profil img { width: 140px; height: 140px; }
  .mob-naglowek-panelu { display: flex; align-items: center; gap: 10px; padding: calc(8px + env(safe-area-inset-top)) 0 10px; }
  .toast { bottom: calc(100px + env(safe-area-inset-bottom)); }
}
@media (min-width: 768px) { .mob-naglowek-panelu { display: none; } }
@media (min-width: 768px) and (max-width: 1100px) { :root { --boczny-w: 220px; } .gorna { grid-template-columns: calc(var(--szyna-w) + var(--boczny-w)) 1fr 120px; } }

/* ---------- paski przewijania: ciemne jak w Slacku ---------- */
.boczny-lista, .wiadomosci, .panel, .panel-glowny, .pole, pre { scrollbar-width: thin; scrollbar-color: #5a5a5e transparent; }
::-webkit-scrollbar { width: 8px; height: 8px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #5a5a5e; border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: #7a7a7e; }
::-webkit-scrollbar-corner { background: transparent; }

/* ---------- kanały do czytania ---------- */
.kanal-start { padding: 24px 20px 8px; }
.kanal-start h1 { margin: 0 0 6px; font-size: 22px; font-weight: 900; color: var(--tekst-mocny); }
.kanal-start p { margin: 0; color: var(--tekst-slaby); }
.kanal-hash svg { width: 18px; height: 18px; color: var(--tekst-mocny); }
body[data-kanal="tak"] .dm-kto .dm-pod { display: inline; font-size: 13px; color: var(--tekst-slaby); font-weight: 400; }
@media (max-width: 767px) { body[data-kanal="tak"] .dm-kto { grid-template-columns: auto 1fr; grid-template-areas: "aw nazwa" "aw pod"; } body[data-kanal="tak"] .kanal-hash { grid-area: aw; } }
.wiadomosc .awatar.bot { border-radius: 6px; }
.efemeryczna { font-size: 12px; color: var(--tekst-slaby); margin-bottom: 2px; }
.wiadomosc:has(.efemeryczna) { background: rgba(29,155,209,.06); }
.watek { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; padding: 4px 6px 4px 4px; border-radius: 6px; border: 1px solid transparent; color: var(--link); font-weight: 700; font-size: 13px; }
.watek:hover { background: var(--glowny-tlo); border-color: var(--krawedz); }
.watek-aw img { width: 24px; height: 24px; border-radius: 4px; display: block; }
.watek-kiedy { color: var(--tekst-slaby); font-weight: 400; display: none; }
.watek:hover .watek-kiedy { display: inline; }
/* ---------- unfurl: karta linku jak w Slacku ---------- */
.unfurl { margin: 6px 0 2px; padding: 2px 0 2px 12px; border-left: 4px solid #35373b; max-width: 520px; }
.unfurl-zrodlo { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700; color: var(--tekst-mocny); }
.unfurl-zrodlo img { width: 16px; height: 16px; border-radius: 3px; }
.unfurl-tytul { display: block; font-weight: 700; margin-top: 2px; }
.unfurl-opis { color: var(--tekst); font-size: 14px; margin-top: 2px; }
.unfurl-obraz { display: block; margin-top: 8px; max-width: 360px; width: 100%; border-radius: 8px; border: 1px solid var(--krawedz); }

/* ---------- intro DM jak w Slacku ---------- */
.dm-intro { padding: 28px 20px 16px; }
.dm-intro-aw { width: 72px; height: 72px; border-radius: 10px; display: block; margin-bottom: 10px; }
.dm-intro-kto { font-size: 22px; color: var(--tekst-mocny); display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.dm-intro-kto b { font-weight: 900; }
.obecnosc-intro { width: 10px; height: 10px; border-radius: 50%; background: var(--obecny); display: inline-block; }
.obecnosc-intro.nieobecny { background: transparent; box-shadow: inset 0 0 0 1.5px var(--tekst-slaby); }
.dm-intro p { color: var(--tekst-slaby); margin: 0 0 12px; }
#btn-dzwieki.wyciszony { opacity: .45; }
/* ---------- App Home ---------- */
.apka-home { max-width: 640px; }
.apka-home .naglowek-apki { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.apka-home .naglowek-apki img, .apka-home .naglowek-apki .kafel { width: 48px; height: 48px; border-radius: 10px; object-fit: cover; }
.apka-home .naglowek-apki h1 { margin: 0; font-size: 22px; }
.apka-home .obraz { width: 100%; border-radius: 10px; border: 1px solid var(--krawedz); display: block; margin: 12px 0; }
.sekcja li .apka-ikona { width: 20px; height: 20px; border-radius: 4px; object-fit: cover; display: block; }
.sekcja li .odznaka-app { font-size: 10px; font-weight: 700; color: var(--odznaka); background: var(--odznaka-tlo); padding: 1px 4px; border-radius: 3px; margin-left: 4px; }

/* ---------- pliki: obrazki i GIF-y jak w Slacku ---------- */
.plik { margin: 4px 0 2px; }
.plik-nazwa { display: inline-flex; align-items: center; gap: 2px; font-size: 13px; color: var(--tekst-slaby); margin-bottom: 4px; }
.plik-nazwa svg { width: 14px; height: 14px; }
.plik-obraz { display: block; padding: 0; border: 1px solid var(--krawedz-slaba); border-radius: 8px; overflow: hidden; background: var(--kod-tlo); cursor: zoom-in; max-width: 100%; }
.plik-obraz img { display: block; width: 100%; height: 100%; object-fit: cover; }
#podglad { position: fixed; inset: 0; z-index: 100; background: rgba(0,0,0,.88); display: flex; flex-direction: column; align-items: center; justify-content: center; cursor: zoom-out; }
#podglad img { max-width: min(92vw, 1000px); max-height: 82vh; border-radius: 6px; }
.podglad-gora { position: absolute; top: 0; left: 0; right: 0; display: flex; justify-content: space-between; align-items: center; padding: 12px 16px; color: #fff; font-weight: 700; }
.podglad-gora .ikona { color: #fff; font-size: 18px; background: none; border: 0; cursor: pointer; }

/* ---------- YouTube ---------- */
.yt-logo { display: inline-block; width: 16px; height: 11px; border-radius: 3px; background: #ff0033; position: relative; }
.yt-logo::after { content: ''; position: absolute; left: 6px; top: 3px; border-left: 5px solid #fff; border-top: 2.5px solid transparent; border-bottom: 2.5px solid transparent; }
.yt-podglad { position: relative; display: block; margin-top: 8px; padding: 0; border: 0; border-radius: 8px; overflow: hidden; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; background: #000; cursor: pointer; }
.yt-podglad img { width: 100%; height: 100%; object-fit: cover; display: block; }
.yt-play { position: absolute; left: 50%; top: 50%; width: 64px; height: 44px; margin: -22px 0 0 -32px; border-radius: 12px; background: rgba(33,33,33,.85); transition: background .15s; }
.yt-play::after { content: ''; position: absolute; left: 26px; top: 13px; border-left: 16px solid #fff; border-top: 9px solid transparent; border-bottom: 9px solid transparent; }
.yt-podglad:hover .yt-play { background: #ff0033; }
.yt-ramka { display: block; margin-top: 8px; width: 100%; max-width: 400px; aspect-ratio: 16 / 9; border: 0; border-radius: 8px; }
.wiadomosc > div { min-width: 0; }
.plik-obraz { height: auto; }

/* ---------- archiwum: doładowywanie historii kanału ---------- */
.archiwum-laduje { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 18px 20px 10px; color: var(--tekst-slaby); font-size: 13px; }
.archiwum-laduje .kolko { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--krawedz); border-top-color: var(--tekst-slaby); animation: kolko .8s linear infinite; }
.archiwum-laduje .link { background: none; border: 0; padding: 0; color: var(--link); font: inherit; cursor: pointer; }
@keyframes kolko { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .archiwum-laduje .kolko { animation: none; } }
.kanal-link { display: inline; padding: 0 2px; border: 0; border-radius: 3px; font: inherit; color: var(--wzmianka); background: var(--wzmianka-tlo); cursor: pointer; }
.kanal-link:hover { text-decoration: underline; }
/* Telefon: body przyklejone do visual viewportu (patrz dopasuj() w app.js), żadnego przewijania dokumentu. */
@media (max-width: 767px) {
  html { overflow: hidden; height: 100%; }
  body { position: fixed; left: 0; right: 0; top: 0; overflow: hidden; overscroll-behavior: none; }
}

/* ---------- runda: ikony, kafelki, fokus ---------- */
img.szyna-ikona { width: 22px; height: 22px; border-radius: 5px; display: block; }
/* Kafelek szyny podświetlony w całości (ikona + podpis), nie tylko kwadrat za ikoną. */
.szyna-el::before { top: 0; bottom: 0; left: 2px; right: 2px; width: auto; height: auto; border-radius: 10px; }
.szyna-el { padding: 8px 0 6px; }
/* Obwódka fokusu tylko przy klawiaturze i do środka, żeby nie wychodziła poza kafelek. */
.szyna-el:focus-visible, .sekcja li button:focus-visible { outline-offset: -2px; }
.szyna-el:focus:not(:focus-visible), .sekcja li button:focus:not(:focus-visible) { outline: none; }
.lista-panelu .awatar img { width: 100%; height: 100%; border-radius: 6px; display: block; }

@media (max-width: 767px) {
  header.dm { padding: calc(6px + env(safe-area-inset-top)) 8px 6px; column-gap: 8px; }
  .mob-wstecz, .mob-sluchawki { width: 40px; height: 40px; }
  .dm-kto { justify-self: center; min-width: 0; max-width: calc(100vw - 112px); padding: 4px 16px 4px 5px; column-gap: 8px; }
  body[data-kanal="tak"] .dm-kto .kanal-hash { width: 32px; height: 32px; border-radius: 50%; background: #3a3d41; display: inline-flex; align-items: center; justify-content: center; }
  body[data-kanal="tak"] .dm-kto .kanal-hash svg { width: 16px; height: 16px; }
  /* Zakładka DMs na telefonie: tylko rozmowy, jak w Slacku. */
  body[data-mob="dms"] .sekcja:not(:has(#dmy)) { display: none; }
  .dm-kto .awatar-mini, .dm-kto .awatar-mini img { width: 32px; height: 32px; }
  .dm-nazwa { font-size: 15px; white-space: nowrap; }
  .dm-pod { font-size: 12px; line-height: 1.2; }
}
.blad-pane .duzy img { width: 72px; height: 72px; border-radius: 16px; display: inline-block; }
/* Grupowy DM: nazwa w całości, ucinany tylko opis. */
.sekcja li button .nazwa.pogrubiony { flex: none; }
/* Lista "More" na telefonie. */
.wiecej-el { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; color: inherit; padding: 0; background: none; border: 0; font: inherit; }
.lista-panelu li:has(.wiecej-el) { padding: 0; }
.lista-panelu li .wiecej-el { padding: 12px 8px; }
.lista-panelu li .wiecej-el .awatar svg { width: 20px; height: 20px; }
@media (max-width: 767px) {
  body[data-mob="tab"] .glowny { display: flex; }
  body[data-mob="tab"] .panel { padding-bottom: 120px; }
}
/* Załącznik zaraz pod nagłówkiem: nazwa pliku przylega jak w Slacku. */
.naglowek + .plik { margin-top: 0; }
.plik-nazwa { line-height: 1.25; margin-bottom: 3px; }

/* ---------- udostępnianie wiadomości ---------- */
.szer-tlo { position: fixed; inset: 0; z-index: 90; background: rgba(0,0,0,.6); display: flex; align-items: center; justify-content: center; padding: 16px; }
.szer-tlo[hidden] { display: none; }
.szer-okno { width: 100%; max-width: 520px; max-height: calc(100dvh - 32px); overflow-y: auto; background: var(--glowny-tlo); border: 1px solid var(--krawedz); border-radius: 12px; padding: 20px; box-shadow: 0 18px 50px rgba(0,0,0,.5); }
.szer-gora { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.szer-gora h2 { margin: 0; font-size: 20px; color: var(--tekst-mocny); }
.szer-gora .ikona { background: none; border: 0; color: var(--tekst-slaby); font-size: 18px; cursor: pointer; padding: 4px 8px; border-radius: 6px; }
.szer-karta { border: 1px solid var(--krawedz); border-left: 4px solid #4a154b; border-radius: 8px; padding: 12px; background: var(--kod-tlo); }
.szer-kto { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; color: var(--tekst-slaby); font-size: 14px; }
.szer-kto img { width: 24px; height: 24px; border-radius: 5px; }
.szer-kto b { color: var(--tekst-mocny); }
.szer-tresc { color: var(--tekst); font-size: 15px; max-height: 9em; overflow: hidden; }
.szer-obraz { display: block; max-width: 100%; max-height: 220px; border-radius: 6px; margin-top: 8px; }
.szer-link { margin-top: 8px; font-size: 12px; color: var(--link); word-break: break-all; }
.szer-przyciski { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.szer-przyciski .przycisk { flex: 1 1 auto; }
.szer-stopka { margin: 12px 0 0; font-size: 13px; color: var(--tekst-slaby); }
/* Ikonka udostępniania przy reakcjach: tylko telefon (na desktopie jest w akcjach po najechaniu). */
.reakcja.udostepnij-mob { display: none; }
@media (max-width: 767px) { .reakcja.udostepnij-mob { display: inline-flex; } }
/* Wiadomość z linku: żółte podświetlenie jak w Slacku. */
.wiadomosc.wskazana { background: rgba(236,178,46,.18); transition: background 2s ease; }
.wiadomosc.ssr { display: block; }
/* Obrazki OG mają wymiary w atrybutach (1200x630), więc przeglądarka rezerwuje miejsce i nic nie skacze. */
.unfurl-obraz, .apka-home .obraz { height: auto; aspect-ratio: 1200 / 630; object-fit: cover; }