/* escale. panel w wersji pokazowej (jasny).
   Wszystkie wymiary w em, a wielkosc pisma liczona od szerokosci okna,
   wiec caly panel skaluje sie razem z oknem jak jeden rysunek. */
.okno__obraz { container-type: inline-size; background: #fff; }
.pnl { position: absolute; inset: 0; display: grid; grid-template-columns: 12.5em minmax(0, 1fr); font-size: 12px; font-size: clamp(9.5px, 1.3cqw, .94rem); line-height: 1.4; color: #07070c; background: #fff; text-align: left; }
.pnl button { font: inherit; color: inherit; cursor: pointer; border: 0; background: none; text-align: left; }
.pnl h3 { font: 600 1.7em/1.1 var(--kroj); letter-spacing: -.035em; }
.pnl h4 { font: 600 1.05em/1.2 var(--kroj); letter-spacing: -.01em; margin-bottom: .5em; }
.pnl :focus-visible { outline: 2px solid #6d5dfc; outline-offset: 1px; border-radius: .4em; }

/* menu boczne */
.pnl__bok { background: #f3f4f8; border-right: 1px solid rgba(7, 7, 12, .1); padding: 1.1em .7em .9em; display: flex; flex-direction: column; gap: .15em; overflow: hidden; }
.pnl__znak { font-weight: 600; font-size: 1.3em; letter-spacing: -.04em; padding: 0 .55em .5em; }
.pnl__znak i { display: inline-block; width: .2em; height: .2em; border-radius: 50%; background: var(--gradient); margin-left: .06em; }
.pnl__gr { font-size: .68em; letter-spacing: .14em; text-transform: uppercase; color: #6b6f85; padding: .9em .9em .3em; }
.pnl__bok button { padding: .5em .8em; border-radius: .6em; font-weight: 500; color: #50556b; white-space: nowrap; }
.pnl__bok button:hover { background: rgba(7, 7, 12, .06); }
.pnl__bok button.wl { background: #07070c; color: #fff; }
.pnl__ja { margin-top: auto; display: flex; align-items: center; gap: .5em; padding: .8em .5em 0; font-weight: 500; border-top: 1px solid rgba(7, 7, 12, .1); }
.pnl__aw { width: 1.75em; height: 1.75em; border-radius: 50%; display: inline-grid; place-items: center; color: #fff; font: 600 .72em/1 var(--kroj); font-style: normal; flex: none; }

.pnl .pnl__plus { margin-top: .7em; border: 1px dashed rgba(7, 7, 12, .32); color: #07070c; }
.okno.pelny .pnl { font-size: clamp(11px, 1.15cqw, 1.06rem); }

/* tresc widoku */
.pnl__tresc { padding: 1.5em 1.7em 1.3em; overflow-y: auto; display: flex; flex-direction: column; gap: .9em; outline: none; scrollbar-width: thin; }
.pnl__pod { color: #6b6f85; margin-top: -.6em; }
.pnl__k { border: 1px solid rgba(7, 7, 12, .12); border-radius: .9em; padding: 1em 1.1em; background: #fff; }
.pnl button.pnl__k { border: 1px solid rgba(7, 7, 12, .12); transition: border-color .2s; }
.pnl button.pnl__k:hover { border-color: #07070c; }
.pnl__plan { display: grid; grid-template-columns: 1fr auto; gap: .45em 1em; align-items: baseline; }
.pnl__plan b { font-weight: 600; } .pnl__plan span { color: #6b6f85; } .pnl__plan .pnl__pasek { grid-column: 1 / -1; }
.pnl__pasek { height: .5em; border-radius: 1em; background: rgba(7, 7, 12, .08); overflow: hidden; flex: none; }
.pnl__pasek i { display: block; height: 100%; background: var(--gradient); border-radius: 1em; }
.pnl__trzy { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8em; }
.pnl__trzy .pnl__k { display: grid; gap: .15em; align-content: start; }
.pnl__trzy strong { font: 600 1.55em/1.1 var(--kroj); letter-spacing: -.03em; font-variant-numeric: tabular-nums; }
.pnl__trzy span { color: #6b6f85; font-size: .9em; }
.pnl__dwa { display: grid; grid-template-columns: 1.25fr 1fr; gap: .8em; align-items: start; }
.pnl__dwa--szer { grid-template-columns: 1fr 1.15fr; } .pnl__dwa--kal { grid-template-columns: 1.75fr 1fr; }
.pnl__pusto { color: #6b6f85; }

/* zadania */
.pnl__zad { display: grid; grid-template-columns: auto 1fr auto auto; gap: .7em; align-items: center; padding: .5em 0; border-top: 1px solid rgba(7, 7, 12, .08); cursor: pointer; }
.pnl__zad:first-of-type { border-top: 0; }
.pnl__zad input { appearance: none; -webkit-appearance: none; width: 1.3em; height: 1.3em; border: 1.5px solid rgba(7, 7, 12, .35); border-radius: .38em; display: grid; place-items: center; cursor: pointer; margin: 0; font: inherit; }
.pnl__zad input:checked { background: #07070c; border-color: #07070c; }
.pnl__zad input:checked::after { content: ""; width: .6em; height: .32em; border: 2px solid #fff; border-top: 0; border-right: 0; transform: rotate(-45deg) translate(.06em, -.06em); }
.pnl__zad.zr span { text-decoration: line-through; color: #9ca0b4; }
.pnl__zad em { font-style: normal; color: #6b6f85; font-size: .85em; min-width: 3.2em; text-align: right; }
.pnl__os { display: flex; align-items: center; gap: .6em; padding: .4em 0; font-weight: 500; }
.pnl__os em { margin-left: auto; font-style: normal; font-weight: 400; font-size: .85em; color: #6b6f85; } .pnl__os em.on { color: #0b7a50; }
.pnl__filtry { display: flex; flex-wrap: wrap; gap: .4em; }
.pnl__filtry button, .pnl__koszt button { border: 1px solid rgba(7, 7, 12, .2); border-radius: 99em; padding: .3em .85em; font-weight: 500; font-size: .9em; }
.pnl__filtry button:hover, .pnl__koszt button:hover { border-color: #07070c; }
.pnl__filtry button.wl { background: #07070c; color: #fff; border-color: #07070c; }
.pnl__lista { padding: .3em 1.1em; }
.pnl__nowe { display: flex; gap: .5em; margin-top: auto; }
.pnl__nowe input { flex: 1; min-width: 0; border: 1px solid rgba(7, 7, 12, .2); border-radius: .7em; padding: .6em .9em; font: inherit; color: inherit; background: #fff; }
.pnl__nowe input:focus { outline: none; border-color: #6d5dfc; }
.pnl .pnl__nowe button { background: #07070c; color: #fff; border-radius: .7em; padding: .6em 1.1em; font-weight: 500; }

/* sprzedaz */
.pnl__kolejka { padding: .4em; display: grid; gap: .15em; }
.pnl__kolejka button { display: grid; grid-template-columns: 1fr auto; gap: 0 .6em; padding: .55em .7em; border-radius: .6em; }
.pnl__kolejka button:hover, .pnl__kolejka button.wl { background: #f3f4f8; }
.pnl__kolejka b { font-weight: 600; } .pnl__kolejka span { grid-column: 1; color: #6b6f85; font-size: .85em; }
.pnl__kolejka em { grid-row: 1 / 3; grid-column: 2; align-self: center; font-style: normal; font-size: .75em; font-weight: 500; background: #eceafe; color: #4a3fd0; padding: .25em .6em; border-radius: 99em; white-space: nowrap; }
.pnl__tel { font: 600 1.5em/1.2 var(--kroj); letter-spacing: -.02em; margin: .2em 0 .5em; font-variant-numeric: tabular-nums; }
.pnl .pnl__dzwon { background: #0b7a50; color: #fff; border-radius: .7em; padding: .65em 1.2em; font-weight: 600; width: 100%; text-align: center; font-variant-numeric: tabular-nums; }
.pnl .pnl__dzwon.trwa { background: #b3265e; }
.pnl__not { margin: .8em 0 .6em; color: #50556b; }
.pnl__ai { border-left: 3px solid #6d5dfc; background: #f3f2ff; border-radius: 0 .6em .6em 0; padding: .6em .8em; margin-bottom: .8em; font-size: .93em; }
.pnl__ai b { display: block; font-size: .72em; letter-spacing: .12em; text-transform: uppercase; color: #4a3fd0; margin-bottom: .2em; }

/* budzet */
.pnl__koszt { display: grid; grid-template-columns: 1fr auto 6em auto; gap: 1em; align-items: center; padding: .6em 0; border-top: 1px solid rgba(7, 7, 12, .08); }
.pnl__koszt:first-child { border-top: 0; }
.pnl__koszt em { font-style: normal; color: #6b6f85; font-size: .85em; } .pnl__koszt b { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.pnl__koszt button { min-width: 12.5em; text-align: center; }
.pnl__koszt.zr button { background: #e3f6ee; border-color: transparent; color: #0b7a50; } .pnl__koszt.zr span { color: #6b6f85; }

/* kalendarz */
.pnl__kalg { display: flex; justify-content: space-between; align-items: center; }
.pnl__kalg button { border: 1px solid rgba(7, 7, 12, .2); border-radius: .6em; padding: .3em .75em; margin-left: .3em; }
.pnl__kalg button:hover { border-color: #07070c; }
.pnl__siatka { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); border: 1px solid rgba(7, 7, 12, .12); border-radius: .9em; overflow: hidden; }
.pnl__siatka em { font-style: normal; font-size: .68em; letter-spacing: .1em; text-transform: uppercase; color: #6b6f85; padding: .55em .6em; }
.pnl__siatka button, .pnl__siatka > i { min-height: 3.7em; padding: .35em .4em; border-top: 1px solid rgba(7, 7, 12, .08); border-left: 1px solid rgba(7, 7, 12, .08); display: flex; flex-direction: column; gap: .15em; overflow: hidden; border-radius: 0; }
.pnl__siatka button:hover { background: #f3f4f8; }
.pnl__siatka button.wl { box-shadow: inset 0 0 0 2px #6d5dfc; }
.pnl__siatka b { font-weight: 500; font-size: .85em; }
.pnl__siatka span { font-size: .66em; line-height: 1.25; background: #eceafe; color: #4a3fd0; border-radius: .3em; padding: .1em .35em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.pnl__siatka span.url { background: #fdf0d5; color: #8a5a00; }
.pnl__wyd { display: flex; gap: .7em; padding: .4em 0; border-top: 1px solid rgba(7, 7, 12, .08); }
.pnl__wyd b { font-weight: 600; min-width: 3.4em; }
.pnl__wyd em { margin-left: auto; font-style: normal; color: #6b6f85; }
.pnl__k > .pnl__wyd:first-of-type { border-top: 0; }
.pnl .pnl__wiecej { color: #4a3fd0; font-weight: 500; margin-top: .4em; }
.pnl .pnl__dod { margin-top: .7em; border: 1px dashed rgba(7, 7, 12, .3); border-radius: .6em; padding: .5em .8em; width: 100%; text-align: center; font-weight: 500; }
.pnl .pnl__dod:hover { border-color: #07070c; }

/* twoj system */
.pnl__moduly button { font-size: 1em; padding: .45em 1.05em; }
.pnl .pnl__cta { background: #07070c; color: #fff; border-radius: 99em; padding: .6em 1.2em; font-weight: 500; white-space: nowrap; }
.pnl__k > .pnl__pusto { line-height: 1.5; }

/* rozmowy */
.pnl__czat { flex: 1; min-height: 6em; display: flex; flex-direction: column; gap: .6em; overflow-y: auto; }
.pnl__czat p { display: flex; gap: .6em; align-items: flex-end; max-width: 82%; }
.pnl__czat p.ja { align-self: flex-end; }
.pnl__czat span { background: #f3f4f8; border-radius: .9em; padding: .55em .85em; display: grid; }
.pnl__czat .ja span { background: #07070c; color: #fff; }
.pnl__czat b { font-size: .8em; font-weight: 600; } .pnl__czat em { font-style: normal; font-size: .7em; opacity: .55; justify-self: end; }

/* ------------------------------------------- wersje pokazowe uslug (dema.js) */
.pnl--demo { grid-template-columns: 1fr; }
.pnl button, .pnl__gr, .pnl h4, .dm-krok { -webkit-user-select: none; user-select: none; }      /* szybkie klikanie nie zaznacza tekstu */
.pnl--demo .pnl__gr { padding: .85em 0 .4em; }
.pnl__gr em, .dm-baza h4 em { font-style: normal; font-weight: 400; color: #6b6f85; font-size: .9em; margin-left: .5em; text-transform: none; letter-spacing: 0; }
.dm-trzy { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: .8em; }
.dm-trzy--wt { grid-template-columns: 1fr 1.25fr 1.15fr; }
.dm-wiersz.dm-wiersz--wt { grid-template-columns: 3.2em 1fr auto auto; }
.dm-para { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2em; }
@media (min-width: 721px) { .okno--demo[data-demo="film"] { height: clamp(34rem, 82vh, 48rem); } }
.dm-wiersz small { color: #6b6f85; font-size: .82em; white-space: nowrap; }
.pnl .dm-uzup { font-size: .76em; font-weight: 500; color: #8a5a00; background: #fdf0d5; border-radius: 99em; padding: .25em .7em; white-space: nowrap; }
.pnl .dm-b[disabled] { opacity: .55; cursor: default; }
.dm-ust h4 em, .pnl__k h4 em { font-style: normal; font-weight: 400; color: #6b6f85; font-size: .82em; margin-left: .4em; }
.dm-f-m { display: inline-block; overflow: hidden; vertical-align: top; padding: .06em 0 .1em; } .dm-f-m > span { display: inline-block; }
.dm-ust { overflow-y: auto; scrollbar-width: thin; }
.dm-ust.zablok .pnl__filtry { opacity: .45; pointer-events: none; }
/* rozmowa z agentem */
.dm-czat-g { display: flex; align-items: center; gap: .7em; padding-bottom: .75em; border-bottom: 1px solid rgba(7, 7, 12, .08); }
.dm-czat-g b { display: block; font-weight: 600; } .dm-czat-g span { font-size: .84em; color: #6b6f85; } .dm-czat-g em { margin-left: auto; }
.pnl .dm-aw { background: #6d5dfc; font-size: .6em; width: 2.6em; height: 2.6em; letter-spacing: .04em; }
.dm-czat-g .dm-aw { font-size: .72em; }
.dm-podp { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; } .dm-podp button { white-space: nowrap; flex: none; }
.dm-prawa { gap: .8em; } .dm-prawa > .pnl__k:first-child { flex: none; min-height: 8.5em; }
.dm-baza { flex: 1; min-height: 0; overflow-y: auto; scrollbar-width: thin; } .dm-baza .pnl__filtry button { font-size: .84em; }
.pnl__filtry button.byl { opacity: .45; }
/* konfigurator reklamy */
.dm-konf { grid-template-columns: 1.3fr 1fr; }
.dm-wynik strong { font-size: 1.3em; white-space: nowrap; }
.dm-pole { width: 100%; border: 1px solid rgba(7, 7, 12, .2); border-radius: .7em; padding: .55em .85em; font: inherit; color: inherit; background: #fff; } .dm-pole:focus { outline: none; border-color: #6d5dfc; }
.dm-licznik { display: inline-flex; align-items: center; gap: .7em; }
.pnl .dm-licznik button { width: 1.9em; height: 1.9em; border: 1px solid rgba(7, 7, 12, .25); border-radius: .5em; text-align: center; font-weight: 600; } .dm-licznik b { min-width: 1.2em; text-align: center; font-weight: 600; }
.dm-suwak { width: 100%; accent-color: #6d5dfc; margin: .2em 0; }
.dm-pilny { margin-top: .9em; } .dm-zastrz { font-size: .8em; margin-top: .8em; line-height: 1.45; }
.dm-pelne { flex: 1; min-height: 0; align-items: stretch; }
.dm-rowne { grid-template-columns: 1fr 1fr; }
.dm-kol { display: flex; flex-direction: column; gap: .7em; min-height: 0; }
.dm-kol .pnl__czat { flex: 1; min-height: 5em; }
.pnl__czat .dm-pisze { display: inline-flex; gap: .3em; align-items: center; }
.dm-pisze i { width: .42em; height: .42em; border-radius: 50%; background: #6b6f85; animation: dm-kropki 1s infinite; }
.dm-pisze i:nth-child(2) { animation-delay: .15s; } .dm-pisze i:nth-child(3) { animation-delay: .3s; }
@keyframes dm-kropki { 0%, 60%, 100% { transform: none; opacity: .45; } 30% { transform: translateY(-.3em); opacity: 1; } }
.dm-kroki { display: grid; grid-template-columns: repeat(5, 1fr); gap: .4em; padding: .3em 0 .2em; }
.dm-krok { position: relative; display: grid; justify-items: center; gap: .5em; text-align: center; font-size: .88em; color: #6b6f85; }
.dm-krok i { width: 2.4em; height: 2.4em; border-radius: .7em; border: 1.5px solid rgba(7, 7, 12, .25); display: grid; place-items: center; font-style: normal; font-weight: 600; background: #fff; position: relative; z-index: 1; transition: background-color .3s, border-color .3s, color .3s; }
.dm-krok::before { content: ""; position: absolute; top: 1.2em; right: 50%; width: 100%; height: 1.5px; background: rgba(7, 7, 12, .15); }
.dm-krok:first-child::before { display: none; }
.dm-krok.zr { color: #07070c; } .dm-krok.zr i { background: #07070c; border-color: #07070c; color: #fff; } .dm-krok.zr::before { background: #07070c; }
.dm-krok.cz { color: #07070c; } .dm-krok.cz::before { background: #07070c; }
.dm-krok.cz i { border-color: #6d5dfc; animation: dm-puls 1.3s infinite; }
.dm-krok.nie i { background: #b3265e; border-color: #b3265e; color: #fff; }
@keyframes dm-puls { 0% { box-shadow: 0 0 0 0 rgba(109, 93, 252, .45); } 100% { box-shadow: 0 0 0 .7em rgba(109, 93, 252, 0); } }
.dm-przyc { display: flex; gap: .5em; flex-wrap: wrap; margin-top: .9em; }
.pnl .dm-b { background: #07070c; color: #fff; border-radius: .7em; padding: .6em 1.2em; font-weight: 500; }
.pnl .dm-b--jasny { background: none; color: #07070c; border: 1px solid rgba(7, 7, 12, .25); }
.pnl .dm-b--ok { background: #0b7a50; } .pnl .dm-b--nie { background: #b3265e; }
.dm-wiersz { display: grid; grid-template-columns: 3.2em 1fr auto; gap: .8em; align-items: center; padding: .5em 0; border-top: 1px solid rgba(7, 7, 12, .08); }
.pnl__k > h4 + .dm-wiersz { border-top: 0; }
.dm-wiersz span:first-child { color: #6b6f85; } .dm-wiersz b { font-weight: 600; font-variant-numeric: tabular-nums; }
.dm-pm { display: inline-flex; gap: .25em; }
.pnl .dm-pm button { width: 1.9em; height: 1.9em; border: 1px solid rgba(7, 7, 12, .25); border-radius: .5em; text-align: center; font-weight: 600; }
.pnl .dm-pm button:hover { border-color: #07070c; }
.dm-znak { font-style: normal; font-size: .75em; font-weight: 500; padding: .25em .6em; border-radius: 99em; background: #e3f6ee; color: #0b7a50; white-space: nowrap; }
.dm-znak.cz { background: #fdf0d5; color: #8a5a00; }
/* linia miedzy systemami: gdy dane ida, biegnie po niej swiatlo */
.dm-lacze { position: relative; height: 2px; background: rgba(7, 7, 12, .1); margin: .7em 0 .5em; overflow: hidden; border-radius: 2px; }
.dm-lacze.idzie::after { content: ""; position: absolute; inset: 0; width: 35%; background: linear-gradient(90deg, transparent, #6d5dfc, #47d6e8); animation: dm-swiatlo .65s linear infinite; }
@keyframes dm-swiatlo { from { transform: translateX(-100%); } to { transform: translateX(290%); } }
.dm-zrodlo { display: grid; grid-template-columns: minmax(0, 1fr) 17% 13% 13%; gap: 0 2%; align-items: center; padding: .65em 0; border-top: 1px solid rgba(7, 7, 12, .08); width: 100%; font-variant-numeric: tabular-nums; }
.dm-zrodlo--g { border-top: 0; font-size: .7em; letter-spacing: .12em; text-transform: uppercase; color: #6b6f85; padding: .5em 0 .3em; }
.dm-zrodlo span:first-child { display: grid; gap: .35em; } .dm-zrodlo > span:not(:first-child) { text-align: right; } .dm-zrodlo b { font-weight: 600; }
.dm-slupek { display: block; height: .42em; border-radius: 1em; background: var(--gradient); min-width: .42em; }
.dm-zrodlo.wyl { opacity: .38; } .dm-zrodlo.wyl b { text-decoration: line-through; }
/* reklama motion */
.dm-film { margin-top: 0; flex-wrap: wrap; align-items: center; }
.dm-film input { flex: 1 1 12em; }
.pnl .dm-film .pnl__filtry button { background: none; color: #07070c; border: 1px solid rgba(7, 7, 12, .2); border-radius: 99em; padding: .3em .85em; font-weight: 500; }
.pnl .dm-film .pnl__filtry button.wl { background: #07070c; color: #fff; border-color: #07070c; }
.dm-pelne > .pnl__kolejka { align-content: start; }
.dm-scena { flex: 1; min-height: 9em; display: grid; place-items: center; background: #f3f4f8; border-radius: .9em; overflow: hidden; }
.dm-kadr { position: relative; background: #07070c; color: #f3f4f8; border-radius: .5em; overflow: hidden; display: grid; place-items: center; align-content: center; gap: .32em; text-align: center; font-family: var(--kroj); width: 16em; height: 9em; }
.dm-f-tlo { position: absolute; inset: 0; background: var(--gradient); opacity: 0; }
.dm-f-kropka { position: relative; width: .34em; height: .34em; border-radius: 50%; background: #47d6e8; }
.dm-f-tekst { position: relative; font-weight: 600; line-height: 1.02; letter-spacing: -.045em; padding: 0 .5em; max-width: 100%; }
.dm-f-marka { position: relative; font-size: .34em; font-weight: 500; letter-spacing: 0; color: #07070c; opacity: 0; border-bottom: 1px solid currentColor; padding-bottom: .15em; }

/* telefon: bez menu bocznego (zastepuje je lista widokow nad oknem), okno wyzsze */
@media (max-width: 720px) {
  .okno { height: min(76vh, 36rem); }
  .okno--demo { height: min(82vh, 40rem); }
  .okno--demo[data-demo="integracje"] { height: 50rem; } .dm-trzy.dm-trzy--wt { grid-template-rows: auto auto minmax(0, 1fr); }
  .dm-krok span { font-size: .82em; }
  .dm-zrodlo { grid-template-columns: minmax(0, 1fr) 30% 18%; } .dm-zrodlo > span:last-child { display: none; }
  .dm-scena { min-height: 14em; } .dm-wynik strong { font-size: 1.05em; }
  /* na pelnym ekranie menu boczne staje sie paskiem u gory, bo listy widokow nie widac */
  .okno.pelny .pnl { grid-template-rows: auto minmax(0, 1fr); font-size: clamp(12px, 3.4cqw, 15px); }
  .okno.pelny .pnl__bok { display: flex; flex-direction: row; overflow-x: auto; padding: .5em; gap: .2em; border-right: 0; border-bottom: 1px solid rgba(7, 7, 12, .1); scrollbar-width: none; }
  .okno.pelny .pnl__znak, .okno.pelny .pnl__gr, .okno.pelny .pnl__ja { display: none; } .okno.pelny .pnl__plus { margin: 0; }
  .pnl { grid-template-columns: 1fr; font-size: clamp(11px, 3.3cqw, 13.5px); }
  .pnl__bok, .okno__kurs, .okno__pier { display: none; }
  .pnl__tresc { padding: 1.2em 1.1em 1em; }
  /* minmax(0, 1fr): kolumna nie rozpycha sie do szerokosci najdluzszego wiersza (podpowiedzi w czacie sa w jednej linii) */
  .pnl__dwa, .pnl__dwa--szer, .pnl__dwa--kal, .dm-trzy { grid-template-columns: minmax(0, 1fr); }
  .pnl__dwa > *, .dm-trzy > *, .dm-kol > *, .pnl__k { min-width: 0; }
  /* czat agenta: rozmowa ma wlasne miejsce, slad czynnosci i baza wiedzy pod spodem */
  .okno--demo[data-demo="czat"] { height: 52rem; }
  [data-demo="czat"] .pnl__dwa { grid-template-rows: minmax(0, 1.25fr) minmax(0, 1fr); } [data-demo="czat"] .dm-kol .pnl__czat { min-height: 9em; }
  .dm-prawa > .pnl__k:first-child { min-height: 6.5em; } .pnl__czat p { max-width: 90%; }
  .pnl__koszt { grid-template-columns: 1fr auto; gap: .3em 1em; } .pnl__koszt em { display: none; } .pnl__koszt button { grid-column: 1 / -1; }
  .pnl__siatka button, .pnl__siatka > i { min-height: 3em; } .pnl__siatka span { display: none; }
  .pnl__siatka button:has(span) b::after { content: ""; display: inline-block; width: .4em; height: .4em; border-radius: 50%; background: #6d5dfc; margin-left: .3em; vertical-align: .1em; }
}
/* najwezsze telefony: trzy liczby obok siebie musza sie zmiescic */
@media (max-width: 350px) {
  .pnl__trzy { gap: .45em; } .pnl__trzy .pnl__k { padding: .75em .5em; } .pnl__trzy .pnl__k strong { font-size: 1em; white-space: normal; } .pnl__trzy .pnl__k span { overflow-wrap: anywhere; }
}