/* ==========================================================================
   KOMENTARZE POD GRAMI (comments.js, krok 2d, 4.10.2026). Przedrostek cm-.
   Okno: wzor statystyk (.sx-ovl/.sx-modal/.sx-hd w styles.css) — ramka --sys,
   ikona i akcenty --accent, na cudzym koncie .obcy (pomarancz). Elementy jak
   w czacie (friends.css): pole .fr-input, przycisk .fr-sd, pasek .fr-q.
   Mockup zatwierdzony: mockupy/mockup-komentarze.html (notatki/komentarze.md).
   ========================================================================== */
.cm-ovl[hidden] { display: none; }
/* okno nad oknem gry (#lightbox 3000) — .sx-ovl ma 5700 */
.cm-modal { max-width: 560px; height: 82vh; }
.cm-hd .r1 { margin-bottom: 10px; }
.cm-game { display: flex; align-items: center; gap: 11px; padding: 0 0 12px; min-width: 0; }
.cm-cv { width: 34px; height: 46px; flex: 0 0 auto; border-radius: 6px; background: #15171c center / cover no-repeat; border: 1px solid #22262c; }
.cm-gt { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.cm-gt b { font-size: 0.86rem; color: #fff; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-gt em { font-style: normal; font-size: 0.62rem; color: #68727b; letter-spacing: .4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-gt em i { color: var(--accent); margin-right: 4px; }

.cm-list { flex: 1; min-height: 0; overflow-y: auto; padding: 14px 16px 6px; display: flex; flex-direction: column; gap: 14px; }
.cm-c { display: flex; gap: 10px; min-width: 0; transition: background .4s, box-shadow .4s; }
/* awatar: inicjal pod spodem, zdjecie na wierzchu (jak .fr-av) */
.cm-av {
  position: relative; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #15171c; border: 1.5px solid #2a2f36; font-weight: 700; font-size: .78rem; color: #9aa3ab;
}
.cm-av img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.cm-av.me { border-color: color-mix(in srgb, var(--accent) 60%, transparent); color: var(--accent); }
.cm-r .cm-av { width: 26px; height: 26px; border-radius: 8px; font-size: .64rem; }
.cm-b { flex: 1; min-width: 0; }
.cm-top { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.cm-nick { font-size: .74rem; font-weight: 700; color: #dfe4e8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cm-nick.me { color: var(--accent); }
/* wlasciciel biblioteki: ikonka z dymkiem (decyzja Matta: domek z osoba) */
.cm-own { flex: 0 0 auto; font-size: .66rem; color: var(--accent); }
.cm-time { margin-left: auto; flex: 0 0 auto; font-size: .6rem; color: #5b6470; cursor: default; }
.cm-tx { margin-top: 3px; font-size: .8rem; line-height: 1.45; color: #c9d0d6; white-space: pre-wrap; overflow-wrap: anywhere; }
.cm-act { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.cm-act button { background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .62rem; font-weight: 700; letter-spacing: .8px; color: #68727b; display: inline-flex; align-items: center; gap: 5px; }
.cm-act button:hover { color: #c9d0d6; }
.cm-act .cm-lk { font-size: .62rem; font-weight: 700; color: #68727b; display: inline-flex; align-items: center; gap: 5px; }
.cm-like.on, .cm-like.on:hover, .cm-lk.on { color: var(--accent-social); }
.cm-del { margin-left: auto; opacity: 0; transition: opacity .15s; }
.cm-c:hover > .cm-b > .cm-act .cm-del, .cm-del:focus-visible { opacity: 1; }
.cm-act .cm-del:hover { color: var(--danger); }
/* potwierdzenie usuniecia w miejscu akcji */
.cm-ask { display: flex; align-items: center; gap: 10px; margin-top: 6px; font-size: .64rem; color: #c9d0d6; flex-wrap: wrap; }
.cm-ask button { border-radius: 7px; padding: 5px 10px; font: inherit; font-size: .6rem; font-weight: 700; letter-spacing: 1px; cursor: pointer; }
.cm-ask .cm-yes { background: color-mix(in srgb, var(--danger) 18%, transparent); border: 1px solid color-mix(in srgb, var(--danger) 55%, transparent); color: #ff8c8c; }
.cm-ask .cm-no { background: none; border: 1px solid #2a2f36; color: #8b949c; }
/* odpowiedzi: jeden poziom, kreska po lewej */
.cm-reps { margin-top: 10px; padding-left: 12px; border-left: 2px solid #1c2026; display: flex; flex-direction: column; gap: 10px; }
.cm-more { align-self: flex-start; background: none; border: none; padding: 0; cursor: pointer; font: inherit; font-size: .6rem; font-weight: 700; letter-spacing: 1px; color: var(--accent); }
.cm-more i { margin-right: 5px; }
/* komentarz, na ktory odpowiadasz, i przyjscie z powiadomienia */
.cm-c.reply-to > .cm-b > .cm-tx { color: #fff; }
.cm-c.reply-to > .cm-av { border-color: var(--accent); }
.cm-c.hl {
  border-radius: 12px; padding: 8px; margin: -8px;
  background: color-mix(in srgb, var(--accent) 6%, transparent);
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--accent) 50%, transparent), 0 0 18px color-mix(in srgb, var(--accent) 22%, transparent);
}
.cm-empty { margin: auto; text-align: center; color: #68727b; font-size: .74rem; line-height: 1.6; padding: 30px 20px; }
.cm-empty i { display: block; font-size: 1.7rem; color: var(--accent); opacity: .6; margin-bottom: 10px; }
/* pole: jak w czacie (.fr-inp/.fr-input/.fr-sd), ale rosnace */
.cm-foot { position: relative; flex: 0 0 auto; }
.cm-rq .fr-qlb { color: var(--accent); }
.cm-inp { align-items: flex-end; }
.cm-input { height: auto; min-height: 38px; max-height: 120px; padding: 9px 12px; resize: none; line-height: 1.4; overflow-y: auto; }
.cm-cnt { position: absolute; right: 64px; bottom: 16px; font-size: .55rem; color: #68727b; pointer-events: none; }
.cm-cnt.warn { color: var(--ocena-mid); }
.cm-nowrite { padding: 12px 16px 14px; border-top: 1px solid #191c21; font-size: .66rem; color: #68727b; text-align: center; }
.cm-nowrite i { color: var(--accent); margin-right: 6px; }

@media (max-width: 768px) {
  .cm-modal { height: calc(100vh - 20px); height: calc(100dvh - 20px); }
  .cm-list { padding: 12px 12px 6px; }
  .cm-del { opacity: .55; } /* telefon nie ma najechania */
}