/*
 * Okienka rozmów launchera — PROPOZYCJA v15.7 (01.10.2026, laboratorium). Wspólne dla launchera na stronie i na pulpicie.
 * Słowo właściciela: „czat odpiąć … okienko czatu otwierać, które można sobie przesuwać — w ten sposób można z wieloma osobami gadać,
 * do tego możliwość tworzenia czatów grupowych i z funkcją głosową w czacie i czacie głosowym, żeby przez serwer się komunikować nasz”.
 */
.czo-warstwa { position: absolute; inset: 0; pointer-events: none; z-index: 20; }
.czo-okno { position: absolute; width: 340px; height: 430px; min-width: 280px; min-height: 260px; display: grid; grid-template-rows: auto auto minmax(0, 1fr) auto auto; pointer-events: auto;
  border: 6px solid transparent; border-image: var(--e-rama, url('assets/gra/rama-mosiadz.svg')) 64 stretch; background: rgb(12 13 20 / 94%); background-origin: border-box;
  box-shadow: 0 16px 40px rgb(0 0 0 / 65%); color: #eee1c9; resize: both; overflow: hidden; }
.czo-okno.aktywne { box-shadow: 0 16px 44px rgb(0 0 0 / 70%), 0 0 0 1px #e4bf7788; }
.czo-glowa { display: flex; align-items: center; gap: 8px; padding: 6px 6px 6px 8px; cursor: grab; user-select: none; background: linear-gradient(#22201a, #15140f); border-bottom: 1px solid rgba(166, 132, 72, .42); touch-action: none; }
.czo-glowa:active { cursor: grabbing; }
.czo-glowa .czo-twarze { display: flex; }
.czo-glowa .czo-twarze img { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; border: 2px solid #6d5732; margin-right: -9px; background: #1a1610; }
.czo-glowa .czo-twarze img:last-child { margin-right: 0; }
.czo-glowa .czo-kto { min-width: 0; flex: 1; padding-left: 6px; }
.czo-glowa b { display: block; font: 600 13px 'Cinzel', Georgia, serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czo-glowa small { display: block; font-size: 12px; color: #b9a988; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.czo-ikona { width: 30px; height: 30px; display: grid; place-items: center; border: 1px solid rgba(166, 132, 72, .42); background: #1b1a14; color: #eee1c9; cursor: pointer; padding: 0; font: 15px 'JetBrains Mono', monospace; }
.czo-ikona:hover { border-color: #e4bf77; }
.czo-ikona.zielona { background: #24402a; border-color: #8fcf8f; color: #d9f5d9; }
.czo-ikona.czerwona { background: #5a1d24; border-color: #c4646d; color: #ffe1e1; }
.czo-ikona svg { width: 16px; height: 16px; }

.czo-wiad { list-style: none; margin: 0; padding: 8px 8px; display: flex; flex-direction: column; gap: 6px; overflow: auto; min-height: 0; scrollbar-width: thin; scrollbar-color: #7c6337 transparent; }
.czo-wiad li { max-width: 86%; padding: 5px 9px; border: 1px solid rgba(166, 132, 72, .42); background: #ffffff07; font-size: 15px; line-height: 1.35; }
.czo-wiad li.moja { align-self: flex-end; background: rgb(119 52 58 / 32%); border-color: #8d4a4f; }
.czo-wiad li.system { align-self: center; max-width: 100%; border-style: dashed; font-style: italic; color: #b9a988; font-size: 13px; }
.czo-wiad .autor { display: block; font: 600 11px 'Cinzel', serif; color: #e4bf77; margin-bottom: 1px; }
.czo-wiad time { display: block; font: 10px 'JetBrains Mono', monospace; color: #b9a988; }
.czo-stopka { display: flex; gap: 6px; padding: 6px; border-top: 1px solid rgba(166, 132, 72, .42); align-items: center; }
.czo-stopka input { flex: 1; min-width: 0; min-height: 34px; background: #10120e; color: #eee1c9; border: 1px solid rgba(166, 132, 72, .42); padding: 5px 8px; font: 15px 'EB Garamond', Georgia, serif; }
/* głos na żywo, „póki wciśnięty” — jak w grze */
.czo-glowa .czo-twarze img.mowi { border-color: #8fcf8f; box-shadow: 0 0 0 3px #8fcf8f66; }
.czo-mowi { display: none; align-items: center; gap: 6px; padding: 4px 10px; font-size: 13px; color: #d9f5d9; background: linear-gradient(90deg, #1f3524, #141a14); border-bottom: 1px solid #4f7a55; }
.czo-mowi.widac { display: flex; }
.czo-mowi svg { width: 15px; height: 15px; }
.czo-okno.nadaje .czo-mowi { color: #ffe1e1; background: linear-gradient(90deg, #4a1c22, #1d1214); border-bottom-color: #c4646d; }
.czo-ptt { display: flex; align-items: center; justify-content: center; gap: 8px; margin: 0 6px 6px; min-height: 38px; border: 4px solid transparent; border-image: var(--e-rama, url('assets/gra/rama-mosiadz.svg')) 64 stretch;
  background: linear-gradient(#2d2b22, #151710) center / calc(100% - 2px) calc(100% - 2px) no-repeat; background-origin: border-box; color: #eee1c9; font: 600 12px 'Cinzel', serif; letter-spacing: .05em; cursor: pointer; user-select: none; touch-action: none; }
.czo-ptt svg { width: 16px; height: 16px; }
.czo-ptt kbd { font: 11px 'JetBrains Mono', monospace; border: 1px solid #a6844888; padding: 0 5px; color: #f3d99e; }
.czo-okno.nadaje .czo-ptt { background: linear-gradient(#93414a, #4b1a20) center / calc(100% - 2px) calc(100% - 2px) no-repeat; background-origin: border-box; color: #fff; box-shadow: 0 0 14px #c0555f88; }
.czo-chip.mowi { box-shadow: 0 0 0 1px #8fcf8f88; }

/* zwinięte okna: pasek rozmów na dole */
.czo-dok { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; gap: 6px; pointer-events: auto; z-index: 21; }
.czo-chip { display: flex; align-items: center; gap: 6px; padding: 3px 10px 3px 3px; border: 4px solid transparent; border-image: var(--e-rama, url('assets/gra/rama-mosiadz.svg')) 64 stretch; background: rgb(12 13 20 / 92%); background-origin: border-box; color: #eee1c9; font: 600 12px 'Cinzel', serif; cursor: pointer; }
.czo-chip img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.czo-chip .czo-nowe { min-width: 18px; height: 18px; border-radius: 9px; background: #8d2f37; color: #fff; font: 600 10px/18px 'JetBrains Mono', monospace; text-align: center; padding: 0 4px; }

/* nowa grupa */
.czo-modal { position: absolute; inset: 0; display: none; place-items: center; background: #05060a99; pointer-events: auto; z-index: 100000; } /* 03.10: ponad okienkami (te dostają z-index od 31 w górę) */
.czo-modal.widac { display: grid; }
.czo-modal form { width: 360px; display: grid; gap: 10px; padding: 16px 18px; border: 8px solid transparent; border-image: var(--e-rama, url('assets/gra/rama-mosiadz.svg')) 64 stretch; background: rgb(12 13 20 / 97%); background-origin: border-box; color: #eee1c9; }
.czo-modal h3 { margin: 0; font: 600 16px 'Cinzel', serif; color: #eee1c9 !important; }
.czo-modal input[type='text'] { min-height: 36px; background: #10120e; color: #eee1c9; border: 1px solid rgba(166, 132, 72, .42); padding: 6px 9px; font: 16px 'EB Garamond', serif; }
.czo-modal .czo-wybor { max-height: 220px; overflow: auto; display: grid; gap: 4px; }
.czo-modal label { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 3px 4px; border: 1px solid transparent; }
.czo-modal label:has(input:checked) { border-color: #e4bf7788; background: #77343a33; }
.czo-modal label img { width: 28px; height: 28px; border-radius: 50%; object-fit: cover; }
.czo-modal .czo-przyciski { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; }
/* ⭐ 03.10 (launcher 0.1.8): osoby i ustawienia grupy */
.czo-modal .czo-blad { margin: 0; min-height: 1em; font-size: 14px; color: #f49e99; }
.czo-modal .czo-blad:empty { display: none; }
.czo-modal h4 { margin: 4px 0 0; font: 600 12px 'Cinzel', serif; letter-spacing: .08em; color: #e4bf77; }
.czo-modal .czo-pole { display: grid; gap: 4px; font-size: 14px; color: #b9a988; }
.czo-modal .czo-czlonkowie { list-style: none; margin: 0; padding: 0; max-height: 220px; overflow: auto; display: grid; gap: 3px; }
.czo-modal .czo-czlonkowie li { display: grid; grid-template-columns: 28px 1fr auto; gap: 8px; align-items: center; font-size: 15px; }
.czo-modal .czo-czlonkowie li img, .czo-modal .czo-czlonkowie .czo-litera { width: 28px; height: 28px; }
.czo-modal .czo-czlonkowie small { display: block; font-size: 12px; color: #b9a988; }
.czo-modal .czo-dodaj { display: flex; gap: 6px; }
.czo-modal select { flex: 1; min-height: 34px; background: #10120e; color: #eee1c9; border: 1px solid rgba(166, 132, 72, .42); padding: 4px 8px; font: 15px 'EB Garamond', serif; }
.czo-modal .czo-opusc { margin-right: auto; }
.czo-modal .guz.maly { min-height: 26px; padding: 1px 9px; font-size: 12px; }
.czo-modal small { color: #b9a988; }

@media (max-width: 1000px) {
  .czo-okno { left: 8px !important; right: 8px; width: auto !important; top: auto !important; bottom: 54px; height: 60vh !important; resize: none; }
  .czo-glowa { cursor: default; }
}

/* twarz bez portretu: pierwsza litera nicku w mosiężnym kółku */
.czo-litera { display: inline-grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; border: 2px solid #6d5732; background: radial-gradient(circle at 40% 35%, #2a2418, #12110c); color: #f3d99e; font: 600 14px 'Cinzel', serif; margin-right: -9px; }
.czo-litera:last-child { margin-right: 0; }
.czo-litera.mowi { border-color: #8fcf8f; box-shadow: 0 0 0 3px #8fcf8f66; }
.czo-chip .czo-litera { width: 24px; height: 24px; font-size: 12px; margin: 0; }
.czo-modal label .czo-litera { width: 28px; height: 28px; margin: 0; }
/* 01.10.2026 (zgłoszenie właściciela: „pole wpisywania czatu nie jest przyklejone do dolnej części ramki”): każdy element okienka
   w swoim rzędzie siatki NA STAŁE. Ukryty pasek „mówi” (display: none, czat bez głosu) wypadał z siatki — wtedy lista wiadomości
   trafiała do rzędu „auto”, a formularz do rzędu rozciąganego 1fr i pole wpisywania wisiało w połowie okienka. */
.czo-okno > .czo-glowa { grid-row: 1; }
.czo-okno > .czo-mowi { grid-row: 2; }
.czo-okno > .czo-wiad { grid-row: 3; }
.czo-okno > .czo-stopka { grid-row: 4; }