/* =====================================================================
   Komentarze pod ankietami i aktualnosciami (strona glowna).
   - Sekcja .kt to zwijany "widget" montowany pod karta ankiety / w karuzeli
     aktualnosci przez assets/js/komentarze-tresci.js.
   - Style km-* sa wspolne z komentarzami pod projektami (projekt-extra.css);
     tu powtorzone, bo index.html nie laduje projekt-extra.css.
   ===================================================================== */

/* --- Zwijany naglowek (przycisk "Komentarze (N)") --- */
.kt {
  margin-top: 14px;
  border-top: 1px solid var(--border);
  padding-top: 12px;
}
.kt-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--border);
  background: var(--surface-soft, transparent);
  color: var(--text-muted);
  border-radius: 10px;
  padding: 8px 14px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.kt-toggle:hover { border-color: var(--accent); color: var(--accent); }
.kt-toggle-ikona { font-size: 16px; line-height: 1; }
.kt-toggle-liczba { color: var(--text-muted); font-weight: 700; }
.kt-toggle-strzalka {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .18s ease;
}
.kt.is-otwarty .kt-toggle-strzalka { transform: rotate(180deg); }
.kt-panel { margin-top: 14px; }
.kt-panel[hidden] { display: none; }

/* --- Formularz dodawania --- */
.km-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; }
.km-form {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 16px;
  margin-bottom: 20px;
}
.km-jako {
  margin: 0 0 10px;
  font-size: 14px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.km-jako strong { color: var(--text); }
.km-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  flex: none;
  object-fit: cover;
  display: grid;
  place-items: center;
  overflow: hidden;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  background: var(--surface-soft);
  border: 1px solid var(--border);
}
.km-avatar-sm { width: 24px; height: 24px; font-size: 10px; }
.km-reply-do {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  padding: 8px 12px;
  border-radius: 10px;
  background: var(--surface-soft);
  font-size: 13px;
  color: var(--text-muted);
}
.km-reply-anuluj {
  border: none;
  background: transparent;
  color: var(--accent);
  cursor: pointer;
  font: inherit;
  font-weight: 600;
}
.km-form textarea {
  width: 100%;
  padding: 12px;
  border-radius: 12px;
  border: 1px solid var(--border);
  background: var(--bg, transparent);
  color: inherit;
  font: inherit;
  resize: vertical;
}
.km-form.is-zablokowany textarea { opacity: .6; }
.km-form-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 10px;
}
.km-licznik { font-size: 12px; color: var(--text-muted); }
.km-send {
  border: none;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 10px 18px;
  font: inherit;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.km-send:disabled { opacity: .6; cursor: default; }
.km-msg { margin: 10px 0 0; font-size: 13px; }
.km-msg.is-ok { color: var(--green); }
.km-msg.is-err { color: #e0566f; }

/* --- Lista komentarzy --- */
.km-lista { display: grid; gap: 14px; }
.km-pusto { color: var(--text-muted); font-size: 15px; margin: 0; }
.km-watek { display: grid; gap: 10px; }
.km-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--surface);
  padding: 12px 14px;
}
/* Serduszko pod komentarzem — dosunięte do prawej krawędzi paska akcji. */
.km-like {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 2px 4px;
  font: inherit;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
  border-radius: 8px;
}
.km-like svg { width: 15px; height: 15px; fill: currentColor; transition: transform .12s ease; }
.km-like:hover { color: #e0506a; }
.km-like:hover svg { transform: scale(1.15); }
.km-like.is-on { color: #e0506a; }
.km-like[disabled] { opacity: .6; cursor: default; }

.km-odpowiedz {
  margin-left: clamp(16px, 6vw, 40px);
  border-left: 3px solid color-mix(in srgb, var(--accent) 40%, var(--border));
}
.km-head {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 6px;
}
.km-nick { font-weight: 700; font-size: 14px; }
.km-nick.is-admin { color: var(--accent); }
.km-badge {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .03em;
  padding: 2px 7px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--accent) 16%, transparent);
  color: var(--accent);
}
.km-badge-ty {
  background: color-mix(in srgb, var(--text-muted) 18%, transparent);
  color: var(--text-muted);
}
.km-czas { margin-left: auto; font-size: 12px; color: var(--text-muted); }
.km-tresc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  white-space: pre-wrap;
  word-break: break-word;
}
.km-akcje { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 10px; }
.km-akcja {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 8px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  transition: border-color .12s ease, color .12s ease;
}
.km-akcja:hover { border-color: var(--accent); color: var(--accent); }
.km-akcja-del:hover { border-color: #e0566f; color: #e0566f; }

/* --- Menu blokad admina --- */
.km-mod {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid var(--border);
  display: grid;
  gap: 8px;
}
.km-mod-wiersz { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.km-mod-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  min-width: 160px;
}
.km-mod-btn {
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text-muted);
  border-radius: 7px;
  padding: 4px 9px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.km-mod-btn:hover { border-color: #e0566f; color: #e0566f; }